Shaded pictures with gradients in XAML

We have seen how to fill a surface with a color, or a texture. More complicated, but with an atonishing aesthetic result, the use of shading, with gradients functions.

These functions are linear or radial. In the first case, the effect of shading follows a line. In the second it is circular.
It is accompanied by a tag for colouring:

GradientStop

whose attributes are the color and the offset in the image, Offset is a double number which indicates the starting point of colouring.

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

To have shade effect, at least two colors are needed, therefore two GradientStop tags. With a single tag there will be a uniform color, and acutally there may be as many colors as GradientStop tags.
Each color starts with the offset indicated and goes until the offset of following color (the following GradientStop), but between the start and the end of a color, colouring is shaded according to the color which follows.

Linear gradient

It applies to a surface with the function:

LinearGradientBrush

It shades a surface from the top left corner to the bottom right corner.
However, the starting point and the ending point can be modified with the properties:

StartPoint
Endpoint

To these properties is assigned a couple of coordinates.

In our example, a red and white range is applied to a surface, therefore 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>

Display of the shaded rectangle:

See the XAML code.

Radial gradient

A circular shading is obtained with the tag:

RadialGradientBrush

The properties are those of LineraGradientBrush.
In our example, the offset of the light color will be 1 to start from the edge, and that of the red color will be 0.50 for a thickness of half of the ray:

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

Example:

See the full XAML code.