Surface 入门教程 1 (这一篇很简单，适合第一次接触Surface SDK的朋友)

前段时间都在忙项目和备课，帮导师准备了几篇Surface的小教程，难度虽然不大，但也聊胜于无 ;-)

This tutorial will help you build a touch-based hello world application.
Notice: Before starting this tutorial, make sure you have already installed those IDE and SDK list below:

• Microsoft Visual Studio 2010
• Microsoft Expression Blend 4
• Microsoft Surface 2.0 SDK

Part 1: Create a new project with Visual Studio
Open Visual Studio 2010 --> File --> New Project --> Click on the V2.0 of Surface from installed templates on the left side, and then choose Surface Application (WPF).
After typing the name and location of your first project, let’s start our trip with Surface SDK.
Once the project has been create, you will find these files in your project:

The Tutorial 1 is the name of this project, the References is a list of all the references have been assembled to this project, the Resources is a folder where we can add image or anything we may use in our project, the App.xaml declares the application starting point for this project, and the SurfaceWindow1.xaml is the main window we will design in this project.

In the XAML code area of SurfaceWindow1.xaml file, the xmlns parts are used to define the namespaces of this project.

Now we start coding our first hello world program.

1. Divide the window to two separate rows, the first one will be the container of the label and the second one will hold the button.

　　Modify the Grid tags as below:　　　　

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
//position 1
</Grid>        

2. Add SurfaceButton to the second row of the grid.

　　Add the code below to the position 1 shows in previous code snippet:

<s:SurfaceButton Grid.Row="1" 
    Content="Hello World!"
    Background="AliceBlue"
    VerticalContentAlignment="Center"
    HorizontalContentAlignment="Center"/>

The prefix s before SurfaceButton means the namespace of the surface SDK, which already has been defined at the top:

mlns:s=http://schemas.microsoft.com/surface/2008.

The Grid.Row=”1” means this button is placed in second row, since the index start from zero.
The content property is used to define the label shown on the button.
Because we want the content to be showed in the center of the button, so we set the content alignment to “center” for both vertical and horizontal.

3. Add the hello world label to the first row of the grid.

　　Add the code below to position 1 as well, right after the button.

<Label Grid.Row="0"
    Content="Hello World!!This is my first touch application."                 
    Foreground="Blue"
    HorizontalContentAlignment="Center"/>

The foreground property is used to define the colour of the text.
After these three steps have been done, click the Start Debugging or press F5 to compile, you will be able to see the interface we have already created. But the button now is not working because we haven’t defined the click event.

4. Add click event for the SurfaceButton.

　　Modify the SurfaceButton we have created before as:

<s:SurfaceButton Grid.Row="1"
    Content="Hello World!"
    Background="AliceBlue"
    VerticalContentAlignment="Center"     
    HorizontalContentAlignment="Center"
    Click="SurfaceButton_Click"/>

Another way to add event to a control (i.e. button), is first choosing the control by clicking the code anywhere within the control, click the Property menu on the right side of Visual Studio (if there is no this menu, click View --> Properties Window to active it first), choosing the tab of events, double click on the blank area after the label of click, A new method for this event will automatically been created in the SurfaceWindow1.xaml.cs file.

5. Implement the click event

　　For this project, we want the label initially not shown in the window and can be displayed/hidden by click the button.
　　Modify the label a little bit, add the name and visibility properties to it:

<Label Name="helloLabel"
    Grid.Row="0"
    Content="Hello World!!This is my first touch application."     
    Foreground="Blue"
    HorizontalContentAlignment="Center"
    Visibility="Collapsed"/>

The collapsed means it does not render the control and does not reserve the whitespace. (A little bit different from Hidden, which means hides the control, but reserves the space it occupies in the layout)
Then switch to the SurfaceWindow1.xmal.cs file and modify/add the click event as below:

private void SurfaceButton_Click(object sender, RoutedEventArgs e)
{
    if (helloLabel.Visibility == System.Windows.Visibility.Collapsed)
    {
        helloLabel.Visibility = System.Windows.Visibility.Visible;
    }
    else
    {
        helloLabel.Visibility = System.Windows.Visibility.Collapsed;
    }
}        

Compile and it will work as we intend. Since this is a touch-based application tutorial, so gesture is quite important. Now I will introduce a convenient way to implement drag, rotate and scale gestures.

6. Add gestures control to the label.
　　Modify the previous code for the label as below:

<s:ScatterView Grid.Row="0">
    <s:ScatterViewItem Name="helloLabel"
        Background="White"
        Width="400"
        Visibility="Collapsed">
        <Label
        Content="Hello World!!This is my first touch application."         
        Foreground="Blue"
        HorizontalContentAlignment="Center"/>
    </s:ScatterViewItem>
</s:ScatterView>                    

The ScatterView is an awesome control of Surface SDK, it enable all the contained items being drag, rotate and scale without complicated implementation.
We removed the name and visibility property of the label and add it to the ScatterViewItem is because we want to hidden the whole object rather than the content inside.
Now compile again, and enjoy with your first multi-touch application ;-)

Part 2: Design your project with Expression Blend 4
In this session, I will introduce how to design the interface and make your application looks cooler and more attractive.
Right click the solution file of the project, and choose opening with Microsoft Expression Blend 4. It looks a bit like Visual Studio, both of them have the design area in the centre, while Blend 4 focus more on design rather than code behind. Actually only use Blend 4 even can make some amazing touch-based application without writing C# code, which I will introduce in after tutorial.
In the Objects and Timeline window, you can find the hierarchy of your project:

Our first goal is to make the button looks different, for example, like the ones in iOS. That will need to modify the style of the button. Right click the button control in Objects and Timeline window, and choose Edit Template --> Edit a copy --> enter name for iOSButtonStyle.
Now we can see the contents in Objects and Timeline window has changed as below:

This is the template of a basic button, which is constructed by two rectangles and one content presenter. The ButtonBody rectangle describes the shape and colours of the button, while the PressOverlay describes the same thing when the button is pressed.

1. Choose the ButtonBody rectangle and modify its corner radius.

At the top-left corner of the rectangle, drag and move one of the control stick could change its corner radius. Alternatively, you can also change the radius property in the Appearance window on the right side.

2. Set colours for the button.

Modify the colours in the Brushes window which is easier to make in Blend 4 than in Visual Studio. In this case, the Fill property has been bind to another value, so there is a small yellow block after it. We have to rest the binding before we change it. Click the yellow block --> Choose Reset. Now we will be able to change it to any colour you want.
Here let’s use gradient colour for the ButtonBody for our iOS style button. Choose Gradient Brush, now you can see your button turn to a new look which has black in the top and smoothly changing to white at bottom.

In the gradient control bar shows above, the two colour stops stand for the value of the colours changing interval. Each of them can be modified by choosing it and click in the colour area to pick up new colour.
In this case, we need the top of the button be brighter than the bottom, so changing the left stop to white and right stop to grey.

After that, click on about one quarter on the gradient bar will give you a new stop. Drag the new stop to the middle of the bar, a slight boundary will be created in the centre of the button.

At last, click Return to Scope[SurfaceWindow] in the Objects and TimeLine window, change the background colour of grid to black, then press F5 to compile and hope you like the new style of the button. Feel free to design it in your own way to show your creativity ;-)