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

Change the Behavior of Animations

So far you have seen how the Forever value for RepeatBehavior of an animation causes it to run forever.  You can change this behavior with other values and also reverse your animations by setting their AutoReverse attribute to true.

In addition to Forever value for RepeatBehavior, you can specify the number of iterations.  Listing 4 is an animation that changes the width of a Button from 100 to 200 in five seconds, but twice (it is a modified version of Listing 3).  It also reverses itself. The result is shown in Figure 10, Figure 11 and Figure 12.

Listing 4

<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="2x"
                               AutoReverse="True"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Plum">
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 10

Figure 11

Figure 12


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