Animate Opacity

image_pdfimage_print


   
     
<Window x:Class="Animation.AnimateVisual"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateVisualBrush" Height="300" Width="300" Background="LightGoldenrodYellow">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>

      <Button Name="visual" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Content>Test</Button.Content>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard  RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0.1" Duration="0:0:4" AutoReverse="True"></DoubleAnimation>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
      
      <Rectangle Grid.Row="1" Name="rectangle" Width="100" Stretch="Uniform" ClipToBounds="False" RenderTransformOrigin="0.5,0.5">
        <Rectangle.Fill>
          <VisualBrush Visual="{Binding ElementName=visual}">
          </VisualBrush>
        </Rectangle.Fill>
      </Rectangle>
    </Grid>
  </Window>






     


Animation In Style

image_pdfimage_print


   
     
<Window x:Class="Animation.AnimationInStyle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    Title="AnimationInStyle" Height="300" Width="300">
  <Window.Resources>

    <Style x:Key="GrowButtonStyle">
      <Style.Triggers>
        <Trigger Property="Button.IsPressed" Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                  To="250" Duration="0:0:5"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
        </Trigger>
      </Style.Triggers>      
    </Style>

  </Window.Resources>
  <Button Padding="10" Name="cmdGrow" Height="40" Width="160" Style="{StaticResource GrowButtonStyle}"
          HorizontalAlignment="Center" VerticalAlignment="Center">
      Click and Make Me Grow    
  </Button>
</Window>






     


Animation without acceleration or deceleration

image_pdfimage_print


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">
    <Rectangle Name="rect1" Fill="Red" Margin="2" Width="20" Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>

                <DoubleAnimation
                  Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" />

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>






     


Animation with a fast speed

image_pdfimage_print


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">

    <Rectangle Name="rect2" Fill="Green" Margin="2" Width="20"
      Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>

                <DoubleAnimation
                  Storyboard.TargetName="rect2" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" SpeedRatio="1.5" />


              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>






     


Animation with a slow speed

image_pdfimage_print

     


<Window x:Class="AnimationSpeed"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Title="Animation Speed Example" Height="240" Width="410">


    <StackPanel Margin="5">

    <Rectangle Name="rect3" Fill="Blue" Margin="2" Width="20"

      Height="20" HorizontalAlignment="Left" />

    <Button Margin="2,20,0,0" HorizontalAlignment="Left"

      Content="Start Animations" Width="100">

      <Button.Triggers>

        <EventTrigger RoutedEvent="Button.Click">

          <EventTrigger.Actions>

            <BeginStoryboard>

              <Storyboard>


                <DoubleAnimation

                  Storyboard.TargetName="rect3" Storyboard.TargetProperty="Width"

                  From="20" To="400" Duration="0:0:10" SpeedRatio="0.5" />



              </Storyboard>

            </BeginStoryboard>

          </EventTrigger.Actions>

        </EventTrigger>

      </Button.Triggers>

    </Button>

  </StackPanel>

</Window>

Animation that accelerates through 50% of its duration

image_pdfimage_print


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">

    <Rectangle Name="rect4" Fill="Gray" Margin="2" Width="20"
      Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>

                <DoubleAnimation
                  Storyboard.TargetName="rect4" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" AccelerationRatio="0.5" />


              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>






     


Animation that decelerates through 50% of its duration

image_pdfimage_print


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">

    <Rectangle Name="rect5" Fill="Coral" Margin="2" Width="20"
      Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetName="rect5" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" DecelerationRatio="0.5" />


              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>