XAML Refactoring - How to extract common markup

Question

I have some xaml pasted at the end of this question. It's from a resource file in my project.

The HierarchicalDataTemplate and the DataTemplate share exactly the same structure. Is there a way to extract the common parts and reference it in?

<HierarchicalDataTemplate DataType="{x:Type local:ChapterViewModel}"
                          x:Key="ChapterOutcomesTemplate"
                          ItemsSource="{Binding Path=Chapter.Outcomes}"
                          ItemTemplate="{StaticResource AssignedOutcomeTemplate}">
    <StackPanel Orientation="Horizontal">
     <Image Height="16"
      Width="16"
      Margin="0,0,0,0"
      RenderOptions.BitmapScalingMode="NearestNeighbor"
      SnapsToDevicePixels="True"
      Source="{Binding Source={x:Static images:DocumentImages.Outcomes}}"
      Visibility="{Binding IsOutcomesAssigned, Converter={StaticResource BooleanToVisibility}, Mode=OneWay}"
                   />
     <Image Height="16"
      Width="16"
      RenderOptions.BitmapScalingMode="NearestNeighbor"
      SnapsToDevicePixels="True"
      Margin="5,0,0,0"
      Source="{Binding Source={x:Static images:DocumentImages.Chapter}}" 
                   />
     <TextBlock Text="{Binding Chapter.Name}"
      Margin="5,0,0,0" />
    </StackPanel>
</HierarchicalDataTemplate>
<DataTemplate x:Key="ItemTemplate">
    <StackPanel Orientation="Horizontal">
     <Image Height="16"
      Width="16"
      Margin="0,0,0,0"
      RenderOptions.BitmapScalingMode="NearestNeighbor"
      SnapsToDevicePixels="True"
      Source="{Binding Source={x:Static images:DocumentImages.Outcomes}}"
      Visibility="{Binding IsOutcomesAssigned, Converter={StaticResource BooleanToVisibility}, Mode=OneWay}" />
     <Image Height="16"
      Width="16"
      RenderOptions.BitmapScalingMode="NearestNeighbor"
      SnapsToDevicePixels="True"
      Margin="5,0,0,0"
      Source="{Binding Source={x:Static images:DocumentImages.Chapter}}" />
     <TextBlock Text="{Binding Chapter.Name}"
      Margin="5,0,0,0" />
    </StackPanel>

</DataTemplate>

Answer 1

Yes you can. Define the content that's due to be shared as a control template, then use it in both templates:

<!-- New control template -->
<ControlTemplate x:Key="ChapterAndItemTemplate">
  <StackPanel Orientation="Horizontal">
    <Image Height="16" Width="16" Margin="0"
           RenderOptions.BitmapScalingMode="NearestNeighbor"
           SnapsToDevicePixels="True"
           Source="{Binding Source={x:Static images:DocumentImages.Outcomes}}"
           Visibility="{Binding IsOutcomesAssigned, Converter={StaticResource BooleanToVisibility}, Mode=OneWay}" />
    <Image Height="16" Width="16" Margin="5,0,0,0"
           RenderOptions.BitmapScalingMode="NearestNeighbor"
           SnapsToDevicePixels="True"
           Source="{Binding Source={x:Static images:DocumentImages.Chapter}}" />
    <TextBlock Text="{Binding Chapter.Name}" Margin="5,0,0,0" />
  </StackPanel>
</ControlTemplate>

<HierarchicalDataTemplate DataType="{x:Type local:ChapterViewModel}"
                          x:Key="ChapterOutcomesTemplate"
                          ItemsSource="{Binding Path=Chapter.Outcomes}"
                          ItemTemplate="{StaticResource AssignedOutcomeTemplate}">
  <!-- Used here... -->
  <Control Template="{StaticResource ChapterAndItemTemplate}" />
</HierarchicalDataTemplate>

<DataTemplate x:Key="ItemTemplate">
  <!-- ...and here -->
  <Control Template="{StaticResource ChapterAndItemTemplate}" />
</DataTemplate>