Surface 2.0 SDK Released

The long awaited Surface 2.0 SDK has been just released. to get started go to the new Surface Developer Center and download the SDK.

Once downloaded and installed, start VS2010, you will find the Surface 2.0 project templates available

Let’s create a sample application, I will create a simple twitter client (hopefully before scottgu creates it) let’s name it TwittSurf

Once we created the project you will have the same project structure as you have in the Surface 1.0 version, let’s create our UI

<s:SurfaceWindow x:Class="TwittSurf.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="TwittSurf"
    Loaded="SurfaceWindow_Loaded" >
    <Grid>
        <s:ScatterView>
               <s:ScatterViewItem Width="400" Height="500" CanMove="True" CanScale="True" CanRotate="True" >
                  <s:SurfaceListBox x:Name="tweetsList" >
                    <s:SurfaceListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="20" >
                                <Image HorizontalAlignment="Left" Source="{Binding ProfileImageLocation}"/>
                                <TextBlock Text="{Binding FromUserScreenName}"/>
                                <TextBlock Text="{Binding Text}"/>
                            </StackPanel>
                        </DataTemplate>
                    </s:SurfaceListBox.ItemTemplate>
                </s:SurfaceListBox>

            </s:ScatterViewItem>
        </s:ScatterView>
    </Grid>
</s:SurfaceWindow>

We will add a ScatterView control, inside it we will add a SurfaceListBox and configure its ItemDataTemplate.

In the Loaded event of the Window we will write our code, I will use the Twitterizer .net Library (download the lite version) to save some time, the code below will submit a query to twitter and display the result in the list box

private void SurfaceWindow_Loaded(object sender, RoutedEventArgs e)
        {
            TwitterResponse<TwitterSearchResultCollection> searchResult = TwitterSearch.Search("mosallem", null);
            tweetsList.ItemsSource = searchResult.ResponseObject;
        }

Before you run the application Open the Input Simulator (Start Menu-> Programs-> Microsoft Surface 2.0 SDK-> Tools) this tool is used to simulate the different types of inputs (finger, blob, tag).

Run the application, the list will appear with the search results, select the finger input from the input simulator, press and hold the left mouse button to simulate a finger contact on the Surface.

You can drag/rotate the list box around, to scale the list you need two fingers, you can do this by pressing/holding the left mouse button on one corner of the list, then pressing the right mouse button to keep the finger contact in this location, then you can add another finger contact on another corner by clicking the left mouse button and when you move the second finger the list will scale.

I believe you can also simulate more than one contact by connecting additional mice, but unfortunately that didn’t work for me.

You can download the code from here

I’m very excited to have the SDK, Definitely I’m be spending more time playing with it.