Clever Geek Handbook

XAML Refactoring - How to Extract Common Markup

I have the xaml pasted at the end of this question. This is from a resource file in my project.

HierarchicalDataTemplate and DataTemplate share a common structure. Is there a way to extract the common parts and reference them?

<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>
+2


source to share


1 answer


Yes, you can. Define the content to be passed as the control template, and 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>
+3


source






More articles:


All Articles