Microsoft Surface控件之ScatterView

2011/8/9 17:49:14中文系列评论(0)浏览(4426)

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