Surface Development Part 3: ScatterView

One of the special facets of Surface applications is that they are highly collaborative, because you have a 360-degree view of the application.  To support this amazing experience, a good class to learn is ScatterView, in the namespace Microsoft.Surface.Presentation.Controls.

The ScatterView control quickly enables 360-degree applications. Using data binding as you would in WPF, you can connect a ScatterView to a directory of images and the control will artfully scatter the pictures across the Surface top. It also standardizes the manipulations for resizing, moving, and rotating the pictures. 

Using the Surface SDK, I can create a new project in Visual Studio using the Surface Application (WPF) template.  In the SurfaceWindow1.xaml file that is created by default, I can create a ScatterView in the Grid:

 <s:ScatterView Name="Scatter">
    <s:ScatterView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </s:ScatterView.ItemTemplate>
</s:ScatterView>

We're simply creating a ScatterView and filling the items in the ScatterView using standard databinding, just like we would do in WPF. 

Then in the codebehind, I can hook up the databinding in the SurfaceWindow1 constructor:

 Scatter.ItemsSource = System.IO.Directory.GetFiles(
    @"C:\Users\Public\pictures\Sample Pictures", "*.jpg");

This will grab all of the pictures in the Sample Pictures directory with the .jpg extension (and all of the samples are .jpgs). 

I'm not currently developing this code on a Surface unit, so when I press F5 to run, it invokes the Surface emulator on my laptop, which displays this:

I can use my mouse to move the pictures around on my laptop screen.  On the Surface, I would be able to move, rotate, and resize the pictures with simple intuitive hand gestures, like stretching and flicking, that mimic the way you would interact with a real physical object. 

Pretty cool, huh?  With relatively few lines of code, I could produce a natural interface to interact with photos. 

By default, you can move, rotate, and resize these pictures.  However, there are scenarios when you might not want this behavior.  For example, perhaps you want tokens on a game board to be able to move around, but not be resizable.  There are properties that you can tweak:

• CanScale - Boolean that specifies whether you can resize a photo
• CanRotate - Boolean that specifies whether you can rotate a photo
• DecelerationRate - double that specifies the rate of translational deceleration.  This value is measured in device-independent units per second squared.  By default, the value is set so that when an item is travelling at 1,536 pixels per second (that is, 16 inches per second at 96 DPI), the item takes 1 second to decelerate fully. 
• AngularDecelerationRate - double that specifies the rate of angular deceleration.  This value is measured in degrees per second squared.  By default, the value is set so that when an item is rotating at 270 degrees per second, the item takes 1 second to decelerate fully.

Finally, Robert Levy also did a video showing the ScatterView control here.  

Comments

• Anonymous
  May 20, 2009
  PingBack from http://www.anith.com/?p=39737

• Anonymous
  May 22, 2009
  Hopefully you've learned a little about Surface development this week!  I didn't originally intend

• Anonymous
  May 29, 2009
  I’m a huge Microsoft Surface Fan. Jennifer Marsman just completed a blog series on developing for the Surface complete with embedded videos. Click on the links to check them out. Surface Development Part 1: What is the Microsoft Surface? Surface Development

• Anonymous
  May 29, 2009
  For all you Surface Fans, my colleague Jennifer Marsman has written a series of blog posts about developing

• Anonymous
  May 31, 2009
  Thank you for submitting this cool story - Trackback from DotNetShoutout

• Anonymous
  June 02, 2009
  For all you Surface Fans, my colleague Jennifer Marsman has written a series of blog posts about developing