Create an interactive animation using XAML and the Storyboard : Storyboard « Windows Presentation Foundation « C# / CSharp Tutorial






<Window x:Class="WpfApplication1.CombineTransformAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animating Combine Transforms" Height="320" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="80" />
      <Setter Property="Height" Value="40" />
      <Setter Property="RenderTransform">
        <Setter.Value>
          <TransformGroup>
            <ScaleTransform />
            <SkewTransform />
            <RotateTransform />
          </TransformGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="StoryboardBegin">
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
                  To="30" Duration="0:0:1" RepeatBehavior="1x" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children[1].AngleX"
                  Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="20" HorizontalAlignment="Center">
    <Button Click="btn1_Click" x:Name="btn1">Button1</Button>
    <Button Click="btn2_Click" x:Name="btn2">Button2</Button>
    <Button Click="btnClose_Click">Close</Button>
    <TextBlock Name="tb1" Margin="5,40,5,5" />
  </StackPanel>
</Window>

//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;


namespace WpfApplication1
{
    public partial class CombineTransformAnimation : Window
    {
        public CombineTransformAnimation()
        {
            InitializeComponent();
        }

        private void btn1_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn1.Content;
        }

        private void btn2_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn2.Content;
        }


        private void btnClose_Click(object sender,RoutedEventArgs e)
        {
            this.Close();
        }
    }
}
WPF Create An Interactive Animation Using X A M L And The Storyboard








24.116.Storyboard
24.116.1.EventTrigger RoutedEvent=Image.LoadedEventTrigger RoutedEvent=Image.Loaded
24.116.2.Controlling The StoryboardControlling The Storyboard
24.116.3.Trigger Animation by Mouse in out actionTrigger Animation by Mouse in out action
24.116.4.Remove Animations with StoryboardRemove Animations with Storyboard
24.116.5.Create an interactive animation using XAML and the StoryboardCreate an interactive animation using XAML and the Storyboard
24.116.6.Create animations using the Storyboard in codeCreate animations using the Storyboard in code
24.116.7.Get resource in code as StoryboardGet resource in code as Storyboard
24.116.8.Stop, resume animation with StoryboardStop, resume animation with Storyboard