圆角矩形上的 RadialGradientBrush

Question

我有一个带圆角的矩形（但不是椭圆），如下所示：

    <Rectangle Stroke="Black" StrokeThickness="2" RadiusX="50" RadiusY="100">
        <Rectangle.Fill>
            <RadialGradientBrush RadiusY="0.5">
                <GradientStop Color="Black" Offset="1" />
                <GradientStop Color="White" Offset="0.8" />
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

我想使用从黑到白的渐变填充。如何指定这个以使填充保持圆角矩形的形状，而不是椭圆？

Answer 1

对于圆角矩形，您可以在 XAML 中对角使用径向渐变，对边使用线性渐变。

该示例使用 ViewBox，因此无需在网格及其剪辑路径上都设置 Size。如果您需要调整大小以保持相同的边框半径，您可以绑定 RectangleGeometry.Rect 并使用 ValueConverter。可以在一处轻松更改渐变以及 RadiusX 和 RadiusY 属性。

    <Viewbox Stretch="Fill">
        <Grid Width="100" Height="100">
            <Grid.Resources>
                <Color x:Key="inside">White</Color>
                <GradientStopCollection x:Key="gradient">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="{DynamicResource inside}" Offset="0.2"/>
                </GradientStopCollection>
            </Grid.Resources>
            <Grid.Clip>
                <RectangleGeometry RadiusX="15" RadiusY="30" Rect="0,0,100,100" x:Name="clip" />
            </Grid.Clip>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding RadiusX, ElementName=clip}" />
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="{Binding RadiusX, ElementName=clip}" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="{Binding RadiusY, ElementName=clip}"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="{Binding RadiusY, ElementName=clip}"/>
            </Grid.RowDefinitions>
            <Rectangle Grid.Column="1" Margin="-1,0">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0,0" MappingMode="RelativeToBoundingBox" StartPoint="0,1" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Column="2" Grid.Row="1" Margin="0,-1">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="1,0" MappingMode="RelativeToBoundingBox" StartPoint="0,0" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Column="1" Grid.Row="2" Margin="-1,0">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Row="1" Margin="0,-1">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0,0" MappingMode="RelativeToBoundingBox" StartPoint="1,0" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Column="1" Grid.Row="1" Margin="-1">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{DynamicResource inside}" />
                </Rectangle.Fill>
                </Rectangle>
            <Rectangle>
                <Rectangle.Fill>
                    <RadialGradientBrush Center="1,1" RadiusX="1" RadiusY="1" GradientOrigin="1,1" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Column="2">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="0,1" RadiusX="1" RadiusY="1" GradientOrigin="0,1" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Column="2" Grid.Row="2">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1" GradientOrigin="0,0" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Row="2">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="1,0" RadiusX="1" RadiusY="1" GradientOrigin="1,0" GradientStops="{DynamicResource gradient}" />
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Viewbox>

如果您需要渐变来跟随更复杂的形状，您可以使用 V3.0 PixelShader 来实现。

Answer 2

下面是一个简单的例子，由更原始的渐变组成圆角矩形渐变：

<Canvas>
    <Canvas.Resources>
        <GradientStopCollection x:Key="stops">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Black" Offset="1"/>
        </GradientStopCollection>
        <RadialGradientBrush x:Key="cornerBrush" GradientStops="{StaticResource stops}"/>
        <LinearGradientBrush x:Key="topBrush" StartPoint="0,1" EndPoint="0,0" GradientStops="{StaticResource stops}"/>
        <LinearGradientBrush x:Key="leftBrush" StartPoint="1,0" EndPoint="0,0" GradientStops="{StaticResource stops}"/>
        <LinearGradientBrush x:Key="rightBrush" StartPoint="0,0" EndPoint="1,0" GradientStops="{StaticResource stops}"/>
        <LinearGradientBrush x:Key="bottomBrush" StartPoint="0,0" EndPoint="0,1" GradientStops="{StaticResource stops}"/>
    </Canvas.Resources>
    <Ellipse Canvas.Left="0" Canvas.Top="0"  Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
    <Ellipse Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
    <Ellipse Canvas.Left="0" Canvas.Top="200"  Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
    <Ellipse Canvas.Left="200" Canvas.Top="200"  Width="100" Height="100" Fill="{StaticResource cornerBrush}"/>
    <Rectangle Canvas.Left="50" Canvas.Top="0" Width="200" Height="50" Fill="{StaticResource topBrush}"/>
    <Rectangle Canvas.Left="0" Canvas.Top="50" Width="50" Height="200" Fill="{StaticResource leftBrush}"/>
    <Rectangle Canvas.Left="250" Canvas.Top="50" Width="50" Height="200" Fill="{StaticResource rightBrush}"/>
    <Rectangle Canvas.Left="50" Canvas.Top="250" Width="200" Height="50" Fill="{StaticResource bottomBrush}"/>
    <Rectangle Canvas.Left="50" Canvas.Top="50" Width="200" Height="200" Fill="White"/>
</Canvas>

产生这种效果的：