User Tools

Site Tools


notes:uwp:datatemplate

DataTemplate in XAML

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.");
}
notes/uwp/datatemplate.txt · Last modified: 2016/12/21 by admin