Mega Code Archive

 

Categories / Silverlight / Animations

 

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();     }   } }