在 xaml 中包含 xaml 元素

Question

我有两种不同的样式，我试图在其中包含相同的基本元素。例如，Horizo​​ntalButton 有这样的样式：

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

VerticalButton 有这种风格：

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

正如你所见，outerBorder 根据按钮是垂直还是水平设置了不同的属性，但是从 innerBorder 向内的所有内部元素都是相同的。有没有一种方法可以在 xaml 中进行某种包含或引用，这样我只需对内部元素的一个实例进行更改即可获得相同的结果？

Answer 1

您可以使用 ContentControl 并将 ContentTemplate 设置为包含所有共享元素的 DataTemplate

<DataTemplate x:Key="MySharedXaml">
    <!-- Shared XAML here -->
</DataTemplate>

然后在您的控件中，只需在您想要共享 XAML 的任何地方使用它

<ContentControl ContentTemplate="{StaticResource MySharedXAML}">
    <ContentPresenter />
</ContentControl>

我唯一不确定的是绑定。您可能需要稍微调整一下 XAML 以确保正确设置绑定。