WPF close contact with Surface 2.0 SDK-Scatterview Data Binding Chapter

As with some of the WPF controls that we commonly use, the Scatterview control also supports data binding capabilities. This article shows you how to use Scatterview to bind a sample picture in a Win7 system, and each picture is presented in a separate Scatterviewitem form.

First, create a new 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 C # code, add all the pictures under the "Sample Pictures" directory to the 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.}

Press F5 to run the program, Scatterview will create a Scatterviewitem control for each picture. However, because no style templates are written in the XAML code, Scatterviewitem only displays the picture path and name instead of the picture itself (for example).

To show the picture in Scatterviewitem, we need to define a itemtemplate that binds the image object to the Scatterviewitem control. As the following code shows, DataTemplate sets the data source to be an image object.

<Grid>    <s:scatterview x:name= "Mainscatterview" >        <s:ScatterView.ItemTemplate>            < datatemplate>                <image source= "{Binding}"/>            </DataTemplate>        </s: Scatterview.itemtemplate>    </s:ScatterView></Grid>

When you run the program again, the Scatterviewitem control is recreated according to the ItemTemplate property, and the picture is displayed normally in the Scatterview control. At this point we have completed the Scatterview binding function, you can arbitrarily manipulating the image operation.

WPF close contact with Surface 2.0 SDK-Scatterview Data Binding Chapter