Share via


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.

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 Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010

Creating the Project

The first procedure is to create the project for the application.

To create the project

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

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

  1. In Design view, select the Grid. For more information, see How to: Select and Move Elements on the Design Surface.

  2. In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.

    The Collection Editor appears.

  3. Click Add three times to add three rows.

  4. Set the Height property of the second row to Auto.

  5. Set the MinHeight property of the third row to 70.

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

  7. On the File menu, click Save All.

Adding a Horizontal GridSplitter

Next you add the GridSplitter.

To add a horizontal GridSplitter

  1. In Design view, select the Grid.

  2. From the Toolbox, drag a GridSplitter control onto the Grid.

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

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

  1. In Design view, select the Grid.

  2. From the Toolbox, drag a DockPanel control onto the Grid.

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

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

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

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

  7. From the Toolbox, drag a RichTextBox control onto the DockPanel.

  8. 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)

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

  1. In Design view, select the Grid.

  2. From the Toolbox, drag a Grid control onto the Grid.

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

  4. In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.

    The Collection Editor appears.

  5. Click Add two times to add two columns.

  6. Set the Width property of the second column to Auto.

  7. Click OK to close the Collection Editor and return to the WPF Designer.

  8. From the Toolbox, drag a Button control onto the Grid.

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

  10. From the Toolbox, drag a RichTextBox control onto the Grid.

  11. 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)

  12. On the File menu, click Save All.

Testing the Application

The final procedure is to test the application.

To test the application

  1. On the Debug menu, click Start Debugging.

    The application starts and MainWindow appears.

  2. Resize the window both vertically and horizontally.

    The top and bottom halves of the application expand and contract to use the available space.

  3. Drag the splitter to resize the parts of the application. Make one part of the application small compared to the other.

  4. Resize the window again.

    The top and bottom halves of the application expand and contract proportionally based on the location of the splitter.

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

  6. 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)

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

See Also

Tasks

How to: Create User-Resizable Applications with GridSplitter

Concepts

Layout with Absolute and Dynamic Positioning

Other Resources

Layout Walkthroughs