演练：使用 WPF 设计器创建大小可调的应用程序
[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]
可以使用 Grid 容器控件结合使用 GridSplitter 控件创建可由用户调整大小的在运行时的 windows 窗体。 例如，在具有的应用程序 UI 划分为区域，用户可以拖动拆分器，从而使某个区域根据自己的需要来更多。 在本演练中，将创建一个 Messenger 风格的应用程序的格式。
在本演练中，您将执行下列任务:
创建一个 WPF 应用程序。
配置默认的 grid panel。
添加水平的 GridSplitter。
添加停靠面板和控件。
添加网格面板和控件。
测试应用程序。
下图显示应用程序将如何显示。
.png "可调整大小的应用程序")
备注
您看到的对话框和菜单命令可能会与 " 帮助 " 中的描述不同具体取决于您现用的设置或版本。若要更改设置，请选择在 工具 菜单的 导入和导出设置 。有关更多信息，请参见 Visual Studio 设置。
系统必备
您需要以下组件来完成本演练:
- Visual Studio 2012 RC
创建项目
第一个过程是为该应用程序创建项目。
创建项目
创建新的 WPF 名为 ResizableApplication的应用程序项目在 Visual Basic 或 Visual C#。 有关更多信息，请参见 如何：创建新的 WPF 应用程序项目。
备注
不将编写在本演练中的任何代码。为项目选择的语言是用于代码隐藏页面的应用程序的语言。
在 MainWindow.xaml WPF Designer打开。
在 文件 菜单上，单击 全部保存。
配置默认的 grid panel 控件
默认情况下，新的 WPF 应用程序包含与 Grid 面板的 Window 。 为了遵从最佳做法，您将此专用于 GridGridSplitter。 网格计划如下:
第 1 行:布局第一部分的一个 Dock 面板。
第 2 行: GridSplitter。
第 3 行:一个用于布局其余部分的 Grid 面板。
配置默认的 grid panel 控件
在设计视图中，选择 Grid。 有关更多信息，请参见 如何：在设计图面上选择和移动元素。
在 属性 窗口中，找到 RowDefinitions 属性，并单击 " 属性值 " 列中的省略号按钮。
集合编辑器 显示。
单击 add 三次以添加三行。
将第二行的 height 属性设置为 auto。
将第三行的 MinHeight 属性设置为 70。
单击 确定 结束 集合编辑器 并返回到 WPF Designer。
现在该网格中有三行，但是，仅有两行显示。 其 height 属性设置为 auto 的行会暂时隐藏，因为它没有任何内容。 对于本演练，这样是可以的。 在将来为避免此问题，可以使用星号大小调整，在中工作时，和改成 " auto，则在执行时。
在 文件 菜单上，单击 全部保存。
添加水平的 GridSplitter
接下来将向 GridSplitter。
添加水平的 GridSplitter
在设计视图中，选择 Grid。
从 工具箱，将在 Grid上的一个 GridSplitter 控件。
在 属性 窗口中，将 GridSplitter的下列属性:
属性
value
ResizeDirection
行
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
1
Grid.RowSpan
1
宽度
自动
高度
10
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
0
在 文件 菜单上，单击 全部保存。
添加停靠面板和控件
接下来将向 DockPanel 和设置应用程序的上半部分的布局。 DockPanel 包含 Label 和 RichTextBox。 ，以便在移动 GridSplitter时，可以设置 Label 和 RichTextBox 的颜色显示应用程序的上半部分的大小。
添加停靠面板和控件
在设计视图中，选择 Grid。
在 属性 窗口中，将 DockPanel的下列属性:
属性
value
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
LastChildFill
true (checked)
宽度
自动
高度
自动
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
0
在 属性 窗口中，将 Label的下列属性:
属性
value
背景
蓝色 (#FF0000FF)
前景
white (#FFFFFFFF)
内容
显示
DockPanel.Dock
顶
宽度
自动
高度
23
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
0
在设计视图中，选择 DockPanel。
提示
由于有多个控件复盖网格，您可以更轻松地使用 tab 键、 文档大纲 窗口或 XAML 视图。选择 DockPanel。有关更多信息，请参见 如何：在设计图面上选择和移动元素。
从 工具箱，将在 DockPanel上的一个 RichTextBox 控件。
在 属性 窗口中，将 RichTextBox的下列属性:
属性
value
背景
lightblue (#FFADD8E6)
DockPanel.Dock
底
宽度
自动
高度
自动
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
0
IsReadOnly
true (checked)
在 文件 菜单上，单击 全部保存。
添加网格面板和控件
接下来将向 Grid 和设置应用程序下半部分的布局。 Grid 包含 Button 和 RichTextBox。 ，以便在移动 GridSplitter时，可以设置 RichTextBox 的颜色显示应用程序下半部分的大小。
添加网格面板和控件
在设计视图中，选择 Grid。
在 属性 窗口中，将新的 Grid的下列属性:
属性
value
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
2
Grid.RowSpan
1
宽度
自动
高度
自动
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
0
在 属性 窗口中，找到 ColumnDefinitions 属性，并单击 " 属性值 " 列中的省略号按钮。
集合编辑器 显示。
单击 add 两次添加两列。
将第二列的宽度属性设置为 auto。
单击 确定 结束 集合编辑器 并返回到 WPF Designer。
在 属性 窗口中，将 Button的下列属性:
属性
value
内容
确定
Grid.Column
1
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
宽度
60
高度
60
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
5
从 工具箱，将在 Grid上的一个 RichTextBox 控件。
在 属性 窗口中，将 RichTextBox的下列属性:
属性
value
背景
PaleGoldenrod (#FFEEE8AA)
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
宽度
自动
高度
自动
HorizontalAlignment
拉伸
VerticalAlignment
拉伸
页边距
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>
后续步骤
在本演练中创建的应用程序包含一个水平拆分器。 可以通过创建同一应用程序测试通过使用一个垂直拆分器。
您创建的应用程序只演示了布局技术。 您可以通过添加代码使应用程序测试功能。 例如，可以添加代码来复制底部文本框 text 到顶部文本框中的按钮单击事件。
请参见
任务
如何：用 GridSplitter 创建用户可调整大小的应用程序