前提条件: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) 运行截图
本文参考自:李敬然 http://www.cnblogs.com/gnielee/archive/2011/07/14/wpf-surface2sdk-scatterview.html