Introduction

This is my first effort on writing something about Microsoft Surface. I assume by now most of you have already known what Microsoft Surface is. For those who are not sure what really it is, the best way to know about all the stuff regarding Microsoft Surface is by going through this link:

http://www.microsoft.com/surface/about_faqs/faqs.aspx

To develop Microsoft Surface applications you need to have the Microsoft Surface SDK installed on your machine. In this article I’m going to discuss the LibraryBar Control and the LibraryStack Control that ship with Microsoft Surface SDK 1.0 SP 1. Unfortunatly it is not publicly available; to play with the SDK you have to buy a whole unit which seems rather unusual.

LibrayBar Control

The LibraryBar control lists items horizontally, organizes items into several groups and is able to scroll them. It’s actually an ItemsControl that arranges items in a horizontal bar. Let’s delve into an example. If you’ve already installed the Surface SDK, then open VisualStudio and select Surface in the project types list. In the project template select Surface Application(WPF):

Name the application SurfaceControlDemo. In the SurfaceWindow.Xaml add rows by placing the following Xaml inside the <Grid> </Grid> section:

Now add a LibraryBarControl in the first row of the Grid:

We’ll come back to this Xaml page later. Now add a UserControl in your project:

This will be the control that we’ll use as DataTemplate for our LibraryBarControl. Name this control LibraryBarTemplate and insert the following Xaml inside it:

I the above Xaml we didn’t set the Content property of the Label and the Source property of Image. We’ll set them after adding a class. Add a new class to the project and name it ImageThumbnail. Here’s the Class:

The ImageThumbnail class takes three parameters of type string in its constructor. One is for the name of the image file, one for the content of the Label and the third parameter is the value of the GroupName property. All will become clear when you’ll use this class to populate the LibraryBar Control.

Switch to the LibraryBarControlTemplate and set the Content property of the Label and the Source property of Image like this:

In the SurfaceWindow.Xaml.cs page add a private method named LoadItems and place the following code inside it:

In the above code we first created a new instance of the ObeservableCollection of Thumbnail and then called its Add method to add the Thumbnail. The method takes as parameters the filename of the Image, the content for the Label and the value for the GroupName property.

The LibraryBar Control groups items by using properties and methods of the CollectionView and CollectionViewSource classes; and methods of the ICollectionView interface. CollectionViewSource enables XAML code to set the commonly used CollectionView properties, passing these settings to the underlying view. CollectionViewSource has a View property that holds the actual view and a Source property that holds the source collection.

The above line of code helps us in getting the default view and establish grouping. The first line obtains the collection view and the second line establishes grouping.

In the SurfaceWindow1.Xaml add an ItemTemplate for the LibraryBar and use the LibraryBarTemplateControl inside the DataTemplate:

Now switch to the SurfaceWindow1.Xaml page and define a Loaded event handler by changing the Xaml of LibraryBar to something like this:

Right click over the event handler you just defined and select Navigate to Event Handler:

This will add a Loaded event in the code behind:

Call the LoadItems() method from the event handler:

Now we need to open the SurfaceSimulator to run the application on it. Open Surface Simulator and Press F5 to run the app. You’ll be able to see something like this:

Drag the items to see the rest of the groups and images:

We have three groups here: Goalkeeper, Defender and Striker.

LibraryStack Control

LibraryStack displays items in a stack arrangement and enables users to shift the top item among its child elements. It supports drag and drop operations by default. There is also an ItemsControl that enables to display items that are stacked on each other. You can view the individual items by rearranging the order of the stack or by removing items from the stack. Let’s add a LibraryStack in our project just below the LibraryBar we added earlier in the first row of the grid. Paste the following Xaml in the SurfaceWindow1.Xaml page:

Now you’ll see the control like in the screenshot below, in the second row of the Grid:

Add an ItemTemplate for the LibraryStack:

We have defined the ItemTemplate for the LibrayStack and also set the DataTemplate by adding an Image inside it. We will drag Images from the LibraryBar control and drop them on a LibraryStack control. When an item is dropped onto a LibraryStack control, it is added to the items collection of the control. Run the application to see this in action. You’ll see something like this after dropping a couple of items from LibraryBar:

You can see in the above screenshot that I’ve dragged three images from the Goalkeeper group. When an item is dragged out of the LibraryBar control, it is not removed. Instead, it is placed into an inactive state which is represented by making the item dimmer than normal in the LibraryBar control. You can see in the above screenshot that the Goalkeeper group is in inactive state since I’ve dragged the images from it and dropped them into the LibraryStack. By default when an item is dragged from the LibraryBar control and dropped onto another control, it remains inactive in the LibraryBar Control. This behavior can be changed by attaching a PreviewDropEvent event handler to the LibraryStackControl.

Here’s the code to attach the OnPreviewDrop handler:

This will help to drag and drop items back into LibraryBar control:

Conclusion

I hope you’ve enjoyed this demonstration of Surface controls. I’ll write more on Surface controls in the future and I hope the SDK will be publicly available soon, so that everyone can play with it.

About Faisal Khan

Currently working at Vectorform as a Silverlight developer. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with next ge... This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.