Walkthrough: Constructing a Dynamic Layout
In dynamic positioning, you arrange child elements by specifying how they should be arranged and how they should wrap relative to their parent. You can also set windows and controls to expand automatically when their content expands. For more information, see Layout with Absolute and Dynamic Positioning.
The WPF Designer for Visual Studio provides many Panel controls that support dynamic positioning. Panel controls can be combined by adding one panel control as the child of another. You can use the following panel controls to position elements dynamically in your applications:
Important
Whenever possible, it is preferable to use a dynamic layout. Dynamic layouts are the most flexible, adapt to content changes such as localization, and allow the end user the most control over their environment. To see an example of an absolute layout, see Walkthrough: Constructing a Layout Based on Absolute Positioning.
In this walkthrough, you perform the following tasks:
Create a WPF application.
Configure the default Grid panel control.
Add controls to the panel.
Test the layout.
The following illustration shows how your application will appear.
.png "A dynamic layout")
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
Create a new WPF Application project in Visual Basic or Visual C# named DynamicLayout. 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.
In Design view, select the window. For more information, see How to: Select and Move Elements on the Design Surface.
In the Properties window, set the following properties for the Window:
Property
Value
Width
400
Height
200
SizeToContent
WidthAndHeight
Tip
You can also use the resize handles to resize the window in Design view.
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. In this procedure you add four rows and four columns to the grid. You set the width of each column to *, so that the available width is divided evenly among the four columns. You set the height of three of the rows to Auto, so that they are sized to fit their content. You set the height of one of the rows to *, so that it uses the remaining available height.
To add a panel control
In Design view, select the grid.
(Optional) In the Properties window, locate the ShowGridLines property and select the check box.
When the application runs, the gridlines will appear on the window. This is useful for debugging, but you should clear the ShowGridLines property check box for production code.
In the Properties window, locate the ColumnDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor dialog box appears.
Click Add four times to add four columns.
Set the Width property of the first row to Auto.
Set the Width property of the second row to *.
Set the Width property of the third row to Auto.
Set the Width property of the fourth row to Auto.
Click OK to close the Collection Editor and return to the WPF Designer.
Now there are four columns in the grid, but only one column appears. The columns whose Width properties are set to Auto are temporarily hidden because they do 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.
In the Properties window, locate the RowDefinitions property, and click the ellipsis button in the property value column.
The Collection Editor dialog box appears.
Click Add four times to add four rows.
Set the Height property of the first row to Auto.
Set the Height property of the second row to Auto.
Set the Height property of the third row to *.
Set the Height property of the fourth row to Auto.
Click OK to close the Collection Editor and return to the WPF Designer.
Now there are four rows in the grid, but only one row appears. The rows whose Height properties are set to Auto are temporarily hidden because they do 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 Controls to the Panel
Next you add controls to the panel and use the Column and Row attached properties of the Grid to position them dynamically.
To add controls to the panel
From the Toolbox, in the Common group, drag a Label control onto the Grid.
In the Properties window, set the following properties for the Label:
Property
Value
Content
Name:
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
Width
Auto
Height
23
HorizontalAlignment
Stretch
VerticalAlignment
Top
Margin
20,20,10,10
From the Toolbox, in the Common group, drag a Label control onto the Grid.
In the Properties window, set the following properties for the Label:
Property
Value
Content
Password:
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
1
Grid.RowSpan
1
Width
Auto
Height
23
HorizontalAlignment
Stretch
VerticalAlignment
Top
Margin
20,10,10,10
From the Toolbox, in the Common group, drag a TextBox control onto the Grid.
In the Properties window, set the following properties for the TextBox:
Property
Value
Grid.Column
1
Grid.ColumnSpan
3
Grid.Row
0
Grid.RowSpan
1
Width
Auto
Height
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
10,20,20,10
From the Toolbox, in the Common group, drag a TextBox control onto the Grid.
In the Properties window, set the following properties for the TextBox:
Property
Value
Grid.Column
1
Grid.ColumnSpan
3
Grid.Row
1
Grid.RowSpan
1
Width
Auto
Height
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
10,10,20,10
From the Toolbox, in the Common group, drag a Button control onto the Grid.
In the Properties window, set the following properties for the Button:
Property
Value
Content
OK
Grid.Column
2
Grid.ColumnSpan
1
Grid.Row
3
Grid.RowSpan
1
Width
75
Height
23
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
10,10,6,20
From the Toolbox, in the Common group, drag a Button control onto the Grid.
In the Properties window, set the following properties for the Button:
Property
Value
Content
Cancel
Grid.Column
3
Grid.ColumnSpan
1
Grid.Row
3
Grid.RowSpan
1
Width
75
Height
23
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
6,10,20,20
On the File menu, click Save All.
Testing the Layout
Finally you run the application and verify that the layout changes dynamically as the user resizes the window, and as the content of the controls expands beyond the size of the controls.
To test the layout
On the Debug menu, click Start Debugging.
The application starts and the window appears.
In the Name text box, type randomly to fill the text box. When you reach the end of the text box, both the text box and the window expand to fit the text that you type.
Close the window.
On the Debug menu, click Start Debugging.
The application starts and the window appears.
Resize the window both vertically and horizontally.
The columns expand evenly to use the available space. The text boxes stretch to fill the expanded columns. Three rows maintain their height, and the fourth row expands to use the available space.
Close the window.
In Design view, select the Name label.
In the Properties window, change the Content property to Please enter your full name here:.
In Design view, the label expands to fit the text.
On the Debug menu, click Start Debugging.
The application starts and the window appears. The label control displays the longer text.
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="200" Width="400" SizeToContent="WidthAndHeight">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
<Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
<TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
<TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
<Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
<Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
</Grid>
</Window>
Next Steps
You can experiment to learn how to achieve different effects with dynamic layouts by replacing the Grid panel in this walkthrough with the following panels:
See Also
Tasks
How to: Construct a Dynamic Layout
Walkthrough: Creating a Resizable Application by Using the WPF Designer
Concepts
WPF and Silverlight Designer Overview