Data Binding in WPF Tile View

The topics under this section explain the data binding support for the TileViewControl.

Data-Binding to Objects

The TileViewControl supports data binding to objects.

1. Create a class that act as a model for TileViewItem.

c#

public class Model
{
  public string Header { get; set; }
  public string Content { get; set; }
}

1. Create a ViewModel class and initialize the items.

c#

public class ViewModel
{
  public ObservableCollection<Model> TileItems { get; set; }
  public ViewModel()
  {
    TileItems = new ObservableCollection<Model>();
    PopulateData();
  }

  private void PopulateData()
  {
     Model model1 = new Model() { Header = "Item1", Content = "TileViewItem1" };
     Model model2 = new Model() { Header = "Item2", Content = "TileViewItem2" };
     Model model3 = new Model() { Header = "Item3", Content = "TileViewItem3" };
     Model model4 = new Model() { Header = "Item4", Content = "TileViewItem4" };           

     TileItems.Add(model1);
     TileItems.Add(model2);
     TileItems.Add(model3);
     TileItems.Add(model4);
  }
}

1. Create a ViewModel instance and use it as DataContext for the root window.

xaml

<Window.DataContext>
  <local:ViewModel/>
</Window.DataContext>

1. Configure the ItemSource and ItemContainerStyle of the TileViewControl.

xaml

<syncfusion:TileViewControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding TileItems}">
  <syncfusion:TileViewControl.ItemContainerStyle>
      <Style TargetType="{x:Type syncfusion:TileViewItem}">
        <Setter Property="Header" Value="{Binding Header}" />
        <Setter Property="Content" Value="{Binding Content}"/>
      </Style>
  </syncfusion:TileViewControl.ItemContainerStyle>
</syncfusion:TileViewControl>

Data-Binding with XML

An XML file can also be used as ItemSource for the TileViewControl.

1. Create an XML file with the following details and name it as Data.xml.

xaml

<?xml version="1.0" encoding="utf-8" ?>
<Books>
  <Book Name="Programming C# 4.0" Description="Learn C# fundamentals, such as variables, flow control, loops, and methods"/>
  <Book Name="Programming WPF" Description="A tutorial on XAML, the new HTML-like markup language for declaring Windows UI"/>
  <Book Name="Essential WPF" Description="Visuals and media, including 2D, 3D, video, and animation"/>
  <Book Name="WPF Unleashed" Description="Examines the WPF feature areas in incredible depth: controls, layout, resources, data binding, styling, graphics, animation, and more"/>
</Books>

1. Add XmlDataProvider for the above XML document.

xaml

<Window.Resources>
  <XmlDataProvider Source="Data.xml" x:Key="xmlSource" XPath="Books"/>
</Window.Resources>

1. Set ItemsSource property for the TileViewControl.

xaml

<syncfusion:TileViewControl ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"   >
  <syncfusion:TileViewControl.ItemContainerStyle>
    <Style TargetType="{x:Type syncfusion:TileViewItem}">
      <Setter Property="Header" Value="{Binding XPath=@Name}" />
      <Setter Property="ContentTemplate">
      <Setter.Value>
        <DataTemplate>
            <TextBlock Text="{Binding XPath=@Description}" TextWrapping="Wrap"/>
        </DataTemplate>
      </Setter.Value>
      </Setter>                    
    </Style>
  </syncfusion:TileViewControl.ItemContainerStyle>
</syncfusion:TileViewControl>

NOTE

View sample in GitHub