Surface 2.0 SDK在WPF中应用

前提条件：Window7操作系统

好处：

没有使用Surface2.0之前，无论是简单的拖拽，还是复杂的旋转、缩放效果（下文简称Manipulating）都需要开发者逐字逐句的编写出来。​​Surface 2.0 SDK 的发布​​可以使这些工作更加简单，我们甚至不需要对这些效果写任何代码。

（1）下载安装Surface 2.0 SDK 和Runtime，​​下载地址​​

（2）安装成功后，在VS2010项目模板中会出现如下模板

（3）下面是做的一个例子，代码如下

<s:SurfaceWindow x:Class="SurfaceDemo.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="SurfaceDemo"

>

<Grid >

<s:ScatterView x:Name="mainScatterView">

<Label Content="Surface 2.0" Foreground="Fuchsia" FontWeight="Bold"/>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image1" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/027.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image2" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/033.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image3" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/028.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image4" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/016.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image5" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/1.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image6" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/2.jpg" />

</s:ScatterViewItem>

<s:ScatterViewItem Width="300" Height="400">

<Image Height="400" HorizontalAlignment="Left" Name="image7" Stretch="Fill"  Width="300" Source="/SurfaceDemo;component/images/3.jpg" />

</s:ScatterViewItem>

<s:SurfaceTextBox Width="500" Height="20" FontSize="20"/>

</s:ScatterView>

</Grid>

</s:SurfaceWindow>

注意点：ScatterView像一个空间容器，放在里面的控件都可以实现拖拽，缩放等操作，使用ScatterViewItem会更好些，作为ScatterView的每个想，也可以省略的，就先该列中Label就没有使用ScatterViewItem，使用ScatterViewItem可以控制拖放元素的长宽，不设置With,Height，会有一个默认的Width和Height，会影响相片的呈现效果

（4） 运行截图

​​​​