Animations in XAML
page 3 of 9
by Keyvan Nayyeri
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 40890/ 66

Storyboards

Storyboard elements can be declared to contain animations.  Storyboard elements should be nested in the BeginStoryboard parent element.  You can declare several Storyboard elements for different animations within a BeginStoryboard element.

As I stated in previous section, each Storyboard consists of a collection of animation type elements that specify the type and behavior of that animation.  A storyboard element has two important attributes:

·         Storyboard.Targetname: This is the target element name.

·         Storyboard.TargetProperty: The attribute that should be affected for the element that is specified in Storyboard.Targetname attribute.

On the basis of the attribute type you are going to animate, you need to choose one of the animation types.  For example, if you want to animate the width of an element, you should use DoubleAnimation.  If you want to animate the color of an attribute, you should use ColorAnimation.

There are two common types of animations: ColorAnimation and DoubleAnimation (there are other types which are similar to implement, so I will just give my examples with these two types).  You should choose one of the types based on your needs.

Regardless of the type of animation you are declaring, animations have five common attributes to set.

·         From: The value of the attribute at the start of animation.

·         To: The value of the attribute when animation ends.

·         By: The intermediate value of the attribute between the first and last values.

·         Duration: The duration of the animation.

·         RepeatBehavior: Specifies the behavior of animation.  It will be discussed in more detail later.

Let us see some examples.

Listing 1 is an animation that changes the width of a Button from 100 to 200 when the mouse enters the Button area.  It takes five seconds then ends.  It is very simple and does not need any comment.

Listing 1

<Window x:Class="AnimationsInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animations In XAML" Height="180" Width="300"
    >
  <StackPanel>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard Storyboard.TargetName="btnSend" 
                        Storyboard.TargetProperty="Width">
              <DoubleAnimation From="100"
                               To="200" 
                               Duration="0:0:5"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Thistle">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Some steps of the result are shown in Figure 1, Figure 2 and Figure 3.

Figure 1

Figure 2

Figure 3

Listing 2 is another example with better details.  It changes the background color of a Button from red to blue in five seconds, but uses "By attribute" to do this so it animates from red to beige then to blue smoothly.  Notice the usage of the new hierarchy address for Storyboard.TargetProperty value.

Listing 2

<Window x:Class="AnimationsInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animations In XAML" Height="180" Width="300"
    >   
  <StackPanel>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard Storyboard.TargetName="btnSend" 
                        Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
              <ColorAnimation From="Red"
                              To="Blue"
                              By="Beige" 
                              Duration="0:0:5" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>        
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Red">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Some steps of the result are shown in Figure 3, Figure 4 and Figure 5.

Figure 3

Figure 4

Figure 5

Listing 3 is a better example because it animates the width of a Button from 100 to 200, but this time with Forever as the RepeatBehavior.  This causes the animation to follow until the application stops.

Listing 3:

<Window x:Class="AnimationsInXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animations In XAML" Height="180" Width="300"
    >
  <StackPanel>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.MouseEnter">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard Storyboard.TargetName="btnSend" 
                        Storyboard.TargetProperty="Width">
              <DoubleAnimation From="100"
                               To="200" 
                               Duration="0:0:5"
                               RepeatBehavior="Forever"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Plum">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Results are shown in Figure 7, Figure 8 and Figure 9.  Note that this animation follows until you close the Window.

Figure 7

Figure 8

Figure 9


View Entire Article

User Comments

Title: Well Done and Thank you   
Name: Shrishail V. Halijol
Date: 2009-04-07 2:26:26 PM
Comment:
Hi...
Thanks for such a small article which covered this basics of animation in Silverlight. I really enjoyed reading this article.
Thanks again for the good work. Well done.
Title: Phenomenal   
Name: John A. Blesson
Date: 2009-01-21 4:49:10 AM
Comment:
I just loved the tutorials . Wanting to have more of it.

Keepup the good work.
Title: Go on guy...   
Name: Nima
Date: 2008-01-18 3:34:07 PM
Comment:
Dear Keyvan,
I like the way you do it. Short, fast and complete enough to get start with. I'm proud of such Iranians.
Take care
Title: Useful Information   
Name: Soumya
Date: 2007-06-15 11:00:08 AM
Comment:
Could you please post information/Code about making flyouts in XAML. When we click a button we should be able to get a flyout and then when we click anywhere on the flyout, it should close.
Title: Thanks   
Name: Keyvan Nayyeri
Date: 2006-10-25 12:19:24 PM
Comment:
Thank you Mohammad,

I'll try to follow these turotials :-) I'm glad to see they could be useful.
Title: Very Nicely Done!!1   
Name: AzamSharp
Date: 2006-10-25 11:38:51 AM
Comment:
Hi,

Very nice tutorials. Keep up the good work :)
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-25 12:34:42 AM
Comment:
Third part of these tutorials about Resources in XAML:
http://aspalliance.com/1032_Resources_in_XAML
Title: Layout in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-25 12:34:11 AM
Comment:
Second part of these tutorials about Layout in XAML:
http://aspalliance.com/1023_Layout_in_XAML
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-25 12:33:50 AM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-07-23 2:34:45 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search