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 对象即可。

<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 操作。

PicBinding

posted @ 2011-07-18 16:01 Gnie 阅读(...) 评论(...) 编辑 收藏
Copyright © 2010 Gnie