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>