4

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

所需的标题边框

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

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

不需要的边界

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

用于证明问题的示例 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>

4

3 回答 3

2

当您调整窗口大小时，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>
于 2013-10-08T16:18:23.887 回答
1

这是一个有 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>

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

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

干杯，埃里克

于 2013-10-08T16:37:58.753 回答
0

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

请注意，我更改了颜色以帮助进行可视化调试。这是一种有用的技术，但您可能希望将它们改回来 :)。

于 2013-10-08T18:27:58.527 回答