Iris Classon
Iris Classon - In Love with Code

Creating a ScaleTransform animation in C# for WinRT/ Metro Apps

I thought this one would be easy as I’ve done Silverlight, WP7 and WPF apps before, but actually took a while and quite a lot of frustration. AS with most WinRT stuff, you can’t just copy and paste XAML and code and expect it to work.I needed this animation to indicate that an item is clickable by providing visual feedback similar to the one provided by the PointerUpThemeAnimation and PointerDownThemeAnimation provided by the Animations library. I had to wrap my clickable items in buttons to meet the ‘also Keyboard only accessible’ requirement, but the buttons Click-event hindered the PointerReleased event so the PointerUpThemeAnimation wouldn’t run. The result was items that would shrink in size when pointer was pressed, but they would not return to their normal state/size when the pointer was released.

Look, this might not be the best way to go about it, but at the moment there isnt so much information, if you google PointerDownThemeAnimation you will only get ten hits) So, as always, please let me know (email or twitter) if you can clean up my code, provide feedback, information or some magical code :D

Maybe I’ll make it in top ten?

Method that does the animation:
[sourcecode language=“csharp”]
//
public static class AnimationHelper
{
public static Storyboard ClickableItem(UIElement obj)
{
obj.RenderTransform = new CompositeTransform();

        var story = new Storyboard();  

        var xAnim = new DoubleAnimation();  
        var yAnim = new DoubleAnimation();  

        xAnim.AutoReverse = true;  
        yAnim.AutoReverse = true;  

        xAnim.Duration = TimeSpan.FromMilliseconds(100);  
        yAnim.Duration = TimeSpan.FromMilliseconds(100);  

        xAnim.To = 0.98;  
        yAnim.To = 0.98;  

        story.Children.Add(xAnim);  
        story.Children.Add(yAnim);  

        Storyboard.SetTarget(xAnim, obj);  
        Storyboard.SetTarget(yAnim, obj);  

        Storyboard.SetTargetProperty(xAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)");  
        Storyboard.SetTargetProperty(yAnim, "(UIElement.RenderTransform).(CompositeTransform.ScaleY)");  

        return story;  
    }  
}  

//
[/sourcecode]

Calling the method
[sourcecode language=“csharp”]
//
private void ClickableItem_PointerPressed(object sender, PointerRoutedEventArgs e)
{
var pnl = (StackPanel)sender;
var btn = (Button) pnl.Parent;
AnimationHelper.ClickableItem(btn).Begin();
}
//
[/sourcecode]

Comments

Leave a comment below, or by email.
Andrew Ames
9/18/2012 10:47:45 AM
Great article cheers, could you PLEASE tell me how I would amend your example to change the X or Y position of an element instead of transforming the scale? I've been looking for ages and I just come across Silverlight and WPF examples which don't seem to work in WinRT

I think my main issue here is I don't know what the string value should be in the SetTargetPropery section?

Thank you 
Rudy Z
9/23/2012 2:43:43 AM
@Andrew Ames

Can't paste code in the comment... Check out my comment: 
http://pastebin.com/Wsw2wZJm 


Last modified on 2012-06-28

comments powered by Disqus