wpf - 圆角矩形上的 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。如果您需要调整大小以保持相同的边框半径，您可以绑定(bind) 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 来完成。