<!-- LinearGradientBrushAnimationExample.xaml
     Shows how to animate a LinearGradientBrush and
     its gradient stops. 
 -->
<Page  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="LinearGradientBrush Animation Example">
  <Page.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>
  </Page.Resources>

  <DockPanel>

    <!-- Header -->
    <Border Margin="10" 
      Background="{StaticResource blueHorizontalGradientBrush}" 
      DockPanel.Dock="Top">
      <TextBlock Style="{StaticResource MyIntroTextBlockStyle}" >
        The following examples show several different ways of animating
        LinearGradientBrush objects.
        Left-click the shapes to begin their animations.
      </TextBlock>
    </Border>

    <!-- Footer -->
    <Rectangle Margin="10"
      DockPanel.Dock="Bottom"
      Style="{StaticResource footerRectangleStyle}"
      Fill="{StaticResource blueHorizontalGradientBrush}" />

    <Border>
      <StackPanel Orientation="Horizontal">

        <StackPanel Margin="10"  Background="{StaticResource checkeredBackground}">
          <TextBlock>Animated GradientStop Offset</TextBlock>

          <!-- <SnippetGraphicsMMGradientOffsetAnimationInline> -->
          <Rectangle Name="animatedGradientStopOffsetExampleRectangle"
            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>
          <!-- </SnippetGraphicsMMGradientOffsetAnimationInline> -->

          <TextBlock>Animated GradientStop Color</TextBlock>

          <!-- <SnippetGraphicsMMGradientColorAnimationInline> -->
          <Rectangle Name="animatedGradientStopColorExampleRectangle"
            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>
          <!-- </SnippetGraphicsMMGradientColorAnimationInline> -->

          <TextBlock>Animated GradientStop Opacity</TextBlock>
          <Rectangle Name="animatedGradientStopOpacityExampleRectangle"
            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>
        <StackPanel Margin="10" Background="{StaticResource checkeredBackground}">
          <TextBlock>Animated StartPoint</TextBlock>
          <Rectangle 
            Width="200" 
            Height="100" Stroke="Black" StrokeThickness="1" 
            Margin="10">

            <Rectangle.Fill>
              <LinearGradientBrush x:Name="animatedStartPointExample">
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <PointAnimation 
                      Storyboard.TargetName="animatedStartPointExample"
                      Storyboard.TargetProperty="StartPoint"
                      From="0,0" To="0.5,1" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

          <TextBlock>Animated EndPoint</TextBlock>
          <Rectangle
            Width="200" Height="100" Stroke="Black" StrokeThickness="1" 
            Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush x:Name="animatedEndPointExample"
                StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <PointAnimation 
                      Storyboard.TargetName="animatedEndPointExample"
                      Storyboard.TargetProperty="EndPoint"
                      From="1,1" To="0.5,0" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

          <TextBlock>Animated StartPoint and EndPoint</TextBlock>
          <Rectangle 
            Width="200" Height="100" Stroke="Black" StrokeThickness="1"
            Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush x:Name="animatedStartPointEndPointExample">
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <PointAnimation 
                      Storyboard.TargetName="animatedStartPointEndPointExample"
                      Storyboard.TargetProperty="StartPoint"
                      From="0,0" To="0.5,1" Duration="0:0:3" FillBehavior="Stop" />
                    <PointAnimation 
                      Storyboard.TargetName="animatedStartPointEndPointExample"
                      Storyboard.TargetProperty="EndPoint"
                      From="1,1" To="0.5,0" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>
        </StackPanel>
      </StackPanel>
    </Border>
  </DockPanel>
</Page>
