Friday, March 21, 2014

Awesome LinearGradientBrush

Introduction

A linear gradient brush paints an area with a linear gradient. The LinearGradientBrush object represents a linear gradient brush. The default value linear gradient value is diagonal. The StartPoint and EndPoint properties of the LinearGradientBrush represent the start and end points of a gradient. The default values of these properties is (0,0) and (1,1), which is upper-left corner to lower-right corner of an area.

Figure 1 and 2 shows a diagonal gradient.

Fig1. Linear Gradient


Fig2. Linear Gradient with Stops


Example of Linear Gradient Brush
This example shows how to use the LinearGradientBrush class to paint an area with a linear gradient.

<Window x:Class="LinearGradientBrushTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="722" SizeToContent="Height" ResizeMode="NoResize">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary
                  Source="Theme.xaml">
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <WrapPanel FlowDirection="LeftToRight" Margin="10">

        <Rectangle Fill="{StaticResource CyanThemeBG}"/>
        <Rectangle Fill="{StaticResource MagentaBG}"/>
        <Rectangle Fill="{StaticResource BlackBG}"/>
        <Rectangle Fill="{StaticResource LightBG}"/>

        <Rectangle Fill="{StaticResource TealGreen}"/>
        <Rectangle Fill="{StaticResource CyanLargeBG}"/>
        <Rectangle Fill="{StaticResource MagentaLargeBG}"/>
        <Rectangle Fill="{StaticResource LightLargeBG}"/>

        <Rectangle Fill="{StaticResource GreenLargeBG}"/>
        <Rectangle Fill="{StaticResource PurpleBG}"/>
        <Rectangle Fill="{StaticResource DarkGreen}"/>
        <Rectangle Fill="{StaticResource DarkYellow}"/>

        <Rectangle Fill="{StaticResource DarkGrape}"/>
        <Rectangle Fill="{StaticResource DarkBrown}"/>
        <Rectangle Fill="{StaticResource ReflectedGradient}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientBlue}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientGray}"/>
        <Rectangle Fill="{StaticResource MulticoloredGradientRainbow}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow1}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow2}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradient}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient1}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient2}"/>
        <Rectangle Fill="{StaticResource GradientStopCollection}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrush}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushOpp}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity1}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity2}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity3}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity4}"/>
    </WrapPanel>

</Window>

Theme File:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <Style TargetType="Rectangle">
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="BitmapEffect">
            <Setter.Value>
                <DropShadowBitmapEffect />
            </Setter.Value>
        </Setter>
    </Style>

    <LinearGradientBrush x:Key="CyanThemeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFC6ECFE"/>
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0.5"/>
        <GradientStop Color="#FF0076DB" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFCFFB" Offset="0"/>
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0.5"/>
        <GradientStop Color="#FFC7174B" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="BlackBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF0F0F0F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FFE3E6F5" Offset="0.5"/>
        <GradientStop Color="#FFD5DBF1" Offset="0.5"/>
        <GradientStop Color="#FFE1E4FF" Offset="1"/>
    </LinearGradientBrush>
   
   
    <LinearGradientBrush x:Key="TealGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3FCA9" Offset="0"/>
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0.5"/>
        <GradientStop Color="#FFE0FF98" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="CyanLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3E6F5" Offset="0"/>
        <GradientStop Color="#FF9D9D9D" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="GreenLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="PurpleBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0B8FF"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF151733" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0FFC4"/>
        <GradientStop Color="#FF5D645F" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF15331F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkYellow" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF3FFB0"/>
        <GradientStop Color="#FF63645D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF2F3315" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGrape" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFB0FD"/>
        <GradientStop Color="#FF8D7485" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF331532" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkBrown" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFEAB0"/>
        <GradientStop Color="#FF8D8774" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF332A15" Offset="1"/>
    </LinearGradientBrush>
 
    <LinearGradientBrush x:Key="ReflectedGradient" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientBlue" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="CadetBlue" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientGray" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="LightGray" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="MulticoloredGradientRainbow" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow1" StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow2" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradient" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="BurlyWood" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient1" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Brown" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient2" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="MediumBlue" Offset="1"/>
        <GradientStop Color="White" Offset="0" />
    </LinearGradientBrush>

    <GradientStopCollection x:Key="CustomGradientStops">
        <GradientStop Offset="0.0" Color="White" />
        <GradientStop Offset="0.4" Color="Red" />
        <GradientStop Offset="0.5" Color="Yellow" />
        <GradientStop Offset="0.6" Color="Blue" />
        <GradientStop Offset="0.7" Color="Wheat" />
    </GradientStopCollection>
    <LinearGradientBrush x:Key="GradientStopCollection" GradientStops="{StaticResource CustomGradientStops}">
        <LinearGradientBrush.Transform>
            <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
        </LinearGradientBrush.Transform>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodPad" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Pad">
        <GradientStop Color="Chocolate" Offset="1"/>
        <GradientStop Color="Lavender" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodReflect" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Reflect">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="BurlyWood" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodRepeat" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Repeat">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="Turquoise" Offset="0" />
    </LinearGradientBrush>

    <RadialGradientBrush  x:Key="RadialGradientBrush">
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Black" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodPad" SpreadMethod="Pad">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodReflect" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >


    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodRepeat" SpreadMethod="Repeat">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushOpp">
        <GradientStop Color="White" Offset="1" />
        <GradientStop Color="Black" Offset="0" />
    </RadialGradientBrush >

    <GradientStopCollection x:Key="CustomGradientStops1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </GradientStopCollection>

    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity1" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.25"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity2" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.5"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity3" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.75"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity4" GradientStops="{StaticResource CustomGradientStops1}" Opacity="1"/>

</ResourceDictionary>

Expected  Output



External Resources




Post a Comment