Developing Microsoft Surface Applications

Continued from: Microsoft Surface Development Environment

Let us create a simple Surface Application to learn the development process.

Launch Visual Studio 2008 and create a new Surface project (File > New > Project > Visual C# > Surface > v1.0 > Surface Application (WPF))
The template will create all required files. Open the SurfaceWindow1.xaml file and following controls to it:

<DockPanel>
<s:SurfaceButton DockPanel.Dock="Bottom"
x:Name="uxButton"
Content="Click Me"
Height="50"
Width="100"
Click="uxButton_Click" />
<s:ScatterView x:Name="uxScatterView"
Background="LemonChiffon">
</s:ScatterView>
</DockPanel>

We have just added Surface version of the button and a new Surface specific control called ScatterView. The ScatterView control is the control that you should use when you have one or more UI elements that you want users to be able to move, rotate, or resize freely within a fixed area. It supports all these features without writing any extra code.

Now let us add the code to create ellipses and add them as ScatterView items in the button’s click handler:

private void uxButton_Click(object sender, RoutedEventArgs e)
{
Ellipse ell = new Ellipse();
ell.Height = 50;
ell.Width = 50;
ell.Fill = new SolidColorBrush(Colors.Red);

ScatterViewItem item = new ScatterViewItem();
item.Content = ell;
uxScatterView.Items.Add(item);
}

Now launch the Surface Simulator and run this application. The application will appear within the simulator. Keep clicking on the buttons to add items to the scatter view.


Note that the items get added to random positions. You can move and rotate the items with one finger. You can hold one finger to the edge of an item and use another finger to drag and then resize the item. Notice that the active item has a shadow effect and the shadow changes smoothly according to the items position. You can push the item to an edge with some speed and it will bounce back with smooth physics behavior.

All the Surface controls have contact events and this can be used to find the location of contact. Here is an example:

private void uxButton_ContactDown(object sender, ContactEventArgs e)
{
Point contactPosition = e.Contact.GetPosition(this);
}

For non-Surface controls, the contacts events can be attached like this:

<Canvas s:Contacts.ContactDown="Canvas_ContactDown" />

Using the combination of standard WPF controls and Surface special controls, it is possible to create multi-touch applications for Surface very easily.

Here are the list of Surface version of the standard controls:

• SurfaceWindow
• SurfaceButton
• SurfaceInkCanvas
• SurfaceSlider
• SurfaceScrollViewer
• SurfaceListBox
• SurfaceTextBox
• SurfacePasswordBox
• SurfaceMenu
• SurfaceContextMenu
• SurfaceCheckBox
• SurfaceRadioButton

And here is the list of Special Surface controls:

• ScatterView
• ScatterViewItem
• TagVisualizer
• TagVisualization

TagVisualizer helps in the use of tagged objects and can be used to show a visual when a tag is placed on the Surface unit.

Continued to Microsoft Surface Tagged Objects and Tag Visualizations