Question

我正在尝试使用漂亮的TabHeader和TabContent来模拟制表符控件。控件看起来应该是这样的：

desired header border

这是通过将第一个标题的“边距” - “HOME”设置为Margin =“2 0 2 -1”来实现的。

问题：如果我将窗口重新调整为某个较小的宽度，则标题项会直观地剪切其内容。结果如下：

undesired border

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

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

Answer 2

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

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

这使得网格不会被窗口大小限制。

EDIT添加了额外的列以将边框推到边缘。

干杯，埃里克

Answer 3

我认为这是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>

请注意，我更改了颜色以协助进行可视化调试。这是一种有用的技术，但你可能想要改回它们：）。

WPF负边距未正确显示

3 个答案: