Microsoft Surface控件之ScatterView

       今天，我来介绍一下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/

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