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]

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

Comments