LinearGradientBrush examples with GradientStop as Resources

image_pdfimage_print


   
  
    
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
    <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="0.4" Color="Black" />
      <GradientStop Offset="0.5" Color="White" />
      <GradientStop Offset="0.6" Color="Black" />
      <GradientStop Offset="0.7" Color="Blue" />
    </GradientStopCollection>
    
    </Window.Resources>
    <Rectangle Width="175" Height="90" Stroke="Black">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}"></LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
</Window>

   
    
     


Applies a RotateTransform to the brush's RelativeTransform property

image_pdfimage_print


   
  
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
    <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="0.4" Color="Black" />
      <GradientStop Offset="0.5" Color="White" />
      <GradientStop Offset="0.6" Color="Black" />
      <GradientStop Offset="0.7" Color="Blue" />
    </GradientStopCollection>
    
    </Window.Resources>
    <Rectangle Width="175" Height="90" Stroke="Black">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}">
          <LinearGradientBrush.RelativeTransform>
            <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
          </LinearGradientBrush.RelativeTransform>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

</Window>

   
    
     


GradientStopCollection

image_pdfimage_print


   
  
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
    <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="0.4" Color="Black" />
      <GradientStop Offset="0.5" Color="White" />
      <GradientStop Offset="0.6" Color="Black" />
      <GradientStop Offset="0.7" Color="Blue" />
    </GradientStopCollection>
    
    </Window.Resources>


    <Rectangle Width="175" Height="90" Stroke="Black" >
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}">
          <LinearGradientBrush.Transform>
            <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
          </LinearGradientBrush.Transform>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
</Window>

   
    
     


LinearGradientBrush Opacity from 1 to 0

image_pdfimage_print


   
  
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
        <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Color="Blue" Offset="0.0" />
      <GradientStop Color="Black" Offset="0.5" />
      <GradientStop Color="Transparent" Offset="1.0" />
    </GradientStopCollection>
    </Window.Resources>
    <StackPanel>

    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="1" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.75" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.5" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.25" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0" />
      </Rectangle.Fill>
    </Rectangle>
    </StackPanel>
</Window>

   
    
     


Animated GradientStop Offset

image_pdfimage_print


   
  
<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>
          <Rectangle Width="200"  Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopA2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation 
                      Storyboard.TargetName="gradientStopA2"
                      Storyboard.TargetProperty="Offset"
                      From="0.0" To="1.0" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>
    </StackPanel>
</Window>

   
    
     


Animated GradientStop Color

image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>
          <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopB2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation 
                      Storyboard.TargetName="gradientStopB2"
                      Storyboard.TargetProperty="Color"
                      From="Purple" To="Yellow" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

    </StackPanel>
</Window>

   
    
     


Animated GradientStop Opacity

image_pdfimage_print


   
  

<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>

          <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopC2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation 
                      Storyboard.TargetName="gradientStopC2"
                      Storyboard.TargetProperty="Color" 
                      Duration="0:0:3" FillBehavior="Stop">
                      <ColorAnimation.By>
                        <Color ScA="-1" ScR="0" ScB="0" ScG="0" />
                      </ColorAnimation.By>
                    </ColorAnimation>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

    </StackPanel>
</Window>