Reader Level:
Article
WPF

WPF LinearGradientBrush using XAML

By Purushottam Rathore on Feb 25 2009
This article and code snippet explains how to fill gradient color in the background of controls in WPF using XAML.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 175.8k
  • 0

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>


gradientBackground.JPG

<
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>

gradient2.JPG