Adding Items Programmatically to a ScatterView Control

The code examples in the previous ScatterView topics have placed a fixed set of items in a ScatterView control by using XAML. You can also add and remove items by using code or even by data binding.

Adding Items by Using Code

The following simple code example modifies the Items collection of a ScatterView object by using code. The XAML defines only a series of SurfaceButton controls and an empty ScatterView control. These buttons are connected to C# event handlers that add, remove, and clear items from the ScatterView control.

<s:SurfaceWindow 
    x:Class="HelloScatterView.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="HelloScatterView">
    
    <s:SurfaceWindow.Resources>
      <ImageBrush x:Key="WindowBackground" 
                  Stretch="None" Opacity="0.6" 
                  ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
    </s:SurfaceWindow.Resources>

    <DockPanel>
      <UniformGrid Background="Black" Height="50" DockPanel.Dock="Top" Columns="3">
        <s:SurfaceButton Content="Add" Click="Add"/>
        <s:SurfaceButton Content="Remove" Click="Remove"/>
        <s:SurfaceButton Content="Clear" Click="Clear"/>
      </UniformGrid>
      <s:ScatterView x:Name="scatter"/>
    </DockPanel>


</s:SurfaceWindow>
ScatterView - Adding items programmatically

Adding Items by Using Data Binding

Like other controls in WPF, the ScatterView control supports data binding capabilities that enable complete separation of content from how the content is displayed. You can data bind the ScatterView control to something complex (like a database query), something simple (like an array), and many things in between.

When an application sets the ItemsSource property of a ScatterView control, a ScatterViewItem element is created for each object that the ItemsSource property provides. As objects are added to the ItemsSource property, a new ScatterViewItem is automatically added. Likewise, as objects are removed from the ItemsSource property, the appropriate ScatterViewItem instances are automatically removed. By providing a custom ItemTemplate for the ScatterView control, you can specify in XAML how objects from the ItemsSource collection should be rendered within each automatically created ScatterViewItem element.

The following simple code example shows a ScatterView control that is populated through data binding.

<s:SurfaceWindow 
    x:Class="HelloScatterView.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="HelloScatterView">
    
    <s:SurfaceWindow.Resources>
      <ImageBrush x:Key="WindowBackground" 
                  Stretch="None" Opacity="0.6" 
                  ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
    </s:SurfaceWindow.Resources>

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

</s:SurfaceWindow>

In the constructor of SurfaceWindow1, the ItemsSource property of the ScatterView control is set to a list of .jpg files.

ScatterView - Data binding

When the window is created, a collection of file names (referring to the sample photos that are included in the Windows Vista operating system) is created and set to be the ItemsSource property of the ScatterView control. The ScatterView element's ItemTemplate takes each string value from this collection and uses it as the Source property for an Image element.

Community Additions

Show: