本篇将为大家介绍如何使用ScatterView 控件实现上述功能。由于触屏技术只在Windows 7 操作系统中支持，所以XP 的用户必须要升级到Windows 7 系统。首先，需要在Windows 7 中安装Surface 2.0 SDK 和Runtime，可到官方页面下载安装程序。安装完成后打开VS2010

本篇将为大家介绍如何使用ScatterView 控件实现上述功能。由于触屏技术只在Windows 7 操作系统中支持，所以XP 的用户必须要升级到Windows 7 系统。首先，需要在Windows 7 中安装Surface 2.0 SDK 和Runtime，可到官方页面下载安装程序。安装完成后打开VS2010 新建一个Surface 2.0 项目。在模板中选择Surface Appliction(WPF)。

我们可以在当前的XAML 代码中添加一个Label 控件。F5 运行后Label 控件是无法进行Manipulating 操作的。

<span><</span><span>s</span><span>:</span><span>SurfaceWindow </span><span>x</span><span>:</span><span>Class</span><span>="ScatterView.SurfaceWindow1"    </span><span>xmlns</span><span>="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    </span><span>xmlns</span><span>:</span><span>x</span><span>="http://schemas.microsoft.com/winfx/2006/xaml"    </span><span>xmlns</span><span>:</span><span>s</span><span>="http://schemas.microsoft.com/surface/2008"    </span><span>Title</span><span>="ScatterView">    <</span><span>Grid</span><span>>        <</span><span>Label </span><span>Content</span><span>="Surface 2.0" </span><span>Foreground</span><span>="Fuchsia" </span><span>FontWeight</span><span>="Bold"/>    </</span><span>Grid</span><span>></</span><span>s</span><span>:</span><span>SurfaceWindow</span><span>></span>

接下来在Grid 中添加一个ScatterView 控件。我们可以将ScatterView 认为是一个容器能够包含其他控件，并且这些控件均可以实现Manipulating 效果。例如，我们在ScatterView 中加入Rectangle、Label、SurfaceTextBox 三个控件。有些朋友可能会问Rectangle 为什么要放在ScatterViewItem 里？其实，所有在ScatterView 里的控件默认都会自动加入到ScatterViewItem，所以如果不需要特别设置可以将ScatterViewItem 控件省略。本例中我为了调整Rectangle 的减速数值就需要手动写出ScatterViewItem 控件，并调整Deceleration 参数。

<span><</span><span>Grid</span><span>>    <</span><span>s</span><span>:</span><span>ScatterView </span><span>x</span><span>:</span><span>Name</span><span>="mainScatterView">        <</span><span>s</span><span>:</span><span>ScatterViewItem </span><span>Decele<div>本文来源gaodai.ma#com搞##代!^码@网3</div>ration</span><span>="50">            <</span><span>Rectangle </span><span>Fill</span><span>="Green" </span><span>Width</span><span>="200" </span><span>Height</span><span>="100"/>        </</span><span>s</span><span>:</span><span>ScatterViewItem</span><span>>                <</span><span>Label </span><span>Content</span><span>="Surface 2.0" </span><span>Foreground</span><span>="Fuchsia" </span><span>FontWeight</span><span>="Bold"/>                <</span><span>s</span><span>:</span><span>SurfaceTextBox </span><span>Width</span><span>="500" </span><span>Height</span><span>="20" </span><span>FontSize</span><span>="20"/>    </</span><span>s</span><span>:</span><span>ScatterView</span><span>></</span><span>Grid</span><span>></span>

完成上面代码后，F5 再运行一次。感觉如何？Manipulating 效果是不是变得很简单了… …

如果有需要可以自动加载控件到ScatterView，下面代码将自动加入一张本机图片到程序中。

<span>private void </span>AddDemoPic(){    <span>string </span>targetPic = <span>@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"</span>;    <span>ScatterViewItem </span>item = <span>new </span><span>ScatterViewItem</span>();    mainScatterView.Items.Add(item);    <span>MediaElement </span>pic = <span>new </span><span>MediaElement</span>();    item.Content = pic;    item.Background = <span>Brushes</span>.Transparent;    <span>if </span>(System.IO.<span>File</span>.Exists(targetPic))    {        pic.Source = <span>new </span><span>Uri</span>(targetPic);    }    <span>else    </span>{        item.Content = <span>"Picture not found"</span>;    }}

至此，本篇关于ScatterView 的介绍就到这里，欢迎大家相互交流。

相关参考

ScatterView Class

作者：李敬然（Gnie）
出处：{GnieTech} （http://www.cnblogs.com/gnielee/）

喜欢 (0)赏

[搞代码]

分享 (0)