Over a million developers have joined DZone.

Smooth…Springy…Scrunchy – WP7 List behavior

· Mobile Zone

Anyone that has an iPhone has undoubtedly been delighted when scrolling through lists for the first time. Aside from the kinetic scrolling, the resistance and elasticity characteristics make for a really nice fluid user experience. These effects are partly based on basic physics principles and partly faked by the animation framework of the phone.

If you”re like me, you”ve probably driven yourself mad by pulling, pushing and flicking your phone to death trying figure out how to re-create these effects.

And if the inertia, elasticity, and resistance weren”t enough WP7 has introduced a new subtly that takes the delight one step further. The scrunch effect. (See video below) Not only does the vertical offset of the list change when you scroll past the end of it, the items within the list box also scale in size. This, for lack of a better label, creates a “scrunch” effect…where all the items appear to get squished together as you pull down the list.

Unfortunately, some of these subtleties don”t ship by default with the windows phone controls. So with some help from my college kmarshall we cranked out some of the interactions and packaged them up in a behavior.

Building it.

By default, the lists in the WP7 sdk have inertia built in so we don”t have to worry about that. However, to get the elasticity effect when scrolling past the end of the list we had to do some digging. In general,we transform the list”s Y-axis Position at a third the rate of the manipulation delta. Then on the manipulation completed event we just animate the list back to its original Y position.

clip_image002

Then to recreate the “scrunch” effect we scale each listbox item at a ratio that is proportionate to the cumulative manipulation on the Y-axis. The key to this effect is making sure the RenderTransformFromOrigin of the listbox item is at (.5,1). This will ensure that the item will scale from the bottom and not from the center.

clip_image004

Putting this all together you get this:

DOWNLOAD THE CODE:  HERE

 NOTE: For added fun, kmarshall insisted this behavior work with virtualized lists…so it does.

UPDATE: I know I promised code for my WP7 jump list. Well…we are building the “real deal” for a project, so when I do release the code, it will be close to production quality. It will be worth the wait…trust me.

Cheers,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

Topics:

Published at DZone with permission of Erik Klimczak, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}