Using Simple Animations with Objects : Animations « Animations « Silverlight






Using Simple Animations with Objects

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

   
    
    
    
  








Related examples in the same category

1.Controlling Animations ProgrammaticallyControlling Animations Programmatically
2.Creating from to AnimationsCreating from to Animations
3.Rectangles and Multiple Animation EffectsRectangles and Multiple Animation Effects
4.Chained Animation EffectsChained Animation Effects
5.Point Animation EffectsPoint Animation Effects
6.Starting an animation with a trigger
7.Create a bounce animationCreate a bounce animation
8.Move a rectangle from position (0,0) to position (300,0) in 5 secondsMove a rectangle from position (0,0) to position (300,0) in 5 seconds
9.Enlarge Button In Xaml
10.Two Animations
11.Animation without acceleration or deceleration
12.Animation with a slow speed
13.Animate EndPointAnimate EndPoint
14.Animate StartPointAnimate StartPoint
15.XAML Only Animation
16.Four Sided Bounce
17.Start the animation with Path is loaded
18.Brush animationBrush animation
19.Control the animation from codeControl the animation from code
20.Wipe out an ImageWipe out an Image
21.Rotating buttonRotating button
22.Simultaneous animationSimultaneous animation
23.Fade Image StoryboardFade Image Storyboard
24.Repetition durationRepetition duration
25.Timer triggered Animation
26.Use code to control DoubleAnimationUse code to control DoubleAnimation
27.Animation Ease effect
28.Animate transformationAnimate transformation
29.Grow a ButtonGrow a Button
30.3D Animation