WPF GridSplitter如何分割/调整两个ListBox的大小？

Question

我有一个包含7行的网格。 第0行是2个按钮的组合 第1行是对象的ListBox 第2行是3个按钮的组合 第3行是2个按钮的组合 第4行是GridSplitter所在的位置 第5行是2个按钮的组合 第6行是对象的ListBox

我希望GridSplitter能够上下滑动，调整两个ListBox的大小。现在它已经位于自己的行中，但当我滑动它时，它会在到达第4行（它自己的行）顶部时冻结，并在向下扩展第4行时创建白色空间。

我只需要让这个分隔条上下滑动并调整每个ListBox的大小。目前，如果ListBox的视图过大，它们会出现垂直滚动条。

有什么想法吗？

- Shafique

Answer 1

这里有一些XAML代码，展示了如何使用GridSplitter，就像你描述的那样：

<Grid VerticalAlignment="Stretch">  
  <Grid.RowDefinitions>
    <RowDefinition Height="10" />
    <RowDefinition Height="10" />
    <RowDefinition Height="10" />
    <RowDefinition Height="10" />
    <RowDefinition Height="10" />
    <RowDefinition Height="10" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Rectangle Grid.Row="0" Fill="Red" />
  <Rectangle Grid.Row="1" Fill="Orange" />
  <Rectangle Grid.Row="2" Fill="Yellow" />
  <Rectangle Grid.Row="3" Fill="Green" />
  <Rectangle Grid.Row="4" Fill="Blue" />
  <Rectangle Grid.Row="5" Fill="LightBlue" />

  <ListBox Grid.Row="6" Background="Indigo">
    <ListBoxItem>Hello</ListBoxItem>
    <ListBoxItem>World</ListBoxItem>
  </ListBox>

  <GridSplitter Grid.Row="7" Height="5" Background="Gray"
                VerticalAlignment="Top" HorizontalAlignment="Stretch" />

  <ListBox Grid.Row="7" Background="Violet" Margin="0,5,0,0">
    <ListBoxItem>Hello</ListBoxItem>
    <ListBoxItem>World</ListBoxItem>
  </ListBox>
</Grid>

避免将GridSplitter放在自己的行中。将其放置在现有行内，并将其对齐方式设置为顶部（如果在上方单元格中，则设置为底部），水平拉伸。请注意，我已将其高度设置为5，然后给第二个ListBox一个上边距为5，以便两个元素都不会隐藏彼此的任何部分。

希望这可以帮到您。

- Drew Noakes

---

我尝试在我的代码中实现这个功能，但好像不起作用。GridSplitter只是静止不动，无法向上或向下移动。我有3行高度设置为自动：一行带有元素的StackPanel，一行带有GridSplitter，以及另一行带有另一个元素的StackPanel。有什么想法为什么它无法滚动？ - Shafique

嗨，Shafique。你实现GridSplitter的方式肯定有所不同。尝试将上面的所有XAML复制并粘贴到Kaxaml中的Page元素的子元素中。你会发现GridSplitter按预期工作。从那里开始，你可以迁移XAML以更接近你的代码，并找到确切的问题。http://www.kaxaml.com - Drew Noakes

我看过一些愚蠢的例子，他们在VerticalAlignment="Center"上有问题。那不起作用。我不确定什么时候会起作用，但对我来说没有。将其设置为顶部可以解决问题。我仍然不太确定它是如何工作的。我更喜欢SplitterPanel的简单性，但没办法... - Simon_Weaver

Answer 2

我也遇到了同样的问题：水平的GridSplitter（在它自己的行中）无法移动，而我的垂直的GridSplitter却可以正常工作。我发现添加HorizontalAlignment="Stretch"属性可以解决我的困难。

不起作用的XAML：

<GridSplitter Grid.Row="2" Grid.Column="2" Height="5" ResizeDirection="Rows" VerticalAlignment="Center" />

工作中的XAML：

    <GridSplitter Grid.Row="2" Grid.Column="2" Height="5" ResizeDirection="Rows" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>

我还发现，如果我运行了项目，关闭了项目应用程序，然后将光标放在XAML行上，而该行中的GridSplitter不起作用（即在更改之前），则GridSplitter的选择窗口将显示在列的末尾。您还可以通过将BackGround属性更改为颜色（例如“红色”）来演示此操作。

在这里提到了设置HorizontalAlignment属性（但没有强调）： http://msdn.microsoft.com/en-us/library/ms743457.aspx

- Tim