Walkthrough: Creating a Resizable Application by Using the WPF Designer

Article
05/09/2012

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

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.

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 2012 RC

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.

MainWindow.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.
From the Toolbox, drag a DockPanel control onto 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

From the Toolbox, drag a Label control onto the DockPanel.

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.
From the Toolbox, drag a Grid control onto 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.
From the Toolbox, drag a Button control onto the Grid.
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.

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

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 MainWindow 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 MainWindow.xaml file:

<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>

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.