天天看点

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

 与我们常用的一些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 只显示出图片路径及名称而不是图片本身(如下图)。

NoBinding

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

        <s:ScatterView.ItemTemplate>

            <DataTemplate>

                <Image Source="{Binding}"/>

            </DataTemplate>

        </s:ScatterView.ItemTemplate>

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

本文转自Gnie博客园博客,原文链接:http://www.cnblogs.com/gnielee/archive/2011/07/18/wpf-surface2sdk-binding.html,如需转载请自行联系原作者

继续阅读