当前位置：首页 > news >正文

Surface 2.0 SDK在WPF中应用

news 来源：原创 2024/5/17 17:41:36

前提条件：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）运行截图