OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


Windows Phone 7 Animated Button Press

image

Perhaps it would have been simpler if I just used a button, but I already created my WP7 app with a list that contained non buttons. However, when you select an item it doesn’t move at all. This didn’t quite feel right. The fix turned out to be really simple.

image

In Microsoft Expression Blend, I right-click on the ListBox, and selected Edit Additional Templates > Edit Generated Items > Edit Current.

image

In the Objects and Timeline window, I create a new Storyboard.

image

I call it ButtonPress 

image

I click on the Canvas 

image

Record a Keyframe 

image

A Keyframe is recorded

image

I move the timeline

image

I then set the Transform properties for the Canvas 

image

The change is reflected on the artboard

image

The Keyframes also show on the timeline

image

I move the timeline again

image

I then return the Transform properties for the Canvas back to 0

image

I can now play the animation and it will show on the artboard

image

I then go into the Assets window, and get a ControlStoryboard Action Behavior

image

I drop it on the Canvas

image

I set the Properties for the Behavior to play the ButtonPress Storyboard when the Mouse Button is down on the Canvas (this also fires when a finger is pressed on the Canvas on the Phone)

image

When done, the Return scope button takes me back to normal editing mode

image

When the Canvas element in the ListBox is pressed, the animation will play





Comments are closed.
Showing 2 Comments
Avatar  Michael Washington 7 years ago

@Matt Lacey - Thanks for the tip. I ended up adding it to my existing animation covered in this article rather than replacing my animation. The reason is, that my animation is slower and I feel more "visually compelling". However when added to my animation, it made my animation "snappier".

Avatar  Matt Lacey 7 years ago

Why go to all this trouble? You could have just used the built in TiltEffect <a href="http://msdn.microsoft.com/en-us/library/ff941102(v=vs.92).aspx" rel="nofollow">msdn.microsoft.com/en-us/library/ff941102(v=vs.92).aspx</a>