放射渐变的圆角矩形

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> 

产生这种效果：