Professional Documents
Culture Documents
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 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>
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
// 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);
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);
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.