WPF LinearGradientBrush using XAML

This article and code snippet explains how to fill gradient color in the background of controls in WPF using XAML.

Through this example I am going to explain how to fill gradient color in the background.

A LinearGradientBrush paints a gradient along a line. The line's start and end points are defined by the StartPoint and EndPoint properties of the LinearGradientBrush.

<LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
</LinearGradientBrush>

StartPoint Property: Gets or sets the starting two-dimensional coordinates of the linear gradient. This is a dependency property.

EndPoint Property: Gets or sets the ending two-dimensional coordinates of the linear gradient. This is a dependency property.

GradientStop Class: Describes the location and color of a transition point in a gradient.

<GradientStop Color="#FFFFC934" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.567"/>

This example shows how to use the LinearGradientBrush class to paint an area with a linear gradient. In the following example, the Background of a Border is painted with linear gradient that transitions from yellow to white.

<Border.Background>
    <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
        <GradientStop Color="#FFFFC934" Offset="0"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.567"/>
    </LinearGradientBrush>
</Border.Background>



<Window x:Class="Gradient.Window1" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
Title="Gradient" Height="300" Width="400">

<Grid>
    <Border Margin="10,10,10,10" BorderBrush="Red" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
                <GradientStop Color="#FFFFC934" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="0.567"/>
            </LinearGradientBrush>
        </Border.Background>

        <DockPanel>
            <StackPanel Width="Auto" Height="235" DockPanel.Dock="Top" Orientation="Horizontal" VerticalAlignment="Top">

                <StackPanel Margin="15,20,15,20">
                    <Border BorderBrush="White" BorderThickness="4" Width="108" Height="88">
                        <Image Source="cat.jpg" Height="80" Width="100" Stretch="Fill"></Image>
                    </Border>
                </StackPanel>

                <StackPanel Margin="0,20,0,20">
                    <Label Content="Purushottam Rathore" FontSize="15" Foreground="Navy" />
                    <Label Content="India" FontSize="15" Foreground="Navy"/>
                </StackPanel>
            </StackPanel>
        </DockPanel>
    </Border>
</Grid>
</Window>