Answered by:
How can I mimic depress behaviour of a win-listview item when it is clicked?

Question
-
I would like to create my own simple bindable template instead of using the win-listview control in some cases but want to achieve the same depressed effect for the items when they are clicked. When using the win-listview, when an item is clicked, the item scales smaller in size when clicked. I can see that an additional div is injected into the DOM when a win-container is clicked.
Is there some documentation available regarding Metro style behaviours like this?
Monday, July 23, 2012 3:03 PM
Answers
-
(To correct Jeff...sorry Jeff)
You should apply the WinJS.UI.Animations.pointerDown animation on MSPointerDown, and WinJS.UI.Animations.pointerUp on MSPointerUp. All the animations are documented here: http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx. Also see the HTML Animation Library sample for a demonstration of using the library.
You can look in WinJS itself for how it's implemented, but that's not a detail you need to worry about. Just apply the animation within the events and you have the Win8 look and feel all the way.
.Kraig
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, July 23, 2012 4:01 PM
- Marked as answer by CES4848 Monday, July 23, 2012 6:54 PM
Monday, July 23, 2012 3:53 PM
All replies
-
No there is not. This however is just a basic transform on the object. You would need to trap the pointer down and mimic the behavior. There is no documentation on this, however it is simply basic CSS transformation.
-Jeff
Jeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, July 23, 2012 3:11 PM
Monday, July 23, 2012 3:11 PMModerator -
Thanks for that quick reply.
To clarify, there is nothing documenting specifications such as the percentage that a given clickable element should shrink while depressed?
Monday, July 23, 2012 3:17 PM -
(To correct Jeff...sorry Jeff)
You should apply the WinJS.UI.Animations.pointerDown animation on MSPointerDown, and WinJS.UI.Animations.pointerUp on MSPointerUp. All the animations are documented here: http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx. Also see the HTML Animation Library sample for a demonstration of using the library.
You can look in WinJS itself for how it's implemented, but that's not a detail you need to worry about. Just apply the animation within the events and you have the Win8 look and feel all the way.
.Kraig
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, July 23, 2012 4:01 PM
- Marked as answer by CES4848 Monday, July 23, 2012 6:54 PM
Monday, July 23, 2012 3:53 PM -
As always, thank you Kraig!
-Jeff
Jeff Sanders (MSFT)
Monday, July 23, 2012 4:01 PMModerator -
Great, thank you.Monday, July 23, 2012 5:07 PM
-
I am getting a 404 on the link http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx.
Found the WinJS.UI.Animation namespace documentation here.
Thank you both!
- Edited by CES4848 Monday, July 23, 2012 5:16 PM
Monday, July 23, 2012 5:11 PM -
Oh, the link has a period at the end...the forum editor here isn't intelligent enough to not append characters to hyperlinks. Here's the right link without the trailing .:
http://msdn.microsoft.com/en-us/library/windows/apps/br229780.aspx
Monday, July 23, 2012 5:40 PM -
Turns out that this developer was not intelligent enough to catch that haha. Thanks again.Monday, July 23, 2012 6:54 PM