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