博客园_{GnieTech}

免费Ebook 分享《Silverlight for Windows Phone Toolkit in Depth》

2011-10-19T12:53:00Z

刚下了一本由Boryana Miloshevska 编写的《Silverlight for Windows Phone Toolkit in Depth》，提到Windows Phone Toolkit 大家应该不陌生，其中包含了很多Windows Phone 开发需要的组件。在这本书中全面细致的对Windows Phone Toolkit 进行了介绍，而且是全彩色图文并茂。

书中包括了Windows Phone Toolkit 中所有控件，不论你是Windows Phone 开发的菜鸟还是老鸟，这本书的确不容错过！最新的Windows Phone Toolkit 全面支持Windows Phone 7.1 SDK（"Mango"）的开发。

o AutoCompleteBox
o ContextMenu
o DatePicker
o DateTimeConverters
o ExpanderView
o Gestures
o HeaderedItemsControl
o HubTile
o ListPicker
o LocalizedResources
o LockablePivot
o LoopingSelector
o LongListSelector
o MultiselectList
o Page Transitions
o PerformanceProgressbar
o PhoneTextBox
o WrapPanel
o TiltEffect
o TimePicker
o ToggleSwitch

作者同时也说明了将本书作为免费提供的原因：

Point1. First of all, because “Silverlight for Windows Phone Toolkit” is a FREE library with great controls, provided by Microsoft.
Point2. There is a lot of paid content on the web regarding Windows Phone development and quite a few FREE one.
This was the reason why I founded www.windowsphonegeek.com about a year ago: to create a FREE community with high quality and up to date windows phone
development content. So having in mind that there is no documentation for the toolkit or any books available, I decided to write and share a FREE one.

下载地址

http://www.windowsphonegeek.com/WPToolkitBook

本文链接

Windows Phone SDK 7.1 发布

2011-09-29T14:47:00Z

“Mango”发布后，相应的Windows Phone SDK 7.1 也正式发布了，利用它能够开发支持Windows Phone 7.0 或Windows Phone 7.5 两种系统平台的手机设备。

开发包内容

· Microsoft Visual Studio 2010 Express for Windows Phone

· Windows Phone Emulator

· Windows Phone SDK 7.1 Assemblies

· Silverlight 4 SDK and DRT

· Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0

· Microsoft Expression Blend SDK for Windows Phone 7

· Microsoft Expression Blend SDK for Windows Phone OS 7.1

· WCF Data Services Client for Window Phone

· Microsoft Advertising SDK for Windows Phone

系统要求

· Supported Operating Systems: Windows 7, Windows Vista

· Windows® Vista® (x86 and x64) with Service Pack 2 – all editions except Starter Edition

· Windows 7 (x86 and x64) – all editions except Starter Edition

· Installation requires 4 GB of free disk space on the system drive.

· 3 GB RAM

· Windows Phone Emulator requires a DirectX 10 or above capable graphics card with a WDDM 1.1 driver

Windows Phone SDK 7.1 也全面支持Visual Studio 2010 SP1，如果您先前安装过Windows Phone SDK 7.1 Beta 或RC 版本的开发包，请先将其卸载后再安装正式版本。另，目前页面也提供了ISO 文件格式下载。进入下载页面

Windows Phone Developer 们赶快下载吧～～

本文链接

“Mango”来了！！

2011-09-29T14:21:00Z

就在美国当地时间9月27日，期待已久的Mango 系统终于发布了，比先前网络上流传的10月中旬提早了近2周时间。28日一早将手机连上电脑，便看到Mango 更新提示。按奈不住激动的心情要赶紧吃到“Mango”。本人手机型号是HD7，之前升级过Windows Phone Developer 7712 Beta 版。

提示可用更新：Update for Windows Phone 7 for ISV beta (7720)

开始下载更新程序进行更新：

系统升级到Mango 后，便受到Mango ISV beta Bundle: Cleanup 更新。这个就是升级过7712 Beta 版后的清理更新，免去回滚到NoDo 之苦。赞！

继续更新Cleanup：

更新完Cleanup 后，紧接着又收到第三个更新：HTC Update for Windows Phone，这个是HTC 根据Mango 系统发布的手机硬件更新。

至此，三个更新完成后终于见到期待已久的“Mango”了。感觉和7712 变化不大。其一，原来“中国移动”的字样变成了英文“CHINA MOBILE”，文字终于和谐了。其二，原来HTC 的程序Attentive Phone，直接整合到Mango 的Settings 中了。害得我升级Attentive Phone 后还找了半天程序在哪。再有就是一些App 也相继需要更新。总体来说没有什么太多惊喜，至少是正式版本了！“Mango”还要慢慢品尝。

本文链接

WPF 与Surface 2.0 SDK 亲密接触–LibraryContainer 篇

2011-08-26T06:23:00Z

最近比较懒惰一直都没写东西，再不写笔里的墨水就快干了。看过前面关于LibraryStack 和LibraryBar 的介绍后，大家可能已经对Library 控件系列有了进一步了解，本篇将继续介绍LibraryContainer，它其实就是LibraryStack、LibrayBar 的集合体。

首先，我们仍然需要创建一个DataTemplate 用来控制LibraryStack、LibrayBar 的显示样式。然后新建一个LibraryContainer，在其中增加StackView 和BarView 两种浏览模式。

<s:SurfaceWindow.Resources>
    <DataTemplate x:Key="LibraryBarItemTemplate">
        <Grid >
            <Image Source="{Binding Bitmap}"/>
            <Label FontSize="14" Content="{Binding Label}"/>
        </Grid>
    </DataTemplate>
</s:SurfaceWindow.Resources>

<Grid>
    <s:LibraryContainer x:Name="mlibraryContainer">
        <s:LibraryContainer.StackView>
            <s:StackView ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
        </s:LibraryContainer.StackView>

        <s:LibraryContainer.BarView>
            <s:BarView ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
        </s:LibraryContainer.BarView>
    </s:LibraryContainer>
</Grid>

与上一篇LibraryBar 一样我们继续使用分组的浏览模式，按GroupName 进行分组操作，PhotoAlbum 类请参考这里。

ObservableCollection<PhotoAlbum> items = new ObservableCollection<PhotoAlbum>();
string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";

items.Add(new PhotoAlbum(imagesPath + "Hydrangeas.jpg", "Hydrangeas", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Lighthouse.jpg", "Lighthouse", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Tulips.jpg", "Tulips", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Jellyfish.jpg", "Jellyfish", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Koala.jpg", "Koala", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Penguins.jpg", "Penguins", "Animal"));

mlibraryContainer.ItemsSource = items;
ICollectionView defaultView = CollectionViewSource.GetDefaultView(items);
defaultView.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));

运行效果：

按分组选择：

点击下方按钮切换为BarView 模式：

本文链接

WPF 与Surface 2.0 SDK 亲密接触–LibraryBar 篇

2011-08-07T05:58:00Z

LibraryBar 介绍

与LibraryStack 类似LibraryBar 也属于ItemsControl，在LibraryBar 里的组件会以水平平铺方式展示，并且也可以对其中的组件进行按组分类。同样LibraryBar 也是默认支持拖拽操作。

下面的例子将通过LibraryBar 展示一组Sample 图片。首先，仍然可以使用DataTemplate 作为LibraryBar 的样式模板用来绑定图片资源。接下来在Grid 中添加LibraryBar 控件，并设置好ItemTemplate 数据模板。我们可以通过修改Rows 参数调整LibraryBar 中组件显示的行数。

<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="LibraryBar"
>
    <s:SurfaceWindow.Resources>
        <DataTemplate x:Key="LibraryBarItemTemplate">
            <Image Source="{Binding}"/>
        </DataTemplate>
    </s:SurfaceWindow.Resources>

    <Grid>
        <s:LibraryBar x:Name="mLibraryBar" Rows="3"
                      ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
    </Grid>
</s:SurfaceWindow>

为LiraryBar 添加图片数据源。注意，同样不能将图片string[] 数组直接赋给LiraryBar，需要借助ObservableCollection。

string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";
try
{
    string[] files = System.IO.Directory.GetFiles(imagesPath, "*.jpg");
    ObservableCollection<string> items = new ObservableCollection<string>(files);
    mLibraryBar.ItemsSource = items;
}
catch (System.IO.DirectoryNotFoundException)
{
    // Error info.
}

默认两行模式：

三行模式：

LibraryBar 分组

接下来我们将图片进行分组操作，先增加一个PhotoAlbum 类，其中包含图片的路径、标签、组名信息。

class PhotoAlbum
{
    private string label;
    private string fileName;
    private string groupName;
    private BitmapImage bitmap;

    public PhotoAlbum(string fileName, string label, string groupName)
    {
        this.fileName = fileName;
        this.label = label;
        this.groupName = groupName;
        this.bitmap = new BitmapImage(new Uri(fileName, UriKind.Absolute));
    }

    public string Label
    {
        get { return label; }
    }

    public string FileName
    {
        get { return fileName; }
    }


    public string GroupName
    {
        get { return groupName; }
    }

    public BitmapSource Bitmap
    {
        get { return bitmap; }
    }
}

对DataTemplate 稍作修改，添加图片标签<Label>。

<s:SurfaceWindow.Resources>
    <DataTemplate x:Key="LibraryBarItemTemplate">
        <Grid>
            <Image Source="{Binding Bitmap}"/>
            <Label FontSize="14" Content="{Binding Label}"/>
        </Grid>
    </DataTemplate>
</s:SurfaceWindow.Resources>

<Grid>
    <s:LibraryBar x:Name="mLibraryBar" Rows="2"
                  ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
</Grid>

依据GroupName 作为分组的方式，为GroupDescriptions 默认的集合浏览方式添加PropertyGroupDescription 对象，并赋给ItemsSource 属性。

ObservableCollection<PhotoAlbum> items = new ObservableCollection<PhotoAlbum>();
string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";

items.Add(new PhotoAlbum(imagesPath + "Hydrangeas.jpg", "Hydrangeas", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Lighthouse.jpg", "Lighthouse", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Tulips.jpg", "Tulips", "Nature"));
items.Add(new PhotoAlbum(imagesPath + "Jellyfish.jpg", "Jellyfish", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Koala.jpg", "Koala", "Animal"));
items.Add(new PhotoAlbum(imagesPath + "Penguins.jpg", "Penguins", "Animal"));

mLibraryBar.ItemsSource = items;
ICollectionView defaultView = CollectionViewSource.GetDefaultView(items);
defaultView.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));

LibraryBar 拖拽

从上面的示例中可以发现，我们无法将图片从LibraryBar 中拖拽出来，当拖拽操作结束后图片会自动返回到LibraryBar。接下来将实现把图片拖拽到ScatterView 控件。

首先，对XAML 控件进行下修改，将LibraryBar 放入ScatterView 控件。这里需要将ScatterView 的AllwoDrop 属性设为True，背景也要填充颜色，可设置为Transparent 透明，这样才能保证LibraryBar 中的组件可以拖拽到ScatterView 中。

<Grid>
    <s:ScatterView x:Name="scatterView" s:SurfaceDragDrop.Drop="scatterView_Drop"
                   AllowDrop="True" Background="Transparent">
        <s:ScatterViewItem Width="500" Height="300">
            <s:LibraryBar x:Name="mLibraryBar" Rows="2" 
                          ItemTemplate="{StaticResource LibraryBarItemTemplate}"/>
        </s:ScatterViewItem>
    </s:ScatterView>
</Grid>

其次，为ScatterView 添加SurfaceDragDrop.Drop 事件用于处理拖拽的操作。在事件触发时，新建一个ScatterViewItem（newItem）用于装载被拖动的图片组件。将e.Cursor.Data 转化为PhotoAlbum，借助FileName 属性新建MediaElement。将MediaElement（mediaItem）赋给newItem.Content，并通过GetPosition 获取到拖拽动作的位置作为newItem 在ScatterView 中的显示位置。

private void scatterView_Drop(object sender, SurfaceDragDropEventArgs e)
{
    PhotoAlbum data = e.Cursor.Data as PhotoAlbum;
    
    ScatterViewItem newItem = new ScatterViewItem();
    MediaElement mediaItem = new MediaElement();
    mediaItem.Source = new Uri(data.FileName);
    newItem.Background = Brushes.Transparent;
    newItem.Content = mediaItem;
    newItem.Center = e.Cursor.GetPosition(scatterView);
    
    scatterView.Items.Add(newItem);
}

这样我们就实现了将LibraryBar 中的组件拖拽到ScatterView。MSDN 上也提供了文档供大家参考：Using the Microsoft Surface Drag-and-Drop Framework

本文链接

WPF 与Surface 2.0 SDK 亲密接触–LibraryStack 篇

2011-08-05T10:56:00Z

LibraryStack 本身属于ItemsControl，可以将其他组件以一种集合的方式显示出来，用户可以在LibraryStack 中逐一浏览如图片类的组件，而且它默认支持拖拽操作。

在下面的例子中我们将通过LibraryStack 展示一组图片。首先，为LibraryStack 编写一个DataTemplate 用来绑定图片样式。接下来在Grid 中添加LibraryStack 控件，并设置好数据模板。

<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="LibraryStack"
>
    <s:SurfaceWindow.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <Image Source="{Binding}"/>
        </DataTemplate>
    </s:SurfaceWindow.Resources>

    <Grid>
        <s:LibraryStack x:Name="mLibraryStack" 
                        ItemTemplate="{StaticResource ItemTemplate}"/>
    </Grid>
</s:SurfaceWindow>

最后，为LiraryStack 添加数据源。注意，不能将图片string[] 数组直接赋给LiraryStack，需要借助ObservableCollection。

string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";
try
{
    string[] files = System.IO.Directory.GetFiles(imagesPath, "*.jpg");
    ObservableCollection<string> items = new ObservableCollection<string>(files);
    mLibraryStack.ItemsSource = items;
}
catch (System.IO.DirectoryNotFoundException)
{
    // Error info.
}

运行界面：

本文链接

由People Hub 引发的那些事儿

2011-07-21T07:45:00Z

起因

使用Windows Phone 7 的朋友应该很清楚People Hub 也就是Windows Phone 7 里的联系人模块里面保存着两类联系人信息：1. 导入自手机SIM 卡；2. 同步Windows Live 联系人。总共加起来我的People Hub 里有上百个联系人，不使用搜索的话找起人来好麻烦。于是乎就想到把一些不常用的Windows Live 联系人删除，这样可以减少很多记录。

噩梦

只能说我自己太不了解People Hub 的功能。删除联系人时也没多想，三下五除二Contact List 变得很清爽。可万万没想到的事情发生了，第二天打开Live Messenger 发现那些被我删除的人都Disappeared？！很明显People Hub 将我的操作全部同步到Windows Live。没办法只能重新添加一遍，还好我没将所有人删除... ...

询问其他好友信息开始在Live Messenger 里添加，但是新加的好友在Live Messenger 始终无法显示，让对方重新加我也是一样，而且我在对方Live Messenger 里总是显示脱机。这是神马情况啊？真服了Live Messenger... ...

转机

好吧！Live Messenger 看了是没戏了，只好登录到Live.com 看看有没有希望。首先发现了“添加好友”功能，打开页面突然有一缕阳光破云而出的感觉（如下图）。赶紧把好友Live 邮箱地址填了进去，点击“下一步”进度条完成，邀请似乎发出去了。对方反馈已经在Live Messenger 收到消息。再看看自己的Live Messenger 一个好友已经添加完毕。嗨，终于是有救了... ...

Live.com 平时也不经常用，登录上来也没仔细看过。于是怀着期待的心情开始研究起来，当看到下图菜单时我泪流满面啊～～ Windows Live 里居然还有“还原已删除联系人”的功能。这里面有我删除的所有联系人信息，但要注意的是30天以前删除的无法恢复。

发现

联系人恢复后，突然发现在Live 联系人列表中居然有我SIM 卡上的联系人信息，说明People Hub 把SIM 卡的联系人也同步到Windows Live 了。而且可以将重复的联系人进行合并。比如，我SIM 卡上有个叫“张三”的联系人，一般只保存电话信息；Windows Live 里也有“张三”，保存着Live Messenger、邮箱、地址等信息，就可以将这两个记录合并为一个。这样一来People Hub 里的联系人记录会明显减少，联系人重复的问题也同时得到解决。

如果说Windows Live 里保存了SIM 卡的联系人，那是不是以后就不再需要将SIM 卡上的联系人导入WP7 了？抱着好奇的心情我再次手贱起来，不过这次是很有把握的操作，于是将手机Reset（恢复出厂设置）... ... 重新启动手机所有的数据都会消失。那些心存好奇的童鞋注意了是“全部数据都会消失”，包括：下载的应用程序、音乐、图片、视频、自定义设置等，可以说和新买的机器一样。

在重启和People Hub 里我们都不要选择导入SIM 联系人。进入Settings 界面将Windows Live 与手机进行绑定，经过几分钟同步后，所有Live 联系人数据便会全部同步到People Hub 里，包括之前提到的SIM 卡联系人。如果手机丢了也不必担心联系人电话号码丢失的后续问题，而且也可以尝试Windows Live & Windows Phone 7 文章中提到的找手机的方法。

另外，当你第一次用Live Id 登录手机后，Windows Live 中会记录下手机信息（如下图），其功能请参考Windows Live & Windows Phone 7 。主要是寻找手机、日历、文档等功能。如果将这个信息删除的话是无法通过同步恢复的，只能Reset 手机并重新登录一次Live Id。

总结

经过几天的折腾，终于搞明白Windows Live 与Windows Phone 7 的关系了，希望本文能对大家有所帮助。总结内容如下：

1. People Hub 的联系人与Windows Live 是实时同步的，当然也可以在People 设置里手动同步。导入自SIM 卡的联系人信息也会同步到Windows Live。

2. 重复的联系人可在Windows Live 中进行合并操作（Live.com）。

3. 误删的联系人也可在Windows Live 中恢复，但时间不能超过30天。

4. Windows Phone 7 恢复出厂设置后，所有数据将全部丢失。而且有一种说法是：“如果用Zune 下载的App 可以通过Zune 自动同步回手机上。”经我测试似乎没有这个功能，至少现在那些App 还没回到我手机上。

5. 首次用Live Id 登录Windows Phone 7 后，Windows Live 会记录该手机信息，并提供一些强大的功能（请参考上面提到的博文）。

本文链接

WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇

2011-07-18T08:01:00Z

与我们常用的一些WPF 控件相同，ScatterView 控件也支持数据绑定功能。本篇将演示如何利用ScatterView 绑定Win7 系统中的样例图片，并且每张图片会以独立的ScatterViewItem 形式展现出来。

首先，新建一个Surface Application(WPF) 项目，在Grid 中添加ScatterView 控件，并命名为mainScatterView。

<Grid>
    <s:ScatterView x:Name="mainScatterView">
        
    </s:ScatterView>
</Grid>

在C# 代码中将“Sample Pictures”目录下的图片全部添加到ScatterView 的ItemsSource。

string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\";
try
{
    mainScatterView.ItemsSource = System.IO.Directory.GetFiles(imagesPath, "*.jpg");
}
catch (System.IO.DirectoryNotFoundException)
{
    // Write Error info here.
}

按下 F5 运行程序，ScatterView 会为每张图片创建一个ScatterViewItem 控件。但是由于XAML 代码中没有编写任何样式模板，所以ScatterViewItem 只显示出图片路径及名称而不是图片本身（如下图）。

为了将图片在ScatterViewItem 显示出来，我们需要定义一个ItemTemplate，它可以使Image 对象与ScatterViewItem 控件绑定在一起。如下代码所示，DataTemplate 设置好数据源是Image 对象即可。

<Grid>
    <s:ScatterView x:Name="mainScatterView">
        <s:ScatterView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"/>
            </DataTemplate>
        </s:ScatterView.ItemTemplate>
    </s:ScatterView>
</Grid>

再次运行程序，ScatterViewItem 控件会依照ItemTemplate 属性重新创建，同时图片也会在ScatterView 控件中正常的显示。至此我们便完成了ScatterView 的绑定功能，便可以随意的对图片进行Manipulating 操作。

本文链接

WPF 与Surface 2.0 SDK 亲密接触 - 图形缩放篇

2011-07-17T03:30:00Z

通过上一篇的介绍大家应该已经了解到ScatterView 可以使开发者方便的实现控件的Manipulate 操作。细心的朋友可能发现了前面示例中矩形的缩放似乎有些问题，为了便于说明我们编写如下代码。

<Grid>
    <s:ScatterView>
        <Rectangle Fill="Blue" Width="200" Height="100"/>
        <Ellipse Fill="Red" Width="150" Height="80"/>
    </s:ScatterView>
</Grid>

在ScatterView 中分别加入了矩形和椭圆形，并且为两个图形分析别限定了长、宽尺寸。当我们对图形进行缩放操作时发现，两个图形本身尺寸并没有发生任何变化，只有ScatterViewItem 尺寸变大了。似乎图形的大小已经被长、宽参数约束住了。

遇到这种情况时需要使用Viewbox 控件中，Viewbox 并不是Surface 2.0 SDK 的控件，而是一个WPF 控件。它可以使图形随ScatterViewItem 尺寸的变化而变化。如下示例代码制作两个相同的矩形，并只将其中一个嵌入Viewbox 控件。从图中可以看到Viewbox 中的红色矩形会根据ScatterViewItem 尺寸变化而自动调节。这样当我们进行Manipulate 操作时，相应的控件尺寸也会随之变化。

<Grid>
    <s:ScatterView>
        <Rectangle Fill="Blue" Width="200" Height="100"/>
        <Viewbox>
            <Rectangle Fill="Red" Width="200" Height="100"/>
        </Viewbox>
    </s:ScatterView>
</Grid>

本文链接

WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 篇

2011-07-14T05:54:00Z

以前的博文我曾向大家介绍过利用WPF 4 开发具有多点触屏功能的应用程序，可参考《Multi-Touch 开发资源汇总》。在那些文章中无论是简单的拖拽，还是复杂的旋转、缩放效果（下文简称Manipulating）都需要开发者逐字逐句的编写出来。Surface 2.0 SDK 的发布可以使这些工作更加简单，我们甚至不需要对这些效果写任何代码。

本篇将为大家介绍如何使用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 操作的。

<s:SurfaceWindow x:Class="ScatterView.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="ScatterView"
>
    <Grid>
        <Label Content="Surface 2.0" Foreground="Fuchsia" FontWeight="Bold"/>
    </Grid>
</s:SurfaceWindow>

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

<Grid>
    <s:ScatterView x:Name="mainScatterView">
        <s:ScatterViewItem Deceleration="50">
            <Rectangle Fill="Green" Width="200" Height="100"/>
        </s:ScatterViewItem>
        
        <Label Content="Surface 2.0" Foreground="Fuchsia" FontWeight="Bold"/>
        
        <s:SurfaceTextBox Width="500" Height="20" FontSize="20"/>
    </s:ScatterView>
</Grid>

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

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

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

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

相关参考

ScatterView Class

本文链接