Complete Guide to Gradients Using LinearGradientBrush in Silverlight 4.0

If you are new to brushes in Silverlight, please refer my previous article which covers basics of Silverlight painting along with SolidColorBrush and LinearGradientBrush.  You can find it here.

The entire source code for this article is available in the form of a free downloadable zip file.  The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 RC2 on Windows 7 Ultimate edition. I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.

Introducing Gradient Axis with the LinearGradientBrush

Let us consider the following code:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush>

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

                    <GradientStop Color="Red" Offset="0.5"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would result as shown below:

As we covered “GradientStop” in my previous article, let's focus on something more.  By default, the above applies diagonal gradient painting (from top-left to bottom-right).  In other words, the entire gradient pattern, which includes all defined GradientStops, gets painted from top-left to bottom-right. You can always control this axis using the “StartPoint” and “EndPoint” attributes of “LinearGradientBrush”. 

Let us rewrite the above code using “StartPoint” and “EndPoint”:

                <LinearGradientBrush StartPoint="0.0,0.0" EndPoint="1,1">

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

                    <GradientStop Color="Red" Offset="0.5"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

The above gives you output identical to the previous, but you have to switch your understanding from GradientStop to “StartPoint and EndPoint” as shown below:

Let us achieve the above using code-behind:

    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        'start: specifying StartPoint and EndPoint (from code-behind)

        Dim brBRYGrad = New LinearGradientBrush()

        brBRYGrad.StartPoint = New Point(0, 0)

        brBRYGrad.EndPoint = New Point(1, 1)

        Dim GradBlue As New GradientStop()

        GradBlue.Color = ColorHelper.Blue

        GradBlue.Offset = 0

        brBRYGrad.GradientStops.Add(GradBlue)

        Dim GradRed As New GradientStop()

        GradRed.Color = ColorHelper.Red

        GradRed.Offset = 0.5

        brBRYGrad.GradientStops.Add(GradRed)

        Dim GradYellow As New GradientStop()

        GradYellow.Color = ColorHelper.Yellow

        GradYellow.Offset = 1

        brBRYGrad.GradientStops.Add(GradYellow)

        Me.Rectangle1.Fill = brBRYGrad

        'end: specifying StartPoint and EndPoint (from code-behind)

    End Sub

More on Gradient Axis using the LinearGradientBrush

In the previous section, we saw how to specify the Gradient Axis for a LinearGradientBrush. In this section, we will look into different combinations to use with the gradient axis to achieve different gradient effects.

Top-Down Gradient

The following is the code you'd use to achieve a top-down gradient:

        <!--Top-Down Gradient -->

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="1.0, 0.0" EndPoint="1.0, 1.0">

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

                    <GradientStop Color="Red" Offset="0.5"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following effect:

You can also achieve the same effect by modifying the EndPoint, as shown below:

        <LinearGradientBrush StartPoint="0.0, 0.0" EndPoint="0.0, 1.0">

Left-Right Gradient

The following is the code that will achieve a left-right gradient:

        <!--Left-Right Gradient -->

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0.0, 1.0" EndPoint="1.0, 1.0">

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

                    <GradientStop Color="Red" Offset="0.5"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following effect:

Other effects

Here is code for an opposite diagonal:

<LinearGradientBrush StartPoint="1.0, 0.0" EndPoint="0.0, 1.0">

The below will achieve a reverse diagonal:

<LinearGradientBrush StartPoint="1.0, 1.0" EndPoint="0.0, 0.0">

This code gives you a right-left effect:

<LinearGradientBrush StartPoint="1.0, 0.0" EndPoint="0.0, 0.0">

And the code below will give you a gradient from the bottom to the top::

<LinearGradientBrush StartPoint="0.0, 1.0" EndPoint="0.0, 0.0">

You can also go beyond borders:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="-0.103,1.414" EndPoint="0.892,-0.135">

                    <GradientStop Color="Blue"/>

                    <GradientStop Color="Red" Offset="0.5"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following effect, in which red dominates::

The code-behind for all of the examples in this section is quite similar to the one provided in the previous section.

Transparent Gradients using the LinearGradientBrush

We did not examine transparent effects using gradients. A transparent effect in a gradient pattern can be easily achieved by not specifying any color for gradient stops.

Let us consider the following:

    <Canvas x:Name="LayoutRoot" Background="White">

        <Rectangle Canvas.Left="156" Canvas.Top="80" Height="101" Name="Rectangle2" Stroke="Black" StrokeThickness="1" Width="199" Fill="#FFBABAF2" />

        <!--Transparent Red-->

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

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

                    <GradientStop Color="Red" Offset="0"/>

                    <GradientStop Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

    </Canvas>

The above would give you the following output:

The important thing to note in the previous code is the second GradientStop, defined with no color. As the second GradientStop has no color, the first GradientStop (colored red) would naturally blend with the transparency, and finally, would let the objects behind the current shape be shown.

You can also have more GradientStops while making the middle GradientStop transparent, as shown below:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

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

                    <GradientStop Color="Red" Offset="0.07"/>

                    <GradientStop Offset="0.349"/>

                    <GradientStop Color="Yellow" Offset="0.73"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following output:

There is one more trick to achieving gradients with transparency. You can specify a GradientStop with a color along with a bit of transparency. I already explained the “transparency HEX bit” in my previous article; please refer to that if you find this difficult to understand.

The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

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

                    <GradientStop Color="Red" Offset="0"/>

                    <GradientStop Color="#80FFFF00" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following output:

You can also make the entire gradient pattern (all gradient stops in the brush) transparent using the “Opacity” attribute of the LinearGradientBrush:

The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

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

                    <GradientStop Color="Red"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the following output:

To specify “Opacity” in the code-behind, you can directly access “obj.Opacity” property (where “obj” would be an instance of type “LinearGraidentBrush” class).

Customizing the LinearGradientBrush using the SpreadMethod

You can achieve more effects using the “SpreadMethod” attribute available as part of LinearGradientBrush. This method offers three options: Pad, Repeat, and Reflect.

The “Pad” option makes the last GradientStop color continue until the end. The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,0.5" SpreadMethod="Pad" >

                    <GradientStop Color="Red" Offset="0"/>

                    <GradientStop Color="Yellow" Offset="0.5"/>

                    <GradientStop Color="Blue" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

Observe the attributes EndPoint, SpreadMethod and OffSets in the above code.  The above would deliver the result shown below:

The “Repeat” option causes the entire gradient pattern to be repeated from the beginning after the last GradientStop. The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,0.5" SpreadMethod="Repeat"  >

                    <GradientStop Color="Red" Offset="0"/>

                    <GradientStop Color="Yellow" Offset="0.5"/>

                    <GradientStop Color="Blue" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give the result shown below:

The “Reflect” option causes the entire gradient pattern to be started from reverse after the last GradientStop. The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="100" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="200" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,0.5" SpreadMethod="Reflect"   >

                    <GradientStop Color="Red" Offset="0"/>

                    <GradientStop Color="Yellow" Offset="0.5"/>

                    <GradientStop Color="Blue" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

The above would give you the result shown below:

When no “SpreadMethod” attribute is specified, LinearGradientBrush defaults to “Pad.”

Achieving the same using code-behind is quite simple:

    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        'start: Spread Method - Reflect (from code-behind)

        Dim brRYBGrad = New LinearGradientBrush()

        brRYBGrad.StartPoint = New Point(0, 0)

        brRYBGrad.EndPoint = New Point(0.5, 0.5)

        brRYBGrad.SpreadMethod = GradientSpreadMethod.Reflect

        Dim GradRed As New GradientStop()

        GradRed.Color = ColorHelper.Red

        GradRed.Offset = 0

        brRYBGrad.GradientStops.Add(GradRed)

        Dim GradYellow As New GradientStop()

        GradYellow.Color = ColorHelper.Yellow

        GradYellow.Offset = 0.5

        brRYBGrad.GradientStops.Add(GradYellow)

        Dim GradBlue As New GradientStop()

        GradBlue.Color = ColorHelper.Blue

        GradBlue.Offset = 1

        brRYBGrad.GradientStops.Add(GradBlue)

        Me.Rectangle1.Fill = brRYBGrad

        'end: Spread Method - Reflect (from code-behind)

    End Sub

The MappingMode option in LinearGradientBrush

In all of the above examples, we specified the end point using logical values between 0 and 1 (0 being the beginning and 1 being the end of the shape's area).  This is called “RelativeToBoundingBox” (which is the default) and is set via the “MappingMode” of LinearGradientBrush.

You have one more option in “MappingMode,” called “Absolute.”  This gives us the flexibility to specify the end point in specific pixels.

The following is an example:

        <Rectangle Canvas.Left="40" Canvas.Top="33" Height="107" Name="Rectangle1" Stroke="Black" StrokeThickness="1" Width="206" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0.5,0.5" EndPoint="110,50" MappingMode="Absolute">

                    <GradientStop Color="Red"/>

                    <GradientStop Color="Yellow" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

Observe the attributes EndPoint and MappingMode in the above code.  The same can be achieved using code-behind, as shown below:

    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

        'start: Mapping Mode - Absolute (code-behind)

        Dim brRYGrad = New LinearGradientBrush()

        brRYGrad.StartPoint = New Point(0, 0)

        brRYGrad.EndPoint = New Point(110, 50)

        brRYGrad.MappingMode = BrushMappingMode.Absolute

        Dim GradRed As New GradientStop()

        GradRed.Color = ColorHelper.Red

        GradRed.Offset = 0

        brRYGrad.GradientStops.Add(GradRed)

        Dim GradYellow As New GradientStop()

        GradYellow.Color = ColorHelper.Yellow

        GradYellow.Offset = 1

        brRYGrad.GradientStops.Add(GradYellow)

        Me.Rectangle1.Fill = brRYGrad

        'end: Mapping Mode - Absolute (code-behind)

    End Sub

In my upcoming articles, we will see more examples of Silverlight 4.0 development.  I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com