Reader Level:
Articles

WPF LinearGradientBrush using XAML

By Purushottam Rathore on February 25, 2009
This article and code snippet explains how to fill gradient color in the background of controls in WPF using XAML.
  • 0
  • 0
  • 98975

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

Purushottam Rathore

I am working as a Software Developer and has 6 years of experience on Microsoft Technology and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with ASP.NET 2.0/3.5/... Read more

COMMENT USING

Trending up