Jun 282012
 
 June 28, 2012  Posted by at 4:37 pm WinRT  Add comments

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 😀

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]

  2 Responses to “Creating a ScaleTransform animation in C# for WinRT/ Metro Apps”

  1. 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

  2. @Andrew Ames

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

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 7 + 9 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)