使用 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 个不同的 LinearGradient，它们被设置为在您想要的 4 个不同方向上渐变......但是，我认为这在角落里看起来也不正确......因为它们需要被斜接。 ..这不会那样做。

所以...

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

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

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

注意使用 PathGeometry 代替 RectangleGeometry 仍然有同样的问题。

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

或者您可以深入研究 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>