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, поэтому размер не нужно устанавливать как на сетке, так и на ее клип-путь. Если вам нужно изменить размер, сохраняя тот же радиус границы, вы можете связать 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> 

, который производит этот эффект: