使用RadialGradientBrush类型效果的WPF绘图？

Question

使用RadialGradientBrush很简单，允许中心颜色合并为外部颜色。这可以很好地用作填充矩形或边框内部的画笔。我希望实现将该画笔应用为笔的效果，并将其应用为Border.BorderBrush。因此，边界的中心将是黑暗的，远离边界，它会逐渐消失。

另一种描述它的方法是在Windows Vista或Windows 7上看到顶级窗口周围的阴影。靠近窗口边框阴影是黑暗的，离窗口越远，阴影消失越多。好吧，我想以类似的方式画一个边框。

我目前无法使用RadialGradientBrush或LinearGradientBrush找到实现此目的的任何方法。肯定一定有可能吗？有什么想法吗？

Answer 1

你可以达到这样的效果

将您的内容放在3x3网格的中心（单元格1,1）中，如下所示：

<Grid>
    <Grid.Resources>
        <Color x:Key="InnerColor">#FF000000</Color>
        <Color x:Key="OuterColor">#FFFFFFFF</Color>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition />
        <ColumnDefinition Width="20"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="1" Grid.Row="0">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="1" Grid.Row="2">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,1" Center="1,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,1" Center="0,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,0" Center="1,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,0" Center="0,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

Answer 2

您可以尝试使用Grid或DockPanel，然后使用Line或Rectangle创建4个填充的不同区域。但是，在这种情况下，您不能使用RadialGradient，因为它会拉伸，看起来不对。所以你可以创建4个不同的LinearGradients，它们被设置为在你想要的4个不同方向上毕业......但是，我不认为这在角落里看起来是正确的......因为它们需要被忽略。 ..这不会那样做。

因此...

...您可以尝试使用这个知道如何沿路径绘制渐变的GradientPath控件。

• http://www.charlespetzold.com/blog/2009/02/Graphical-Paths-with-Gradient-Colors.html

注意，我没有花太多时间使用它，所以我还没有弄清楚如何正确使用它 - 矩形的开头和端盖不太正确。

注意使用PathGeometry而不是RectangleGeometry仍然存在同样的问题。

一种可能的解决方法是使用GradientPath创建2个矩形，然后通过对角线（使用合适的剪辑定义）剪切它们，以便它们各自贡献矩形的好部分（即没有开始/结束工件）......并将它们叠加在网格中。

或者你可以深入研究GradientPath代码。

如果你想采用这种方法，它应该会给你一些想法....并且在你的闲暇时间玩耍/实验，直到你想要它为止。

<gpl:GradientPath Name="gradientPath2"
                  StrokeThickness="30"
                  >
    <gpl:GradientPath.Data>
        <RectangleGeometry Rect="0,0,200,200" />
    </gpl:GradientPath.Data>
    <gpl:GradientPath.GradientStops>
        <GradientStop Offset="0" Color="Blue" />
        <GradientStop Offset="0.5" Color="Red" />
        <GradientStop Offset="1" Color="Green" />
    </gpl:GradientPath.GradientStops>
</gpl:GradientPath>