Silverlight » Animations Example

                              Using Simple Animations with Objects

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

  <UserControl.Resources>

    <Storyboard x:Name="Rect1MouseMove">

      <DoubleAnimation BeginTime="00:00:00.5" From="1" To="7"

                       AutoReverse="True" Storyboard.TargetName="Rect1"

                       Storyboard.TargetProperty="(Shape.StrokeThickness)"

                       Duration="00:00:00.5"/>

    </Storyboard>

    <Storyboard x:Name="EllipseMouseEnter">

      <ColorAnimation BeginTime="00:00:00" Duration="00:00:00.3"

                      From="#FFC18125" To="#FF2DBD43"

                      Storyboard.TargetName="Ellipse1"

                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/>

    </Storyboard>

    <Storyboard x:Name="EllipseMouseLeave">

      <ColorAnimation BeginTime="00:00:00" Duration="00:00:00.3" To="#FFC18125"

                      Storyboard.TargetName="Ellipse1"

                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/>

    </Storyboard>

    <Storyboard x:Name="PathClick">

      <PointAnimation AutoReverse="True"

        Storyboard.TargetProperty="Point"

        Storyboard.TargetName="animatedArcSegment"

        Duration="0:0:2" To="200,200"/>

    </Storyboard>

  </UserControl.Resources>

  <StackPanel>

    <Rectangle x:Name="Rect1" RadiusX="12" RadiusY="8" Opacity="0"

               HorizontalAlignment="Stretch" Margin="66,30,85,49"

               VerticalAlignment="Stretch" Width="129.2" Fill="#FF4863AF"

               Stroke="#FF000000" d:LayoutOverrides="Width"

               MouseEnter="Rect1_MouseEnter" MouseLeave="Rect1_MouseLeave">

      <Rectangle.Triggers>

        <EventTrigger RoutedEvent="Rectangle.Loaded">

          <BeginStoryboard>

            <Storyboard>

              <DoubleAnimation Storyboard.TargetName="Rect1"

                               BeginTime="00:00:00.1" 

                               Storyboard.TargetProperty="(UIElement.Opacity)"

                               From="0.0" To="1.0" Duration="0:0:1" />

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger>

      </Rectangle.Triggers>

    </Rectangle>

    <Ellipse x:Name="Ellipse1" HorizontalAlignment="Stretch"

             Fill="#FFC18125" Stroke="#FF000000"

             MouseEnter="Ellipse1_MouseEnter" MouseLeave="Ellipse1_MouseLeave">

      <Ellipse.Triggers>

        <EventTrigger RoutedEvent="Ellipse.Loaded">

          <BeginStoryboard>

            <Storyboard>

              <DoubleAnimation Storyboard.TargetName="Ellipse1"

                               BeginTime="00:00:00.4"  

                               Storyboard.TargetProperty="(UIElement.Opacity)"

                               From="0.0" To="1.0" Duration="0:0:1" />

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger>

      </Ellipse.Triggers>

    </Ellipse>

    <StackPanel Margin="4,4,4,4" x:Name="stackPanel" Opacity="0">

      <StackPanel.Triggers>

        <EventTrigger RoutedEvent="StackPanel.Loaded" >

          <BeginStoryboard>

            <Storyboard>

              <DoubleAnimation Storyboard.TargetName="stackPanel" 

                 BeginTime="00:00:00.8" From="0.0" To="1.0" Duration="0:0:1"

                 Storyboard.TargetProperty="(UIElement.Opacity)"/>

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger>

      </StackPanel.Triggers>

      <TextBox Height="Auto" Width="Auto" Text="TextBox"

                 TextWrapping="Wrap" Foreground="#FF000000" Background="#00FFFFFF" BorderBrush="{x:Null}"/>

     

      <TextBox Height="Auto" Width="Auto" Text="TextBox"

                 TextWrapping="Wrap" Foreground="#FF000000" Background="#00FFFFFF" BorderBrush="{x:Null}"/>

      <TextBox Height="Auto" Width="Auto" Text="TextBox"

                 TextWrapping="Wrap" Foreground="#FF000000" Background="#00FFFFFF" BorderBrush="{x:Null}"/>

      <TextBox Height="Auto" Width="Auto" Text="TextBox"

                 TextWrapping="Wrap" Foreground="#FF000000" Background="#00FFFFFF" BorderBrush="{x:Null}"/>

    </StackPanel>

    <Path Fill="Blue" Margin="10,10,10,10" MouseLeftButtonDown="Path_MouseLeftButtonDown">

      <Path.Data>

        <PathGeometry>

          <PathFigure>

            <ArcSegment x:Name="animatedArcSegment" Point="50,50" Size="50,150" RotationAngle="-20" IsLargeArc="False"

                    SweepDirection="Clockwise"/>

          </PathFigure>

        </PathGeometry>

      </Path.Data>

    </Path>

  </StackPanel>

</UserControl>

//File: Page.xaml.cs

using System.Windows.Controls;

using System.Windows.Input;

                                      namespace SilverlightApplication3

{

  public partial class MainPage : UserControl

  {

    public MainPage()

    {

      InitializeComponent();

    }

    private void Rect1_MouseEnter(object sender, MouseEventArgs e)

    {

      Rect1MouseMove.Begin();

    }

    private void Rect1_MouseLeave(object sender, MouseEventArgs e)

    {

      Rect1MouseMove.Begin();

    }

    private void Ellipse1_MouseEnter(object sender, MouseEventArgs e)

    {

      EllipseMouseEnter.Begin();

    }

    private void Ellipse1_MouseLeave(object sender, MouseEventArgs e)

    {

      EllipseMouseLeave.Begin();

    }

    private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

    {

      PathClick.Begin();

    }

  }

}

Controlling Animations Programmatically

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

    <UserControl.Resources>

          <Storyboard x:Name="FadeIt">

                <DoubleAnimation Storyboard.TargetName="btnFade"

                     Storyboard.TargetProperty="(UIElement.Opacity)"

                        From=".25" To="1" Duration="00:00:01"/>

        </Storyboard>

          <Storyboard x:Name="SizeIt">

               <DoubleAnimation Storyboard.TargetName="btnSize"

                      Storyboard.TargetProperty="(UIElement.RenderTransform).

                       (TransformGroup.Children)[0].(ScaleTransform.ScaleX)"

                        From="1" To="2" Duration="00:00:01"/>

                <DoubleAnimation Storyboard.TargetName="btnSize"

                      Storyboard.TargetProperty="(UIElement.RenderTransform).

                     (TransformGroup.Children)[0].(ScaleTransform.ScaleY)"

                        From="1" To="2" Duration="00:00:01"/>

        </Storyboard>

    </UserControl.Resources>

     <Grid x:Name="LayoutRoot" Background="Black">

         <Button x:Name="btnSize" Content="Resize">

            <Button.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Button.RenderTransform>

        </Button>

        <Button x:Name="btnFade" Content="Fade In"

                Height="50" Width="150" Margin="100,120,0,0"

                HorizontalAlignment="Left"  VerticalAlignment="Top"

                Opacity="0.25"/>

    </Grid>

</UserControl>

//File: Page.xaml.cs

 using System;

 using System.Windows;

 using System.Windows.Controls;

 using System.Windows.Input;

 using System.Windows.Media;

 using System.Windows.Media.Animation;

                                 namespace SilverlightApplication3

 {

     public partial class MainPage : UserControl

     {

         public MainPage()

          {

             InitializeComponent();

             btnFade.MouseEnter += new MouseEventHandler(btnFade_MouseEnter);

             btnSize.MouseEnter += new MouseEventHandler(btnSize_MouseEnter);

             btnFade.MouseLeave += new MouseEventHandler(btnFade_MouseLeave);

             btnSize.MouseLeave += new MouseEventHandler(btnSize_MouseLeave);

          }

          void btnSize_MouseEnter(object sender, MouseEventArgs e)

          {

              SizeIt.Begin();

          }

          void btnFade_MouseEnter(object sender, MouseEventArgs e)

          {

              FadeIt.Begin();

          }

          void btnSize_MouseLeave(object sender, MouseEventArgs e)

          {

              SizeIt.Stop();

          }

          void btnFade_MouseLeave(object sender, MouseEventArgs e)

          {

             FadeIt.Stop();

          }

     }

 }

                                          Creating from to Animations

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Grid x:Name="LayoutRoot" Background="White">

    <Grid.Triggers>

         <EventTrigger RoutedEvent="Grid.Loaded">

            <TriggerActionCollection>

                 <BeginStoryboard>

                    <Storyboard BeginTime="0:0:0"

                                Duration="Forever">

                         <DoubleAnimation

                             Storyboard.TargetName="pulse"

                             Storyboard.TargetProperty="RadiusX"

                             From="0" To="1"

                             Duration="0:0:2"

                             AutoReverse="True" />

                         <DoubleAnimation

                             Storyboard.TargetName="pulse"

                             Storyboard.TargetProperty="RadiusY"

                             From="0" To="1"

                             Duration="0:0:2"

                             AutoReverse="True" />

                     </Storyboard>

                </BeginStoryboard>

             </TriggerActionCollection>

         </EventTrigger>

    </Grid.Triggers>

     <Ellipse Height="200" Width="200">

        <Ellipse.Fill>

             <RadialGradientBrush x:Name="pulse"

                                  RadiusX="0.0"

                                  RadiusY="0.0"

                                 GradientOrigin="0.5,0.5">

                 <GradientStop Color="Blue"/>

                 <GradientStop Color="White"

                               Offset="0.5"/>

                 <GradientStop Color="Blue"

                              Offset="1"/>

            </RadialGradientBrush>

         </Ellipse.Fill>

    </Ellipse>

</Grid>

</UserControl>

                                Rectangles and Multiple Animation Effects

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Canvas>

  <Rectangle Name="rectangle1" Width="50" Height="200"

             Canvas.Left="50" Canvas.Top="50"

             Fill="Red" Stroke="Black" StrokeThickness="4">

    <Rectangle.Triggers>

      <EventTrigger RoutedEvent="Rectangle.Loaded">

        <EventTrigger.Actions>

          <BeginStoryboard>

            <Storyboard

              Storyboard.TargetProperty="Width"

              Storyboard.TargetName="rectangle1">

              <DoubleAnimation From="50" To="200" Duration="0:0:5"/>

            </Storyboard>

          </BeginStoryboard>

          <BeginStoryboard>

            <Storyboard

              Storyboard.TargetProperty="Height"

              Storyboard.TargetName="rectangle1">

              <DoubleAnimation From="200" To="50" Duration="0:0:5"/>

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger.Actions>

      </EventTrigger>

    </Rectangle.Triggers>

  </Rectangle>

</Canvas>

</UserControl>

                                        Chained Animation Effects

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Canvas>

  <Rectangle Name="rectangle1" Width="50" Height="200"

             Canvas.Left="50" Canvas.Top="50"

             Fill="Red" Stroke="Black" StrokeThickness="4">

     <Rectangle.Triggers>

       <EventTrigger RoutedEvent="Rectangle.Loaded">

         <EventTrigger.Actions>

           <BeginStoryboard>

             <Storyboard Storyboard.TargetProperty="Width"

               Storyboard.TargetName="rectangle1">

               <DoubleAnimation BeginTime="0:0:0" AutoReverse="true"

                                From="50" To="200" Duration="0:0:5"/>

             </Storyboard>

           </BeginStoryboard>

           <BeginStoryboard>

             <Storyboard Storyboard.TargetProperty="Height"

               Storyboard.TargetName="rectangle1">

               <DoubleAnimation BeginTime="0:0:5"   AutoReverse="true"

                                From="200" To="50" Duration="0:0:5"/>

             </Storyboard>

           </BeginStoryboard>

         </EventTrigger.Actions>

       </EventTrigger>

    </Rectangle.Triggers>

  </Rectangle>

</Canvas>

</UserControl>

                                          Point Animation Effects

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Canvas>

  <Path Fill="Red" Stroke="Black">

    <Path.Data>

      <PathGeometry>

        <PathFigure StartPoint="20,20">

          <QuadraticBezierSegment x:Name="qbezier1"

                                  Point1="500,500" Point2="200,80"/>

        </PathFigure>

      </PathGeometry>

    </Path.Data>

    <Path.Triggers>

      <EventTrigger RoutedEvent="Path.Loaded">

        <BeginStoryboard>

          <Storyboard>

            <PointAnimation Storyboard.TargetName="qbezier1"

                            Storyboard.TargetProperty="Point2"

                            From="200,80" To="50,300" Duration="0:0:5"/>

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger>

    </Path.Triggers>

  </Path>

</Canvas>

</UserControl>

                                 Starting an animation with a trigger

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

       

        <Ellipse Name="myEllipse" Fill="Red" Height="100" Width="10">

          <Ellipse.Triggers>

            <EventTrigger RoutedEvent="Ellipse.MouseEnter">

              <BeginStoryboard>

                <Storyboard>

                  <DoubleAnimation Storyboard.TargetProperty="(Ellipse.Width)"

                                   To="300" Duration="0:0:5" />

                </Storyboard>

              </BeginStoryboard>

            </EventTrigger>

          </Ellipse.Triggers>

        </Ellipse>

</UserControl>

                                      Create a bounce animation

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Canvas>

  <Canvas.Triggers>

    <EventTrigger RoutedEvent="Canvas.Loaded">

      <EventTrigger.Actions>

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimation

              Storyboard.TargetName="rect1"

              Storyboard.TargetProperty="(Canvas.Left)"

              From="0"

              To="300"

              Duration="0:0:5">

              <DoubleAnimation.EasingFunction>

                <BounceEase/>

              </DoubleAnimation.EasingFunction>

            </DoubleAnimation>

            <DoubleAnimation

              Storyboard.TargetName="rect1"

              Storyboard.TargetProperty="(Canvas.Top)"

              From="0"

              To="300"

              Duration="0:0:5"

            />

          </Storyboard>

        </BeginStoryboard>

     </EventTrigger.Actions>

    </EventTrigger>

  </Canvas.Triggers>

  <Rectangle x:Name="rect1" Width="25" Height="25" Fill="Red"/>

</Canvas>

</UserControl>

           Move a rectangle from position (0,0) to position (300,0) in 5 seconds

<UserControl x:Class='SilverlightApplication3.MainPage'

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

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

    xmlns:d='http://schemas.microsoft.com/expression/blend/2008'

    xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'

    mc:Ignorable='d'

    d:DesignWidth='640'

    d:DesignHeight='480'>

<Canvas>

  <Canvas.Triggers>

    <EventTrigger RoutedEvent="Canvas.Loaded">

      <EventTrigger.Actions>

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimation

              Storyboard.TargetName="rect1"

              Storyboard.TargetProperty="(Canvas.Left)"

              From="0"

              To="300"

              Duration="0:0:5"

              />

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger.Actions>

    </EventTrigger>

  </Canvas.Triggers>

  <Rectangle x:Name="rect1" Width="100" Height="100" Fill="Red"/>

</Canvas>

</UserControl>