WPF 负边距显示不正确

Question

我正在尝试使用漂亮的 TabHeader 和 TabContent 来模拟选项卡控件。该控件应如下所示:



这是通过将第一个标题的`Margin' - "HOME"设置为 Margin="2 0 2 -1"来实现的。

问题:如果我将窗口的大小重新调整为某个较小的宽度，则标题项会在视觉上剪辑其内容。结果如下:



我真的很想知道为什么会发生这种情况以及我如何避免这种情况。

证明问题的示例xaml:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="550" Width="525">
<Grid Margin="0 50">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Border  BorderThickness="1" BorderBrush="Black" Grid.Row="1"/>

    <StackPanel Orientation="Horizontal" Grid.Row="0">
        <Border Width="50" Margin="2 0 2 -1" BorderThickness="1 1 1 0" BorderBrush="Black" Background="White">
            <TextBlock Text="HOME" />
        </Border>
        <Border Width="150" Margin="2 -20" Height="20" BorderThickness="1 1 1 0" >
            <TextBlock Text="EDIT" />
        </Border>
    </StackPanel>
</Grid>

Answer 1

当您调整窗口大小时，XAML 渲染器重绘任意灵活(仍然可以调整大小或相对移动)。当您达到 StackPanel 宽度限制(受其包含的内容或固定宽度的限制)时，重绘时控件将被忽略(即使它包含的内容)，并且渲染器会继续重绘其他灵活控件；在你的情况下:第一个边界。这就是为什么突然出现在其他人之上的原因。

将边距移动到 StackPanel 就可以了:

<StackPanel Orientation="Horizontal" Grid.Row="0" Margin="2 0 2 -1">
            <Border Width="50"  BorderThickness="1 1 1 0" BorderBrush="Black" Background="White">
                <TextBlock Text="HOME" />
            </Border>
            <Border Width="150" Height="20" BorderThickness="1 1 1 0" >
                <TextBlock Text="EDIT" />
            </Border>
        </StackPanel>