Walkthrough: Creating a Resizable Application by Using the WPF Designer
You can use the GridSplitter control in conjunction with the Grid container control to create window layouts that are resizable by the user at run time. For example, in an application that has a UI divided into areas, the user can drag a splitter to make an area larger, depending on what the user wants to see more of. In this walkthrough, you create the layout for a messenger-style application.
In this walkthrough, you perform the following tasks:
Create a WPF application.
Configure the default grid panel.
Add a horizontal GridSplitter.
Add a dock panel and controls.
Add a grid panel and controls.
Test the application.
The following illustration shows how your application will appear.
.png "A resizable application")
Note
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.
Prerequisites
You need the following components to complete this walkthrough:
- Visual Studio 2008
Creating the Project
The first procedure is to create the project for the application.
To create the project
Create a new WPF Application project in Visual Basic or Visual C# named ResizableApplication. For more information, see How to: Create a New WPF Application Project.
Note
You will not write any code in this walkthrough. The language that you choose for your project is the language that is used for the code-behind pages in your application.
Window1.xaml opens in the WPF Designer.
On the File menu, click Save All.
Configuring the Default Grid Panel Control
By default, the new WPF application contains a Window with a Grid panel. To follow best practices, you dedicate this Grid to the GridSplitter. The plan for the grid is as follows:
Row 1: A Dock panel for the first part of the layout.
Row 2: A GridSplitter.
Row 3: A Grid panel for the rest of the layout.
To configure the default grid panel control
In Design view, select the Grid. For more information, see How to: Select and Move Elements on the Design Surface.
In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor appears.
Click Add three times to add three rows.
Set the Height property of the second row to Auto.
Set the MinHeight property of the third row to 70.
Click OK to close the Collection Editor and return to the WPF Designer.
Now there are three rows in the grid, but only two rows appear. The row whose Height property is set to Auto is temporarily hidden because it does not have any content. For this walkthrough, that is fine. To avoid this in the future, you can use star sizing while you work, and change to Auto when you are done.
On the File menu, click Save All.
Adding a Horizontal GridSplitter
Next you add the GridSplitter.
To add a horizontal GridSplitter
In Design view, select the Grid.
From the Toolbox, drag a GridSplitter control onto the Grid.
In the Properties window, set the following properties for the GridSplitter:
Property
Value
ResizeDirection
Rows
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
1
Grid.RowSpan
1
Width
Auto
Height
10
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
On the File menu, click Save All.
Adding a Dock Panel and Controls
Next you add a DockPanel and set up the layout of the top half of the application. The DockPanel contains a Label and a RichTextBox. You set the color of the Label and the RichTextBox to highlight the size of the top half of the application when you move the GridSplitter.
To add a dock panel and controls
In Design view, select the Grid.
In the Properties window, set the following properties for the DockPanel:
Property
Value
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
In the Properties window, set the following properties for the Label:
Property
Value
Background
Blue (#FF0000FF)
Foreground
White (#FFFFFFFF)
Content
Display
DockPanel.Dock
Top
Width
Auto
Height
23
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
In Design view, select the DockPanel.
Tip
Because there are multiple controls covering the grid, you can use the TAB key, the Document Outline window, or XAML view to more easily select the DockPanel. For more information, see How to: Select and Move Elements on the Design Surface.
From the Toolbox, drag a RichTextBox control onto the DockPanel.
In the Properties window, set the following properties for the RichTextBox:
Property
Value
Background
LightBlue (#FFADD8E6)
DockPanel.Dock
Bottom
Width
Auto
Height
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
IsReadOnly
True (Checked)
On the File menu, click Save All.
Adding a Grid Panel and Controls
Next you add a Grid and set up the layout of the bottom half of the application. The Grid contains a Button and a RichTextBox. You set the color of the RichTextBox to highlight the size of the bottom half of the application when you move the GridSplitter.
To add a grid panel and controls
In Design view, select the Grid.
In the Properties window, set the following properties for the new Grid:
Property
Value
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
2
Grid.RowSpan
1
Width
Auto
Height
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor appears.
Click Add two times to add two columns.
Set the Width property of the second column to Auto.
Click OK to close the Collection Editor and return to the WPF Designer.
In the Properties window, set the following properties for the Button:
Property
Value
Content
OK
Grid.Column
1
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
Width
60
Height
60
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
5
From the Toolbox, drag a RichTextBox control onto the Grid.
In the Properties window, set the following properties for the RichTextBox:
Property
Value
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)
On the File menu, click Save All.
Testing the Application
The final procedure is to test the application.
To test the application
On the Debug menu, click Start Debugging.
The application starts and Window1 appears.
Resize the window both vertically and horizontally.
The top and bottom halves of the application expand and contract to use the available space.
Drag the splitter to resize the parts of the application. Make one part of the application small compared to the other.
Resize the window again.
The top and bottom halves of the application expand and contract proportionally based on the location of the splitter.
Drag the splitter as far to the top of the application as possible.
The top half of the application disappears and only the bottom half appears.
Drag the splitter as far to the bottom of the application as possible.
The bottom half of the application still appears. This is because you set the MinHeight property of the third row to 70.
Note
70 = 60 (the height of the button) + 5 (the top margin of the button) + 5 (the bottom margin of the button)
Close the window.
Putting it all Together
The following is the completed Window1.xaml file:
<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>
Next Steps
The application that you created in this walkthrough contained a horizontal splitter. You can experiment by creating the same application by using a vertical splitter instead.
The application that you created demonstrated layout techniques only. You can experiment by adding code to make the application functional. For example, you can add code to the button click event that copies text from the bottom text box to the top text box.
See Also
Tasks
How to: Create User-Resizable Applications with GridSplitter
Concepts
Layout with Absolute and Dynamic Positioning