WPF - 具有三列的 GridSplitter答案

【问题标题】：WPF - GridSplitter with three columnsWPF - 具有三列的 GridSplitter
【发布时间】：2010-12-26 01:56:27
【问题描述】：

我有一个带有 3 列网格的应用程序。第一列和第二列之间的网格拆分器工作得很好。为了让拆分器位于第二列和第三列之间，我为拆分器制作了一个列。（所以现在第三列实际上是第四列。）

当我调整其他列的大小时，它们也会缩小。我认为这是因为我将它们设置为相对大小。但我不知道如何解决它。

这是我的问题的 XAML Pad Ready 示例。将此插入 XAML 垫，然后尝试将最后一列的大小调整为更小。

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Width="10" />
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="1">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="2" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="3" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>

感谢您的帮助！

编辑：有人建议将两个拆分器放在各自的列中可能会解决此问题。我试过了，现在第一个拆分器也像第二个拆分器一样缩小列。

这是该示例的 XAML Pad 代码：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Grid.Column="1" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="2">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="3" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="4" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>

【问题讨论】：

标签： wpf layout gridsplitter

【解决方案1】：

GridSplitter 应放置在 Grid 中它自己的列中。我不确定我是否完全理解您的问题，但我建议您尝试使用 5 ColumnDefinitions 创建一个网格。使用第 1 列和第 2 列放置 GridSplitters，第 0、2 和 4 列放置内容。

GridSplitter MSDN doc 提供了如何执行此操作的示例。

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>
...
<GridSplitter Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Stretch"
          Background="Black" 
          ShowsPreview="True"
          Width="5"
          />

【讨论】：

我试过了，现在两列都坏了。有关更改的 XAML，请参阅我更新的问题。
另请注意，此问题仅出现在 3 列情况下。两列工作得很好......
我猜你没有像我发布的示例那样尝试 HorizontalAlignment="Center"。 :) 很高兴你解决了这个问题。

【解决方案2】：

尝试为两个分离器设置HorizontalAlignment="Center" - 不知道为什么将其设置为“正确”会导致行为变得如此古怪，但更改它对我有用:)

【讨论】：

更新：我认为这与 GridSplitter 的 ResizeBehaviour 属性有关，如果未指定，则默认为 BasedOnAlignment，因此只有 GridSplitter 列右侧的列会被调整大小......需要深入挖掘msdn doco 确定...