How to reduce my code, the number of nearly identical structures can be very large

Maybe this is a very simple question, but I can't find the answer: How to reduce my code, the number of nearly identical structures can be very large:

For example

<Windows:HierarchicalDataTemplate x:Key="**Level2ItemTemplate**"
                                      ItemsSource="{Binding Children}"
                                      ItemTemplate="{StaticResource **Level3ItemTemplate**}">
        <Grid Height="100"
              Width="100"
              Margin="5">
            <Border Padding="5"
                    BorderThickness="1"
                    BorderBrush="#FFADADAD"
                    CornerRadius="5">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="#FFD47E00"
                                      Offset="0" />
                        <GradientStop Color="#FF563300"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
                <TextBox TextWrapping="Wrap"
                         Text="{Binding Title, Mode=TwoWay}"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         FontWeight="Bold"
                         FontSize="13.333"
                         Style="{StaticResource EditableTitleStyle}" />
            </Border>
            <Image HorizontalAlignment="Right"
                   Source="add.png"
                   Stretch="Fill"
                   Width="16"
                   VerticalAlignment="Bottom"
                   Margin="0,0,2,2"
                   Height="16">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <Graph:AddSpiderItemAction />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
            <Image HorizontalAlignment="Right"
                   Height="16"
                   Source="remove.png"
                   Stretch="Fill"
                   VerticalAlignment="Top"
                   Width="16"
                   Margin="0,2,2,0">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <Graph:RemoveSpiderItemAction />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
        </Grid>
    </Windows:HierarchicalDataTemplate>
    <Windows:HierarchicalDataTemplate x:Key="**Level1ItemTemplate**"
                                      ItemsSource="{Binding Children}"
                                      ItemTemplate="{StaticResource **Level2ItemTemplate**}">
        <Grid Height="100"
              Width="100"
              Margin="5">
            <Border Padding="5"
                    BorderThickness="1"
                    BorderBrush="#FFADADAD"
                    CornerRadius="5">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="#FFB5B5B5"
                                      Offset="0" />
                        <GradientStop Color="#FF474747"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
                <TextBox TextWrapping="Wrap"
                         Text="{Binding Title, Mode=TwoWay}"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         FontWeight="Bold"
                         FontSize="13.333"
 开发者_运维问答                        Style="{StaticResource EditableTitleStyle}" />
            </Border>
            <Image HorizontalAlignment="Right"
                   Source="add.png"
                   Stretch="Fill"
                   Width="16"
                   VerticalAlignment="Bottom"
                   Margin="0,0,2,2"
                   Height="16">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <Graph:AddSpiderItemAction />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
            <Image HorizontalAlignment="Right"
                   Height="16"
                   Source="remove.png"
                   Stretch="Fill"
                   VerticalAlignment="Top"
                   Width="16"
                   Margin="0,2,2,0">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <Graph:RemoveSpiderItemAction />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Image>
        </Grid>
    </Windows:HierarchicalDataTemplate>

and so on...

You can extract the same layout parts into separate DataTemplates, see DataTemplate class. And the same styles into separate styles.

Take a look at the very nice MSDN article Control Customization, it describes templates, styles, parts and state models.

Great articles by ScottGu's:

• Using Style Elements to Better Encapsulate Look and Feel
• Using Control Templates to Customize a Control's Look and Feel

You can create styles for common elements. For example create a style for the border, one for the text box etc. Then apply these styles inside the data template on the corresponding elements.

This will make the data templates smaller and also will make the memory footprint smaller since the style data does not get duplicated.