Gradients with XAML

Use gradient effects with gradient elements.

We've seen how to fill a surface with color, or texture. More difficult, but with an amazing aesthetic result, these effects.

These elements are linear or radial. In the former case, the gradient effect follows the row. In the second, it is circular.
It is accompanied by a coloring beacon:

GradientStop

, whose attributes are color and offset in the image, Offset is the actual value indicating the start point of the shading.

<GradientStop
  Color="Red"
  Offset="0.20" 
/>

To have a gradient effect requires at least two colors, that is, two GradientStop tags. With the lighthouse we will have the same colour and we will have as many colours as the lighthouses...
Each color starts at the specified offset and moves to the next color offset (from the next GradientStop), but the color decreases between the beginning and end of the color depending on the next color .

Linear gradient

Applies to surface with feature:

LinearGradientBrush

It draws a gradient surface from the top left corner to the bottom right corner.
However, you can change the start and end points using the properties:

StartPoint
Endpoint

These properties are assigned a pair of coordinates.

In our example, a red-white gradient is applied to the surface, so we need two GradientStops:

<Rectangle
   Width="200"
   Height="100" >
    <Rectangle.Fill>
        <LinearGradientBrush>
             <GradientStop Color="White" Offset="0.50" />
             <GradientStop Color="Red" Offset="0.50" />
        </LinearGradientBrush>
    <Rectangle.Fill>
<Rectangle>

To display a color rectangle with a gradient:

See XAML code.

Radial gradient

A circular gradient with the tag:

RadialGradientBrush

LineraGradientBrush properties.
In our example, the offset of the light color is 1 from the edge, and the red color is 0.50 for the gradient thickness of half the radius:

<LinearGradientBrush>
      <GradientStop Color="White" Offset="1" />
      <GradientStop Color="Red" Offset="0.50" />
</LinearGradientBrush>

Example:

See full XAML code.