如何：用 GridSplitter 创建用户可调整大小的应用程序

项目
05/28/2012

[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

可将 GridSplitter 控件与 Grid 容器控件结合使用，以创建在运行时可由用户调整大小的窗口布局。例如，在 UI 划分为多个区域的应用程序中，用户可以根据自己的需要来拖动拆分器，从而使某个区域更大。

将 GridSplitter 控件添加到 Grid 中时，与其他任何子控件一样，该控件将是网格控件的子控件并且必须放置在行和列中。 GridSplitter 必须具有非零的宽度或高度，以便在运行时用户可以抓住并拖动它。

下面介绍有关 GridSplitter 的一些最佳做法：

将 GridSplitter 放在一个不包含其他任何控件的专用行或专用列中。
将包含 GridSplitter 的行的高度或者列的宽度设置为 Auto。
专为 GridSplitter 指定一个 Grid。向 Grid 中添加其他容器面板以完成布局。

创建垂直 GridSplitter

在“设计”视图中选择 Grid。有关更多信息，请参见如何：在设计图面上选择和移动元素。
在要显示 GridSplitter 的位置添加一列。有关更多信息，请参见如何：向网格中添加行和列。

备注

在某些情况下，可能很难在设计器中放置行和列。在这种情况下，可以通过使用 XAML 编辑器配置 Grid。有关 XAML 标记示例，请参见本主题结尾处的“示例”一节。
从**“工具箱”**中将一个 GridSplitter 控件拖到添加的列中。

在**“属性”**窗口中，设置 GridSplitter 的下列属性：

属性	值	可能的值
ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
ResizeDirection	Columns	Auto 列 Rows
Grid.Column	要放置 GridSplitter 的列。（列号从零开始。）
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	Grid 中的总行数。
宽度	一个不是零的数字。例如，10。
高度	Auto
HorizontalAlignment	Stretch	Left Center 向右 Stretch
VerticalAlignment	Stretch	Top Center Bottom Stretch
Margin	0

在“设计”视图中选择 Grid。
将包含 GridSplitter 的 ColumnDefinition 的 Width 设置为 Auto。

创建水平 GridSplitter

在“设计”视图中选择 Grid。有关更多信息，请参见如何：在设计图面上选择和移动元素。
在要显示 GridSplitter 的位置添加一行。有关更多信息，请参见如何：向网格中添加行和列。

备注

在某些情况下，可能很难在设计器中放置行和列。在这种情况下，可以通过使用 XAML 编辑器配置 Grid。有关 XAML 标记示例，请参见本主题结尾处的“示例”一节。
从**“工具箱”**中将一个 GridSplitter 控件拖到添加的行中。

在**“属性”**窗口中，设置 GridSplitter 的下列属性：

属性	值	可能的值
ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
ResizeDirection	Rows	Auto 列 Rows
Grid.Column	0
Grid.ColumnSpan	Grid 中的总列数。
Grid.Row	要放置 GridSplitter 的行。（行号从零开始。）
Grid.RowSpan	1
宽度	Auto
高度	一个不是零的数字。例如，10。
HorizontalAlignment	Stretch	Left Center 向右 Stretch
VerticalAlignment	Stretch	Top Center Bottom Stretch
Margin	0

在“设计”视图中选择 Grid。
将包含 GridSplitter 的 RowDefinition 的 Height 设置为 Auto。

示例

下面的 XAML 创建一个水平 GridSplitter：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

请参见

通过

如何：用 GridSplitter 创建用户可调整大小的应用程序

创建垂直 GridSplitter

创建水平 GridSplitter

示例

请参见

任务

参考

其他资源

其他资源