RadialGradientBrush sur Rectangle

Question

-Corner Arrondi J'ai un rectangle avec des coins arrondis (mais pas d'une ellipse), quelque chose comme ceci:

<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> 

Je veux utiliser un remplissage en dégradé du noir au blanc. Comment puis-je le spécifier pour que le remplissage conserve la forme du rectangle arrondi, au lieu d'être une ellipse?

Answer 1

Pour un rectangle arrondi, vous pouvez tout faire en XAML en utilisant des dégradés radiaux pour les angles et des dégradés linéaires pour les côtés.

L'exemple utilise une ViewBox afin que la taille n'ait pas besoin d'être définie à la fois sur la grille et son chemin d'accès. Si vous en avez besoin pour redimensionner en conservant le même rayon de bordure, vous pouvez lier RectangleGeometry.Rect et utiliser un ValueConverter. Le gradient et les propriétés RadiusX et RadiusY peuvent être facilement modifiés en un seul endroit.

<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> 

Si vous devez un gradient de suivre des formes plus complexes, vous pouvez le faire avec un PixelShader V3.0.

Answer 2

Voici un exemple simple composant un gradient rectangle arrondi sur des gradients plus primitifs:

<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> 

qui produit cet effet: