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.
public class Model
  public string Header { get; set; }
  public string Content { get; set; }
  1. Create a ViewModel class and initialize the items.
public class ViewModel
  public ObservableCollection<Model> TileItems { get; set; }
  public ViewModel()
    TileItems = new ObservableCollection<Model>();

  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" };           

  1. Create a ViewModel instance and use it as DataContext for the root window.
  1. Configure the ItemSource and ItemContainerStyle of the TileViewControl.
<syncfusion:TileViewControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding TileItems}">
      <Style TargetType="{x:Type syncfusion:TileViewItem}">
        <Setter Property="Header" Value="{Binding Header}" />
        <Setter Property="Content" Value="{Binding Content}"/>

Data binding

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.
<?xml version="1.0" encoding="utf-8" ?>
  <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"/>
  1. Add XmlDataProvider for the above XML document.
  <XmlDataProvider Source="Data.xml" x:Key="xmlSource" XPath="Books"/>
  1. Set ItemsSource property for the TileViewControl.
<syncfusion:TileViewControl ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"   >
    <Style TargetType="{x:Type syncfusion:TileViewItem}">
      <Setter Property="Header" Value="{Binding XPath=@Name}" />
      <Setter Property="ContentTemplate">
            <TextBlock Text="{Binding XPath=@Description}" TextWrapping="Wrap"/>

Item container style


View sample in GitHub