Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Animations : Click and Spin

- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
3/31/2011 3:08:17 PM
Suppose you want to enhance a button to give some extra visual feedback to the user. You decide you actually want a lot of visual feedback to wake up a drowsy user, and therefore you choose to spin the button around in a circle every time it’s clicked.

Here are a few buttons in a XAML file:

Example 1. Silverlight Project: ClickAndSpin File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Button Content="Button No. 1"
Grid.Row="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform />
</Button.RenderTransform>
</Button>

<Button Content="Button No. 2"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform />
</Button.RenderTransform>
</Button>

<Button Content="Button No. 3"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5 0.5"
Click="OnButtonClick">
<Button.RenderTransform>
<RotateTransform />
</Button.RenderTransform>
</Button>
</Grid>


Each of the buttons has its RenderTransform property set to a RotateTransform, and its RenderTransformOrigin set for the element center.

The Click event handler is responsible for defining and initiating the animation that spins the clicked button. (Of course, in a real application, the Click handler would also perform something important to the program!) The handler begins by obtaining the Button that the user touched, and the RotateTransform associated with that particular Button:

Example 2. Silverlight Project: ClickAndSpin File: MainPage.xaml.cs (excerpt)
void OnButtonClick(object sender, RoutedEventArgs args)
{
Button btn = sender as Button;
RotateTransform rotateTransform = btn.RenderTransform as RotateTransform;

// Create and define animation
DoubleAnimation anima = new DoubleAnimation();
anima.From = 0;
anima.To = 360;
anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

// Set attached properties
Storyboard.SetTarget(anima, rotateTransform);
Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.
AngleProperty));

// Create storyboard, add animation, and fire it up!
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(anima);
storyboard.Begin();
}


Getting the animation going requires three steps:

  1. Define the animation itself. The animation needed here will target the Angle property of a RotateTransform, and the Angle property is of type double, so that suggests a DoubleAnimation:

    DoubleAnimation anima = new DoubleAnimation();
    anima.From = 0;
    anima.To = 360;
    anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

    This DoubleAnimation will animate a property of type double from a value of 0 to a value of 360 in ½ second. The Duration property of DoubleAnimation is of type Duration, and in code it is very common to set it from a TimeSpan object. But the Duration property is not itself of type TimeSpan primarily due to legacy issues. You can alternatively set the Duration property to the static Duration.Automatic value, which is the same as not setting Duration at all (or setting it to null), and which creates an animation with a duration of 1 second.

  2. Set the attached properties. The DoubleAnimation must be associated with a particular object and property of that object. You specify these using two attached properties defined by the Storyboard class:

    Storyboard.SetTarget(anima, rotateTransform);
    Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));


    The attached properties are Target and TargetProperty. As you’ll recall, when you set attached properties in code, you use static methods that begin with the word Set.

    In both cases, the first argument is the DoubleAnimation just created. The SetTarget call indicates the object being animated (in this case RotateTransform), and the SetTargetProperty call indicates a property of that object. The second argument of the SetTargetProperty method is of type PropertyPath, and you’ll note that I’ve specified the fully-qualified dependency property for the Angle property of RotateTransform.

  3. Define, set, and start the Storyboard.

At this point, everything seems to be ready. But there’s still another step. In Silverlight, animations are always enclosed in Storyboard objects. A particular Storyboard can have multiple children, so it is very useful for synchronizing multiple animations. But even if you have just one animation running by itself, you still need a Storyboard:

Storyboard storyboard = new Storyboard();
storyboard.Children.Add(anima);
storyboard.Begin();

As soon as you call Begin on the Storyboard object, the clicked button spins around in half a second, giving the user perhaps a little too much visual feedback.


Other -----------------
- Animations : Frame-Based vs. Time-Based
- Raster Graphics : Becoming a Photo Extras Application
- Raster Graphics : Saving to the Picture Library
- Raster Graphics : Images and Tombstoning
- Raster Graphics : Vector Graphics on a Bitmap
- Raster Graphics : The Pixel Bits
- Raster Graphics : WriteableBitmap and UIElement
- Raster Graphics - The Bitmap Class Hierarchy
- Vector Graphics : The Path Markup Syntax
- Vector Graphics : Bézier Curves
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server