WPF负边距显示不正确

我试图用一个漂亮的TabHeader和TabContent来模拟一个选项卡控件。控件应如下所示：

这是通过将第一个页眉的“边距”设置为“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>

---

调整窗口大小时，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>

---

这是一个包含两列的解决方案

   <Grid Margin="0,50">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Border Grid.ColumnSpan="2"  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="50" Margin="2" Height="20" BorderThickness="1,1,1,0" >
            <TextBlock Text="EDIT" />
        </Border>
    </StackPanel>
</Grid>

这使得网格不会被窗口大小剪裁

编辑添加的附加列以将边框推到边缘

干杯，

---

Eric

我认为这是

StackPanel

布局代码中的一个奇怪之处。您应该能够通过将负边距移动到

StackPanel

本身而不是以下选项卡来解决此问题：

<Grid Margin="0 50" UseLayoutRounding="True">
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Border BorderThickness="1" BorderBrush="#7FFF0000" Grid.Row="1" />
  <StackPanel Orientation="Horizontal" Grid.Row="0" Margin="0,0,0,-1">
    <Border Width="50" Margin="2 0 2 0" BorderThickness="1 1 1 0" BorderBrush="Lime" Background="Yellow">
      <TextBlock Text="HOME" />
    </Border>
    <Border Width="150" Margin="2 0 2 0" Height="20" BorderBrush="Blue" BorderThickness="1 1 1 0" Background="Yellow">
      <TextBlock Text="EDIT" />
    </Border>
  </StackPanel>
</Grid>

---

请注意，我更改了颜色以帮助进行可视化调试。这是一项有用的技术，但您可能希望将其更改回：）。

脑海中出现的一些想法：1。不捕捉设备像素。2.边框在StackPanel之后渲染，因此具有更高的z顺序。3.StackPanel绘图区域不会失效，因此不会重新绘制。我想自己知道答案。您所做的修改使水平

StackPanel

小于最小窗口大小，您无法再重现该问题，但它仍然存在。只需将标题文本加长一点+谢谢你的帮助。哦，你比我强！但我不相信你的解释。WPF合成器应该保持元素的z顺序，而不管哪些元素需要无效。这似乎不仅仅是一个简单的z排序问题：取原始代码，在第二个选项卡上设置

边框笔刷

，然后观察第二个选项卡的上边框是如何被剪裁的，尽管没有被遮挡和

ClipToBounds

没有被设置在任何位置。我不能失去将控件拉伸到所有可用水平空间的选项。无法使用您的解决方案，但它有效。我修改了我的解决方案，将内容区域扩展为水平拉伸。