Microsoft says: “A LinearGradientBrush paints an area with a gradient that’s defined along a line. This line is called the gradient axis. You specify the gradient’s colors and their locations along the gradient axis using GradientStop objects. By default, the gradient axis runs from the upper left corner to the lower right corner of the area that the brush paints, resulting in a diagonal shading.”

Below is a diagram from Microsoft at their webpage called Using brushes to paint backgrounds, foregrounds, and outlines.

Below is the XAML code that produces the above result. It is part of a Windows Presentation Foundation (WPF) program that I developed in Visual Studio.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Brushes as XAML Resources

Here is what Micrtosoft says: “You can declare any brush to be a keyed XAML resource in a XAML resource dictionary. This makes it easy to replicate the same brush values as applied to multiple elements in a UI. The brush values are then shared and applied to any case where you reference the brush resource as a {StaticResource} usage in your XAML. This includes cases where you have a XAML control template that references the shared brush, and the control template is itself a keyed XAML resource.”

Below is an example of a project using two static resources.

Static Resources

Below is the XAML. In the XAML we’ve created two static resources in the Window Resources. In our XAML code, we use StaticResource ResourceKey to substitute in the resource that is named. We have another post called WPF Setting Custom Colors as XAML Static Resources.

<Window x:Class="LinearGradientBrush.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LinearGradientBrush"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="LinearGradientBrush" Height="150" Width="340">
    <Window.Resources>
        <SolidColorBrush x:Key="corporatecolorBrush">#330088CC</SolidColorBrush>
        <!-- #330088CC is hex for RGBA(0,136,204,51) -->
        <LinearGradientBrush x:Key="myLGBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0.0" x:Name="GradientStop1">
                <!-- just illustrating another way in the line below -->
                <GradientStop.Color>Yellow</GradientStop.Color>
            </GradientStop>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Window.Resources>
    <WrapPanel Background="{StaticResource corporatecolorBrush}">
        <Rectangle Width="80" Height="80" Margin="10">
            <Rectangle.Fill>
                <!-- resources minimize code duplication and mistakes -->
                <StaticResource ResourceKey="myLGBrush"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Width="80" Height="80" Margin="10">
            <Rectangle.Fill>
                <StaticResource ResourceKey="myLGBrush"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Width="80" Height="80" Margin="10">
            <Rectangle.Fill>
                <StaticResource ResourceKey="myLGBrush"/>
            </Rectangle.Fill>
        </Rectangle>
    </WrapPanel>
</Window>