How to create swiping gesture list items for Windows Phone 7

A popular style for UI interaction these days is gesture based controls. Windows Phone 7 doesn’t inherently support many of these, but it’s possible to create a facsimile of some of the interactions. Here I will discuss how to handle making a horizontal swipe gesture for list items to provide interactions similar to the Clear application for iPhone (found here). This demo will be using the Windows Phone 7.1.1 SDK which you can download here.

First off, we’ll add a normal ListBox to our view. For the demo, I just bound it to a list of arbitrary objects in my code behind. To create a swiping view, we’ll add a horizontal ScrollViewer to the item template of our ListBox, as show below. I’ll get to the ScrollViewer_Loaded event handler in just a minute.

Notice that in the ScrollViewer we have 3 Grids, one to handle the left panel, one to handle the main content, and one to handle the right content. If you only want to swipe in one direction or the other, you can remove panels as necessary.

The mechanism we will use to determine if someone’s intent is to actually use the swiping action will be to handle horizontal compression, otherwise known as overscroll. This is the state of a ScrollViewer when a user has scrolled to the end and is trying to scroll past the end. To detect compression in ScrollViewers, you need to override the style of the ScrollViewer with the following style

I made mine with a key of ListItemScrollViewer, and as you can see from the first code snippet, the ScrollViewer inside the ListItems are all set with this style.

Now onto the guts of the functionality. First we need to implement the ScrollViewer_Loaded that we declared in the first snippet. That will look as follows

Here is the helper method to find the visual state

We need to invoke the ScrollToHorizontalOffset method to scroll past the left panel and start out in the middle. That can also be accomplished by using the HorizontalOffset property on ScrollViewerOffsetMediator, and there’s a link at the bottom of the post to the source for that. The ScrollStates visual state will tell us whether the ScrollViewer is scrolling or not, which we’ll use to determine if the intent is complete. The HorizontalCompression visual state will tell us when we’ve overscrolled.

Now that we have that, here’s the code for handling both the visual state changes

In this example, I’m using the left swipe to mark something as complete and the right swipe to delete it. It’s pretty straight forward, we just detect the new state of our ScrollView and set markers appropriately, then when the scroll has finished, we act on whatever happened. Do pay special attention that you don’t forget the line at the bottom of the handler for the ScrollStates visual state changing, since you’ll want to know whether you’re currently scrolling or not.

Since we are only using the horizontal scroll bar on the list items, this list style can also be used in conjunction with a “pull to refresh” style panel, like the one found here: http://blogs.msdn.com/b/jasongin/archive/2011/04/13/pull-down-to-refresh-a-wp7-listbox-or-scrollviewer.aspx

I also used the ScrollViewerOffsetMediator from this blog post to be able to animate the ScrollViewer so it has a smooth snap back as opposed to just using ScrollToHorizontalOffset(). The only change is that specific implementation only works vertically, so you’ll want to change everything to work horizontally as well. That version is included in the demo source code.

If you would like to peruse the source code or download it, you can download it or clone the repository from https://github.com/dstafford/SwipeableListDemo.

原贴：http://blogs.burnsidedigital.com/2012/08/how-to-create-swiping-gesture-list-items-for-windows-phone-7/