0

使用 RadialGradientBrush 很简单，它允许中心颜色合并到外部颜色中。这可以很好地用作填充矩形或边框内部的画笔。我想实现像使用笔一样应用该画笔并将其应用为 Border.BorderBrush 的效果。所以边界的中心会变暗，远离边界它会消失。

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

目前我找不到任何方法来实现这一点，使用 RadialGradientBrush 或 LinearGradientBrush。一定有可能吗？有任何想法吗？

4

2 回答 2

4

你可以达到这样的效果

在此处输入图像描述

通过将您的内容放置在 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>
于 2012-08-29T17:50:55.543 回答
0

您可以尝试使用 aGrid或 aDockPanel然后使用LineorRectangle创建 4 个填充的不同区域。但是，在这种情况下，您不能使用 RadialGradient，因为它会拉伸并且看起来不正确。因此，您可以创建 4 个不同的 LinearGradient，它们被设置为在您想要的 4 个不同方向上渐变......但是，我认为这在角落里看起来也不正确......因为它们需要被斜接。 ..这不会那样做。

所以...

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

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

注意使用 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>

在此处输入图像描述

于 2012-08-29T14:30:26.643 回答