Home > PixelSense, SURFACE, WPF > Sample Nested ScrollViewer interaction design

Sample Nested ScrollViewer interaction design

In one of my project on a Samsung SUR40 with Microsoft PixelSense, I was facing to an interesting interaction design based on different information groups needed to be logically displayed and accessible in a natural way.

The final idea is illustrated by the picture below:

The visual tree

The most external brown rectangle is a panorama panel which should be able to be scroll in both horizontal directions in order to have freely access to child group control. When the user will reach is interesting group of information represented by the blue rectangle, inside information, in my scenario was to be able to scroll vertically the information. And here comes the interaction logic from where you have nested scrollable control.

In order to reach my goal the layout has been define by the following tree, but you could adjust in according to your need.

Control architecture

The resulting XAML of the main panel :

 

The resulting XAML of the group control :

 

Interaction & design key point:

From the interaction that we have setup and as mentioned earlier, we need to get it smooth, logic and natural. If we look closer to the inside group control, they are nothing much that SurfaceList box control with have been define to handle vertical scroll only in that sample. So in each group control we will be able to naturally scroll for vertical data.

But then how can we scroll the panel horizontally?

The first answer to this question: Easy we just need to scroll the whole panel with the help of the most outside scroll viewer. That is correct. But asking the user to scroll the whole panel by placing is finger at the bottom narrow space of the control, do you thing user will all think of that? Absolutely not.

The best approach and most natural way would be that users initiating a horizontal scroll from any group control should be able to start the main panel to scroll, as illustrate bellow:

Apparently should be possible without any trouble but in fact the scroll does not happen.

As we have seen in our layout, each control group embedded a scrollviewer set for vertical scrolling. Horizontal scroll is disabling, but even if it would be enable it will scroll the group control content only. So why does this not work?

The reason came from the fact that the touch is capture by the scrollwiewer and the handle is set to true, so the event in not propagated up to the visual tree.

Nested scrollViewer behavior comes to the rescue

In order to allows that interaction, we have define a nested scrollviewer behavior class which pass to the parent scrollviewer control interaction which is not dedicated to its child.

By adding this behavior to each group control scrollviewer, the gesture will be passing to the parent scrollviewer which is the main panel and you will have a natural scrolling effect.

You can download the project from msdn sample here.
The sample include MVVM pattern

Advertisements
  1. Paul
    November 21, 2012 at 9:59 am

    I have download and run your sample from msdn and have to say that is a good learning sample for mvvm and nice interaction setup. great simple sample

  2. Serge
    May 17, 2013 at 6:45 am

    Thanks Paul, I aprreciate your feedback

  3. Steve
    May 22, 2013 at 7:15 am

    Since I dsicover your blog, I find out a lot of interresting approach. your sample are easy to understand and to learn. The interaction shown aboc is really great as well. Keep on sharing. Thnaks

  4. Tim
    May 25, 2013 at 11:39 am

    This is a really great sample an great interaction design. Many thanks for sharing this

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: