演练：使用 WPF 设计器创建大小可调的应用程序
可将 GridSplitter 控件与 Grid 容器控件结合使用，以创建在运行时可由用户调整大小的窗口布局。 例如，在 UI 划分为多个区域的应用程序中，用户可以根据自己的需要来拖动拆分器，从而使某个区域更大。 在本演练中，您将为 Messenger 样式的应用程序创建布局。
在本演练中，您将执行下列任务：
创建一个 WPF 应用程序。
配置默认的网格面板。
添加一个水平 GridSplitter。
添加停靠面板和控件。
添加网格面板和控件。
测试应用程序。
下面的插图说明您的应用程序将如何显示。
.png "可调整大小的应用程序")
提示
显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您现用的设置或版本。 若要更改设置，请在“工具”菜单上选择“导入和导出设置”。 有关更多信息，请参见 使用设置。
系统必备
您需要以下组件来完成本演练：
- Visual Studio 2010
创建项目
第一个过程是为该应用程序创建项目。
创建项目
使用 Visual Basic 或 Visual C# 创建一个名为 ResizableApplication 的新 WPF 应用程序项目。 有关更多信息，请参见如何：创建新的 WPF 应用程序项目。
提示
在本演练中，您将不会编写任何代码。 为项目选择的语言是用于应用程序中代码隐藏页面的语言。
MainWindow.xaml 将在 WPF 设计器中打开。
在**“文件”菜单上，单击“全部保存”**。
配置默认的 Grid Panel 控件
默认情况下，新的 WPF 应用程序包含一个带有 Grid 面板的 Window。 为了遵从最佳做法，您将此 Grid 专用于 GridSplitter。 网格计划如下：
第 1 行：一个用于布局第一部分的 Dock 面板。
第 2 行：一个 GridSplitter。
第 3 行：一个用于布局其余部分的 Grid 面板。
配置默认的 Grid Panel 控件
在“设计”视图中选择 Grid。 有关更多信息，请参见如何：在设计图面上选择和移动元素。
在**“属性”**窗口中，找到 RowDefinitions 属性，并单击“属性值”列中的省略号按钮。
此时将会显示**“集合编辑器”**。
单击**“添加”**三次以添加三行。
将第二行的 Height 属性设置为 Auto。
将第三行的 MinHeight 属性设置为 70。
单击**“确定”以关闭“集合编辑器”**并返回到 WPF 设计器。
现在该网格中有三行，但仅有两行显示。 其 Height 属性被设置为 Auto 的行会暂时隐藏，因为它没有任何内容。 对于本演练，这样是可以的。 为了避免将来出现这种情况，您可以在工作时使用星号调整大小，然后在完成后改成“Auto”。
在**“文件”菜单上，单击“全部保存”**。
添加水平的 GridSplitter
然后添加 GridSplitter。
添加水平的 GridSplitter
在“设计”视图中选择 Grid。
将一个 GridSplitter 控件从**“工具箱”**拖到 Grid 上。
在**“属性”**窗口中，设置 GridSplitter 的下列属性：
Property
值
ResizeDirection
Rows
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
1
Grid.RowSpan
1
宽度
Auto
高度
10
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
在**“文件”菜单上，单击“全部保存”**。
添加停靠面板和控件
接下来您将添加一个 DockPanel 并设置应用程序上半部分的布局。 DockPanel 包含一个 Label 和一个 RichTextBox。 设置 Label 和 RichTextBox 的颜色，以便在移动 GridSplitter 时突出显示应用程序上半部分的大小。
添加停靠面板和控件
在“设计”视图中选择 Grid。
在**“属性”**窗口中，设置 DockPanel 的下列属性：
Property
值
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
LastChildFill
True (Checked)
宽度
Auto
高度
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
在**“属性”**窗口中，设置 Label 的下列属性：
Property
值
背景
Blue (#FF0000FF)
Foreground
White (#FFFFFFFF)
Content
显示
DockPanel.Dock
Top
宽度
Auto
高度
23
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
在“设计”视图中选择 DockPanel。
提示
由于有多个控件覆盖网格，因此可以使用 Tab 键、“文档大纲”窗口或 XAML 视图更加轻松地选择 DockPanel。 有关更多信息，请参见如何：在设计图面上选择和移动元素。
将一个 RichTextBox 控件从**“工具箱”**拖到 DockPanel 上。
在**“属性”**窗口中，设置 RichTextBox 的下列属性：
Property
值
背景
LightBlue (#FFADD8E6)
DockPanel.Dock
Bottom
宽度
Auto
高度
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
IsReadOnly
True (Checked)
在**“文件”菜单上，单击“全部保存”**。
添加网格面板和控件
接下来您将添加一个 Grid 并设置应用程序下半部分的布局。 Grid 包含一个 Button 和一个 RichTextBox。 设置 RichTextBox 的颜色，以便在移动 GridSplitter 时突出显示应用程序下半部分的大小。
添加网格面板和控件
在“设计”视图中选择 Grid。
在**“属性”**窗口中设置新 Grid 的下列属性：
Property
值
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
2
Grid.RowSpan
1
宽度
Auto
高度
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
在**“属性”**窗口中，找到 ColumnDefinitions 属性，并单击“属性值”列中的省略号按钮。
此时将会显示**“集合编辑器”**。
单击两次**“添加”**添加两列。
将第二列的 Width 属性设置为 Auto。
单击**“确定”以关闭“集合编辑器”**并返回到 WPF 设计器。
在**“属性”**窗口中，设置 Button 的下列属性：
Property
值
Content
确定
Grid.Column
1
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
宽度
60
高度
60
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
5
将一个 RichTextBox 控件从**“工具箱”**拖到 Grid 上。
在**“属性”**窗口中，设置 RichTextBox 的下列属性：
属性
值
背景
PaleGoldenrod (#FFEEE8AA)
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
宽度
Auto
高度
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
IsReadOnly
False (Unchecked)
在**“文件”菜单上，单击“全部保存”**。
测试应用程序
最后一个过程是测试该应用程序。
测试应用程序
在**“调试”菜单上，单击“启动调试”**。
该应用程序将启动并将显示**“MainWindow”**。
在垂直方向和水平方向调整该窗口的大小。
应用程序的上半部分和下半部分展开，并按协定使用可用空间。
拖动拆分器，以调整应用程序各个部分的大小。 使应用程序的一部分比另一部分小。
再次调整窗口的大小。
应用程序的上半部分和下半部分展开，并根据拆分器的位置按协定成比例分布。
将拆分器尽量向应用程序顶部拖动。
应用程序的上半部分消失，只显示下半部分。
将拆分器尽量向应用程序底部拖动。
应用程序的下半部分仍然显示。 这是因为您将第三行的 MinHeight 属性设置为 70。
提示
70 = 60（按钮高度）+ 5（按钮的上边距）+ 5（按钮的下边距）
- 关闭该窗口。
汇总所有内容
下面是完成的 MainWindow.xaml 文件：
<Window x:Class="MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition MinHeight="70" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
<Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
<RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
</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" Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
<RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
</Grid>
</Grid>
</Window>
后续步骤
您在本演练中创建的应用程序包含一个水平拆分器。 可以改用垂直拆分器来创建相同的应用程序，以进行试验。
您创建的应用程序只演示了布局技术。 您可以通过添加代码进行试验，以使应用程序具有功能。 例如，您可以向按钮单击事件中添加代码，从而将按钮文本框中的文本复制到顶部文本框中。
请参见
任务
如何：用 GridSplitter 创建用户可调整大小的应用程序