A linear gradient brush paints an area with a linear
gradient. The LinearGradientBrush object represents a linear gradient brush.
The default value linear gradient value is diagonal. The StartPoint and
EndPoint properties of the LinearGradientBrush represent the start and end
points of a gradient. The default values of these properties is (0,0) and
(1,1), which is upper-left corner to lower-right corner of an area.
Figure 16 and 17 show a diagonal gradient (MSDN sample).
Figure 16. Linear Gradient
Figure 17. Linear Gradient with Stops
Creating a Linear Gradient Brush
The LinearGradientBrush element in XAML creates a linear
gradient brush. The following code snippet creates a linear gradient brush with
blue and red colors by setting GradientStops. The StartPoint and EndPoint
values are (0,0) and (1,1).
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="1.0" />
</LinearGradientBrush>
We can fill a shape with a gradient brush by setting a
shape's Fill property to the gradient brush. The code snippet in Listing 15
creates a rectangle shape sets the Fill property to a LinearGradientBrush with
blue and red colors.
<Rectangle Width="200"
Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Blue"
Offset="0" />
<GradientStop Color="Red"
Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Listing 15
The output looks like Figure 18.
Figure 18. A shape filled with a linear gradient brush
Now let's apply multiple stops with multiple colors. The
code snippet in Listing 16 creates a linear gradient brush with five stops.
<Rectangle Width="200"
Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,1" >
<GradientStop Color="Blue"
Offset="0.1" />
<GradientStop Color="Orange"
Offset="0.25" />
<GradientStop Color="Yellow"
Offset="0.50" />
<GradientStop Color="Green"
Offset="0.75" />
<GradientStop Color="Red"
Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Listing 16
The new output generated by Listing 16 looks like Figure 19.
Figure 19. A linear gradient brush with 5 stops
The CreateARectangleWithLGBrush method
listed in Listing 17 draws same rectangle in Figure 19 dynamically.
public void CreateARectangleWithLGBrush()
{
// Create a
Rectangle
Rectangle
blueRectangle = new Rectangle();
blueRectangle.Height = 100;
blueRectangle.Width = 200;
// Create a
linear gradient brush with five stops
LinearGradientBrush
fiveColorLGB = new LinearGradientBrush();
fiveColorLGB.StartPoint = new Point(0, 0);
fiveColorLGB.EndPoint = new Point(1, 1);
// Create and add
Gradient stops
GradientStop
blueGS = new GradientStop();
blueGS.Color = Colors.Blue;
blueGS.Offset = 0.0;
fiveColorLGB.GradientStops.Add(blueGS);
GradientStop
orangeGS = new GradientStop();
orangeGS.Color = Colors.Orange;
orangeGS.Offset = 0.25;
fiveColorLGB.GradientStops.Add(orangeGS);
GradientStop
yellowGS = new GradientStop();
yellowGS.Color = Colors.Yellow;
yellowGS.Offset = 0.50;
fiveColorLGB.GradientStops.Add(yellowGS);
GradientStop
greenGS = new GradientStop();
greenGS.Color = Colors.Green;
greenGS.Offset = 0.75;
fiveColorLGB.GradientStops.Add(greenGS);
GradientStop
redGS = new GradientStop();
redGS.Color = Colors.Red;
redGS.Offset = 1.0;
fiveColorLGB.GradientStops.Add(redGS);
// Set Fill
property of rectangle
blueRectangle.Fill = fiveColorLGB;
// Add Rectangle
to the page
LayoutRoot.Children.Add(blueRectangle);
}
Listing 17
By simply changing the StartPoint and EndPoint values, we
can generate a vertical gradient shapes. By changing a few lines below in code
listed in Listing 17 generates Figure 20.
// Create a
linear gradient brush with five stops
LinearGradientBrush
fiveColorLGB = new LinearGradientBrush();
fiveColorLGB.StartPoint = new Point(0, 0.5);
fiveColorLGB.EndPoint = new Point(1, 0.5);
Figure 20. Vertical gradient