using one data template in another data template in WPF

Question

I have two data templates, one of which is the subset of another like below:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:controls="clr-namespace:Client.UI.WPF;assembly=Client.UI.WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
>
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/Client.Resources.WPF.Styles;Component/Styles/CommonStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DataTemplate x:Key="XYZDataTemplate">
    <Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
                    <controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" 
                                   Margin="5,10,0,0">
            <igEditors:XamTextEditor  />
        </controls:ValueDisplay>
        <controls:ValueDisplay  Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" 
                                    Margin="20,10,0,0">
            <igEditors:XamTextEditor IsReadOnly="True"/>
        </controls:ValueDisplay>
               </Grid>

</DataTemplate>

and the other is like below:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:controls="clr-namespace:BHI.ULSS.Client.UI.WPF;assembly=ULSS.Client.UI.WPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
>


<DataTemplate x:Key="ABCDataTemplate" >
    <Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" 
                                   Margin="5,10,0,0">
            <igEditors:XamTextEditor  />
        </controls:ValueDisplay>
        <controls:ValueDisplay  Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" 
                                    Margin="20,10,0,0">
            <igEditors:XamTextEditor IsReadOnly="True"/>
        </controls:ValueDisplay>
        <controls:ValueDisplay Grid.Row="0" Grid.Column="2" LabelText="Size" ShowUnit="True" x:Name="size" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" 
                                   Margin="20,10,0,0">
            <igEditors:XamTextEditor/>
        </controls:ValueDisplay>
               </Grid>

</DataTemplate>

XYZDataTemplate is a subset of the ABCDataTemplate as the first two fields in both the data templates are common, so I was wondering if it is possible to replace the redundant code in the ABCDataTemplate with that of the XYZDataTemplate for code maintainability? Could anyone please suggest if would this be a right approach, if so how can I acheive that?

Thanks in advance, Sowmya

Pulvinus

Answer 1

If you have some boilerplate in XAML, you can use ContenPresenter as a sort of "macro" to expand your boilerplate in multiple places. First you define a DataTemplate and then you use the ContentPresenter with the resource key to "expand" the macro. Here is an example:

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="boilerplate">
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="100" Height="100" Stroke="Black" Fill="{Binding}"/>
                <Rectangle Width="100" Height="100" Stroke="Black" Fill="{Binding}"/>
            </StackPanel>
        </DataTemplate>
    </Grid.Resources>
    <StackPanel>
        <ContentPresenter ContentTemplate="{StaticResource boilerplate}" Content="Red"/>
        <ContentPresenter ContentTemplate="{StaticResource boilerplate}" Content="Blue"/>
    </StackPanel>
</Grid>

As the template is a real template you can use data binding. Think of it as an ItemsControl with just one item. If there is no binding you can omit the Content property. You can think of it as the macro "parameter".

Over-using this will make your XAML harder to read and it has a modest performance cost so use it carefully. Finally, there are some limitations in that the "macro" always expands to one top-level element so you cannot add two elements to a single Panel with a single use of ContentPresenter.

Eluviation

thanks Rick for your inputs...this has helped me to understand reusing data templates:)! – Pulvinus

How can i dynamically choose ContentTemplate for ContentPresenter? – Sundown

@Sundown - I solved that by having my own IValueConverter. The converter can have properties that are accessible in xaml. When you defining your converter (assigning x:key), you can assigned your keyed templates to the converter properties. Then in the Content presenter bind you content template to your data and pass the converter that will return one of your templates. If you need static selector (one in the runtime) - there is a ITemplateSelector (or smth like that) – Carolann

Answer 2

Using VS2010, I would consider using a UserControl.

UserControls automatically inherit the DataContext property from their parents + have design time support + u don't have to hard code resource paths.

Martini