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

Key Frames

The last thing that you should know is about using Key Frames.  Suppose you want to declare an animation that moves from one frame to another, but not by default increments.  In this case you can declare all frames for your animation using one of KeyFrame elements.

Listing 7 is an example that shows everything you need.  It changes the width of a Button on the basis of custom frames that are declared using LinearDoubleKeyFrames which are declared in a DoubleAnimationUsingKeyFrames.

Listing 7

<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">
                  <DoubleAnimationUsingKeyFrames Duration="0:0:5">
                    <LinearDoubleKeyFrame Value="100" KeyTime="0:0:1" />
                    <LinearDoubleKeyFrame Value="110" KeyTime="0:0:2" />
                    <LinearDoubleKeyFrame Value="120" KeyTime="0:0:3" />
                    <LinearDoubleKeyFrame Value="130" KeyTime="0:0:4" />
                    <LinearDoubleKeyFrame Value="140" KeyTime="0:0:5" />
                  </DoubleAnimationUsingKeyFrames>                    
                </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Aquamarine">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Some frames of the results are shown in Figure 19, Figure 20 and Figure 21.

Figure 19

Figure 20

Figure 21


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-06-15 4:24:56 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search