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

Transformations

Not only you can animate your element by changing its attributes, but you can animate it with different types of transforms in several directions.  You can use a Storyboard and one type of animation to change the RenderTransform of an element on runtime.

Listing 5 shows an example of this.  It changed the Angle attribute of a RotateTransform which belongs to the Button on runtime from 0 to 90 degrees.  Take a look at some frames of the results in Figure 13, Figure 14 and Figure 15.

Listing 5

<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="(RenderTransform).(RotateTransform.Angle)">
              <DoubleAnimation From="0"
                               To="90" 
                               Duration="0:0:5"/>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
    <Button Name="btnSend" 
            Width="100"
            Height="40"
            Margin="40"
            Background="Plum">
      <Button.RenderTransform>
        <RotateTransform Angle="0" CenterX="40" CenterY="40" />
      </Button.RenderTransform>
      ASP Alliance
    </Button>
  </StackPanel>
</Window>

Figure 13

Figure 14

Figure 15


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-2018 ASPAlliance.com  |  Page Processed at 2018-08-15 8:58:24 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search