using one data template in another data template in WPF - 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

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.

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.