如何通过属性更改UserControl的布局？

Question

我做了一个我能证明问题的最小项目：

背后的代码：

public partial class AxisControl : UserControl
{
    public static readonly DependencyProperty LayoutProperty =
        DependencyProperty.Register("Layout", typeof(Orientation), typeof(AxisControl),
            new PropertyMetadata(Orientation.Horizontal));

    public Orientation Layout
    {
        get { return (Orientation)GetValue(LayoutProperty); }
        set { SetValue(LayoutProperty, value); }
    }

    public AxisControl()
    {
        InitializeComponent();
    }
}

Xaml：

<UserControl.Resources>
    <ContentControl x:Key="horizontalLayout" Height="60">
        <TextBlock Text="{Binding Layout, RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
    </ContentControl>
    <ContentControl x:Key="verticalLayout" Width="60">
        <TextBlock Text="{Binding Layout, RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>
        </TextBlock>
    </ContentControl>
</UserControl.Resources>
<UserControl.Style>
    <Style TargetType="UserControl">
        <Style.Setters>
            <Setter Property="Content" Value="{StaticResource horizontalLayout}"/>
        </Style.Setters>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Layout, ElementName=root}" Value="Vertical">
                <Setter Property="Content" Value="{StaticResource verticalLayout}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

编辑：Xaml现在包括我想在用户控件中排列的元素。

主窗口 Xaml：

<Grid>
    <local:AxisControl Layout="Vertical"/>
</Grid>

这个想法是根据其布局属性设置 UserControl 的布局，因此我将两种布局都放在静态资源中，并制作了一个样式以根据类型为“方向”的布局将内容设置为我想要的内容。

编辑：我希望内容包含根据方向以不同顺序排列的元素。

用户控件显示正确，但输出窗口中有一个与我有关的错误：

找不到引用“RelativeSource FindAncestor，AncestorType=”System.Windows.Controls的绑定源。UserControl“，AncestorLevel=“1”。BindingExpression:路径=布局；数据项=空；目标元素是“TextBlock”（名称=“”）；目标属性为“Text”（类型为“String”）

这是否意味着它正在尝试在可能来自触发器的可视化树中之前执行绑定？

请注意绑定中RelativeSource和ElementName的使用，因为在UserControl的根位置设置DataContext是不正确的，因为它会破坏DataContext继承。

我做错了什么，我怎样才能摆脱错误？

Answer 1

受到克莱门斯评论和进一步研究的启发，我意识到我需要为每个布局提供一个 ControlTemplate 资源，而不是包含元素本身实例的资源。

<UserControl.Resources>
    <ControlTemplate x:Key="horizontalLayout">
        <Border Height="60" Background="LightBlue">
            <TextBlock Text="{Binding Layout, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        </Border>
    </ControlTemplate>
    <ControlTemplate x:Key="verticalLayout" TargetType="UserControl">
        <Border Width="60" Background="LightBlue">
            <TextBlock Text="{Binding Layout, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" VerticalAlignment="Center">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Border>
    </ControlTemplate>
</UserControl.Resources>
<UserControl.Style>
    <Style TargetType="UserControl">
        <Style.Setters>
            <Setter Property="Template" Value="{StaticResource horizontalLayout}"/>
        </Style.Setters>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Layout, ElementName=root}" Value="Vertical">
                <Setter Property="Template" Value="{StaticResource verticalLayout}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>

布局=水平

布局=垂直