Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Smooth…Springy…Scrunchy – WP7 List behavior

DZone's Guide to

Smooth…Springy…Scrunchy – WP7 List behavior

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}