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 只顯示出圖片路徑及名稱而不是圖片本身（如）。

     為了將圖片在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 操作。