• 推荐
  • 评论
  • 收藏

多点触摸多点触控(MultiTouch)Microsoft Surface控件之ScatterView

2022-12-22    4257次浏览

   今天,我来介绍一下Microsoft Surface当中的控件,ScatterView控件是Microsoft Surface控件中简单的一个,也是很常用的一个。ScatterView Class的命名空间是Microsoft.Surface.Presentation.Controls,这也是Microsoft Surface大部分控件的所在位置,下来介绍一下ScatterView最简单的使用。

       ScatterView是包含多用户界元素的控件,用户能够在一个固定区域内自由移动、旋转或调整其大小。一个ScatterView控件中每一个控件都包含在一个ScatterViewItem控件 ,如果不添加它会默认加入的,你是可以同时分别移动、 旋转或缩放ScatterViewItem的每个项目的。下面就做一个使用ScatterView控件最简单的例子:

      首先新建Microsoft Surface 2.0的一个项目:

     下来写一个简单的XAML Code:

<s:surfacewindow x:Class="Demo.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
="Demo"
>
<grid>
<s:scatterview HorizontalAlignment="Stretch" Name="scatterView1" VerticalAlignment="Stretch" >
<image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Chrysanthemum.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Desert.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Hydrangeas.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Jellyfish.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Koala.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Lighthouse.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image7" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Penguins.jpg" />
<image Height="150" HorizontalAlignment="Left" Name="image8" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/Demo;component/Images/Tulips.jpg" />
</s:scatterview>
</grid>
</s:surfacewindow>

  好了,我只在ScatterView控件添加了一些示例图片:

     下面我就来运行一下:

     好了,每张照片都可以像真实物体那样随意拖动。ScatterView控件就介绍到这里。

更多内容访问:http://flute.vacau.com/

   转载时须注明本文的详细链接,否则作者将保留追究其法律责任

原文地址:https://www.cnblogs.com/Leo_wl/p/2133130.html