Gradient Brush in WPF

Introduction

A Gradient Brush is normally used to achieve appealing effects such as metal, glass, water and shadows. WPF provides two kinds of gradient brushes:

LinearGradientBrush

It is used for a Linear axis. In this we define the direction of the axis to achieve vertical, horizontal or diagonal gradients. The Gradient axis is defined by two points StartPoint and EndPoint.

For Ex:

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

    <GradientStop Color="Green" Offset=".2"/>

    <GradientStop Color="Black" Offset=".4"/>

    <GradientStop Color="Blue" Offset=".6"/>

</LinearGradientBrush>

Here we define the GradientStop Property by which we define the points of the axis where you want colors to blend and transition to other colors. It has two properties Color and Offset. The Offset property is used to specify the distance from the start point of the axis. Its range starts from 0 to 1.

RadialGradientBrush

It is used to define the brush in the radial manner. Its axis starts from the origin which we can define called the GradientOrigin and runs the outer edge of the circle, which is the axis end point. Here we can also define the GradientStop objects. The Center point defines the center of the circle. The RadiusX and RadiusY properties specify the distance from center to the outer edge of the circle on the X and Y axis.

<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"

                             RadiusX="0.5" RadiusY="0.5">

        <GradientStop Color="Blue" Offset="0" />
</RadialGradientBrush>

 

Here we take an example in which we define the LinearGradientBrush and RadialGradientBrush

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="255*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle StrokeThickness="3" Margin="19.5,15.5">
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Color="Green" Offset=".5"/>
                <GradientStop Color="DarkTurquoise" Offset=".3"/>
                <GradientStop Color="Blue" Offset=".7"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Stroke>
            <SolidColorBrush Color="Pink"/>
        </Rectangle.Stroke>
    </Rectangle>
    <Rectangle Grid.Column="1" StrokeThickness="3" Margin="18,15.5,22,15.5">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                                 RadiusX="0.5" RadiusY="0.5">
              <GradientStop Color="Blue" Offset="0" />
              <GradientStop Color="Gray" Offset="0.45" />
              <GradientStop Color="Black" Offset="0.85" />
            </RadialGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Stroke>
        <SolidColorBrush Color="Blue"/>
        </Rectangle.Stroke>
    </Rectangle>
</Grid>

Here is the Output: