I'm a geekette who enjoys playing with new technology for software developers. I work as a Developer Evangelist for Microsoft. My current focus is on Windows Store development for Windows 8.
Let's Meet!
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:
Finally, Robert Levy also did a video showing the ScatterView control here.