Surface Tip: Binding a ScatterView ItemsSource

Now that we have covered the basics of the ScatterView control and the different most common layout scenarios, lets discuss Binding. Binding is a powerful WPF feature that allows you to bind presentation elements to code behind properties which can be loaded in run time and changed at any time, effectively affecting the displayed elements. One of the most common scenarios is to bind the ItemsSource property of a ScatterView control to a code behind property so you can effectively load and modify the collection from code and reflect the changes in the interface automatically.

Lets assume you have the following XAML code:

As you can see, we are just defining the ScatterView items template but not the actual items. In this case, the image element inside the Items template has its source as a binded property. We could implement a collection property in the backend that we could load from a web service (as shown in this post I made for Windows 8) and then use as the items source for the ScatterView items collection. Another common scenario is to display a collection of images from a local folder, say your last vacation pictures. Following this last scenario, here is how you bind the ItemsSource from code. Here is how you do that from code:

scatter.ItemsSource = Directory.GetFiles(@"C:\Users\Public\Pictures", "*.jpg");

The previous code will load all files with extension “.jpg” from the specified directory. This will effectively made the app to display all the images stored in that folder.

Now you know how to bind a ScatterView items collection to an image collection from your local file system.
Enjoy!