Skip Navigation LinksHome > View Post

Different DataTemplates for different types

Did you know that you can have WPF automatically select a DataTemplate based on the current bound type?

For example, imagine we have a collection of disparate objects (I'm going to use Xaml here so we can paste the whole thing into xamlpad etc).
<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <x:Array x:Key="array" Type="sys:Object">
            <sys:DateTime>2001-12-01</sys:DateTime>
            <sys:String>Hello</sys:String>
            <sys:DateTime>2006-06-21</sys:DateTime>
            <sys:Int32>98</sys:Int32>
            <sys:String>Goodbye</sys:String>
            <sys:Int32>98</sys:Int32>
        </x:Array>

Then we create some DataTemplates for each specified type (note the DataType property on each template and the absence of a key).

    <DataTemplate DataType="{x:Type sys:String}">
        <Border BorderBrush="Red" BorderThickness="2" Background="Pink">
            <TextBlock Text="{Binding}" Foreground="Red" FontWeight="Bold" Padding="5"/>
        </Border>
    </DataTemplate>
    <DataTemplate DataType="{x:Type sys:DateTime}">
        <Border BorderBrush="Green" BorderThickness="2" CornerRadius="5">
            <TextBlock Text="{Binding}" Foreground="Green" FontWeight="Bold" Padding="5"/>
        </Border>
    </DataTemplate>
    <DataTemplate DataType="{x:Type sys:Int32}">
        <Border BorderBrush="Purple" BorderThickness="2" CornerRadius="30">
            <TextBlock Text="{Binding}" Foreground="Purple" FontWeight="Bold" Padding="5"/>
        </Border>
    </DataTemplate>
</Page.Resources>

Next, we bind a ListBox to the array resource...

<ListBox
    ItemsSource="{Binding Source={StaticResource array}, Path=.}"
    IsSynchronizedWithCurrentItem="true"
    DisplayMemberPath=".">

.. and finally bind a ContentControl to the selected item in the same collection (if this syntax looks a little weird to you check out this post: Binding to the Current Item in WPF).

<ContentControl Content="{Binding Source={StaticResource array}, Path=/}"/>

Et voila!

Different DataTemplates for different types

Download the full example (.xaml file)

Tags: WPF

 
Josh Post By Josh Twist
12:09 PM
19 Feb 2008

» Next Post: Different DataTemplates for different data
« Previous Post: New in WPF 3.5: 3. Enhanced Debugging Features

Comments are closed for this post.

Posted by Peter @ 20 Feb 2008 12:30 PM
Thanks for the post, but the link to the .xaml finle seems to be broken (points to png image)

Posted by Josh @ 20 Feb 2008 12:51 PM
Thanks - all fixed now.

Posted by Ged @ 05 Mar 2008 1:21 PM
Hi Josh,
Another useful tip -thanks!.

Did you mean to add a link to the sentence: "(if this syntax looks a little weird to you check out this post: " ?



Posted by Josh @ 08 Mar 2008 7:24 AM
Oops - thanks Ged. It's in there now!

© 2005 - 2014 Josh Twist - All Rights Reserved.