Include xaml element in xaml - wpf

Question

I have two separate styles in which I am trying to include the same basic elements. For example, HorizontalButton has this style:
<Style x:Key="HorizontalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And VerticalButton has this style:
<Style x:Key="VerticalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, outerBorder has different attributes set depending on whether or not the button is vertical or horizontal, but all of the inner elements from innerBorder inwards are identical. Is there a way I can do some kind of an include or reference in xaml so that I would only have to make changes to one instance of the inner elements to get the same results?

Answer 1

You might be able to use a ContentControl with the ContentTemplate set to a DataTemplate containing all your shared elements
<DataTemplate x:Key="MySharedXaml">
<!-- Shared XAML here -->
</DataTemplate>
then in your controls, simply use this wherever you want your shared XAML
<ContentControl ContentTemplate="{StaticResource MySharedXAML}">
<ContentPresenter />
</ContentControl>
The only thing I'm not sure of is the Bindings. You might need to tweak your XAML a bit to make sure the bindings get set correctly.