WPF is in close contact with the Surface 2.0 SDK-ScatterView Data Binding

Like some commonly used WPF controls, the ScatterView control also supports data binding. This article demonstrates how to use ScatterView to bind a sample image to the Win7 system, and each image is displayed in an independent ScatterViewItem form.

First, create a Surface Application (WPF) project, add the ScatterView control to the Grid, and name it mainScatterView.

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

In the C # code, add all the images in the "Sample Pictures" directory to the ItemsSource of ScatterView.

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.}

Press F5 to run the program. ScatterView creates a ScatterViewItem Control for each image. However, because no style template is written in the XAML code, ScatterViewItem only displays the image path and name, rather than the image itself (for example ).

To display an Image in ScatterViewItem, we need to define an ItemTemplate that binds the Image object to the ScatterViewItem control. The following code shows that DataTemplate can set the data source to an Image object.

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

Run the program again. The ScatterViewItem control will be re-created according to the ItemTemplate attribute, and the image will be normally displayed in the ScatterView control. Now, the ScatterView binding function is complete, and you can freely Manipulating images.