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?

Answer 1

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)

Answer 2

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?

Answer 3

(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

Answer 4

As always, thank you Kraig!

-Jeff

---

Jeff Sanders (MSFT)

Answer 5

Great, thank you.

Answer 6

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!

Answer 7

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

Answer 8

Turns out that this developer was not intelligent enough to catch that haha. Thanks again.