DataTemplate is usually used with list controls such as ItemsControl, GridView, or ListView.
Example: Define a DataTemplate inline by setting the ItemTemplate property. The ItemTemplate property is of type DataTemplate:
<ItemsControl> <ItemsControl.ItemTemplate> <DataTemplate> <Rectangle Width="100" Height="50" Margin="10"> <Rectangle.Fill> <SolidColorBrush Color="{Binding}" /> </Rectangle.Fill> </Rectangle> </DataTemplate> </ItemsControl.ItemTemplate> <Color>Blue</Color> <Color>Red</Color> <Color>Green</Color> <Color>Magenta</Color> </ItemsControl>
Example: Define a DataTemplate inline and bind the ItemsControl to an ObservableCollection:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp"> <Grid> <ItemsControl ItemsSource="{x:Bind People}"> <ItemsControl.ItemTemplate> <DataTemplate x:DataType="local:Person"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0"/> <TextBlock Text="{x:Bind LastName}"/> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> </Page>
using System.Collections.ObjectModel; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestApp { class Person { public string FirstName { get; set; } public string LastName { get; set; } } public sealed partial class MainPage : Page { private ObservableCollection<Person> People; public MainPage() { this.InitializeComponent(); People = new ObservableCollection<Person>(); Loaded += MainPage_Loaded; } private void MainPage_Loaded(object sender, RoutedEventArgs e) { People.Add(new Person { FirstName = "John", LastName = "Makak" }); People.Add(new Person { FirstName = "Steve", LastName = "Gibbon" }); People.Add(new Person { FirstName = "Mike", LastName = "Chimp" }); } } }
The same template as above but defined in resources:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp"> <Page.Resources> <DataTemplate x:Key="PersonDataTemplate" x:DataType="local:Person"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0"/> <TextBlock Text="{x:Bind LastName}"/> </StackPanel> </DataTemplate> </Page.Resources> <Grid> <ItemsControl ItemsSource="{x:Bind People}" ItemTemplate="{StaticResource PersonDataTemplate}" /> </Grid> </Page>
Example: Select a DataTemplate dynamically in run-time using a class derived from DataTemplateSelector:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp"> <Page.Resources> <DataTemplate x:Key="PersonDefaultTemplate" x:DataType="local:Person"> <StackPanel Orientation="Horizontal" Padding="4"> <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0" /> <TextBlock Text="{x:Bind LastName}" /> </StackPanel> </DataTemplate> <DataTemplate x:Key="PersonDisabledTemplate" x:DataType="local:Person"> <StackPanel Orientation="Horizontal" Padding="4" Background="Gray"> <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0" Foreground="White" /> <TextBlock Text="{x:Bind LastName}" Foreground="White" /> </StackPanel> </DataTemplate> <local:CustomTemplateSelector x:Key="CustomTemplateSelector" DefaultTemplate="{StaticResource PersonDefaultTemplate}" DisabledTemplate="{StaticResource PersonDisabledTemplate}" /> </Page.Resources> <Grid> <ItemsControl ItemsSource="{x:Bind People}" ItemTemplateSelector="{StaticResource CustomTemplateSelector}" /> </Grid> </Page>
using System.Collections.ObjectModel; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace TestApp { class Person { public string FirstName { get; set; } public string LastName { get; set; } public bool IsDisabled { get; set; } } public sealed partial class MainPage : Page { private ObservableCollection<Person> People; public MainPage() { this.InitializeComponent(); People = new ObservableCollection<Person>(); Loaded += MainPage_Loaded; } private void MainPage_Loaded(object sender, RoutedEventArgs e) { People.Add(new Person { FirstName = "John", LastName = "Makak", IsDisabled = false }); People.Add(new Person { FirstName = "Steve", LastName = "Gibbon", IsDisabled = true }); People.Add(new Person { FirstName = "Mike", LastName = "Chimp", IsDisabled = false }); } } class CustomTemplateSelector : DataTemplateSelector { public DataTemplate DefaultTemplate { get; set; } public DataTemplate DisabledTemplate { get; set; } // Return the appropriate template. protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) { Person person = item as Person; if (person != null) { if (person.IsDisabled) return DisabledTemplate; } return DefaultTemplate; } } }
Example: Change DataTemplate (and ItemsPanelTemplate) dynamically in code. We assume appropriate templates are defined in resources. To retrieve templates from application resources use Application.Current.Resources rather than this.Resources.
// viewType is a variable of type enum switch(viewType) { case ViewType.Default: { DataTemplate defaultTemplate = this.Resources["DefaultDataTemplate"] as DataTemplate; GridView1.ItemTemplate = defaultTemplate; GridView1.ItemsPanel = this.Resources["DefaultPanelTemplate"] as ItemsPanelTemplate; } break; case ViewType.Compact: { DataTemplate compactTemplate = this.Resources["CompactDataTemplate"] as DataTemplate; GridView1.ItemTemplate = compactTemplate; GridView1.ItemsPanel = this.Resources["CompactPanelTemplate"] as ItemsPanelTemplate; } break; case ViewType.Grid: { DataTemplate gridTemplate = this.Resources["GridDataTemplate"] as DataTemplate; GridView1.ItemTemplate = gridTemplate; GridView1.ItemsPanel = this.Resources["GridPanelTemplate"] as ItemsPanelTemplate; } break; default: throw new ArgumentException("Unrecognized view type."); }