Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
This article shows you how to use the Windows Forms layout features, such as anchoring and snaplines, to arrange Windows Presentation Foundation (WPF) controls.
You need Visual Studio to complete this walkthrough.
Open Visual Studio and create a new Windows Forms Application project in Visual Basic or Visual C# named ArrangeElementHost
.
Note
When hosting WPF content, only C# and Visual Basic projects are supported.
After you add a WPF control to the project, you can arrange it on the form.
Add a new WPF UserControl to the project. Use the default name for the control type, UserControl1.xaml
. For more information, see Walkthrough: Creating New WPF Content on Windows Forms at Design Time.
In Design view, make sure that UserControl1
is selected.
In the Properties window, set the value of the Width and Height properties to 200.
Set the value of the Background property to Blue.
Build the project.
You can use WPF controls in layout panels in the same way you use other Windows Forms controls.
Open Form1
in the Windows Forms Designer.
In the Toolbox, drag a TableLayoutPanel control onto the form.
On the TableLayoutPanel control's smart tag panel, select Remove Last Row.
Resize the TableLayoutPanel control to a larger width and height.
In the Toolbox, double-click UserControl1
to create an instance of UserControl1
in the first cell of the TableLayoutPanel control.
The instance of UserControl1
is hosted in a new ElementHost control named elementHost1
.
In the Toolbox, double-click UserControl1
to create another instance in the second cell of the TableLayoutPanel control.
In the Document Outline window, select tableLayoutPanel1
.
In the Properties window, set the value of the Padding property to 10, 10, 10, 10.
Both ElementHost controls are resized to fit into the new layout.
Snaplines enable easy alignment of controls on a form. You can use snaplines to align your WPF controls as well. For more information, see Walkthrough: Arranging Controls on Windows Forms Using Snaplines.
From the Toolbox, drag an instance of UserControl1
onto the form, and place it in the space beneath the TableLayoutPanel control.
The instance of UserControl1
is hosted in a new ElementHost control named elementHost3
.
Using snaplines, align the left edge of elementHost3
with the left edge of TableLayoutPanel control.
Using snaplines, size elementHost3
to the same width as the TableLayoutPanel control.
Move elementHost3
toward the TableLayoutPanel control until a center snapline appears between the controls.
In the Properties window, set the value of the Margin property to 20, 20, 20, 20.
Move the elementHost3
away from the TableLayoutPanel control until the center snapline appears again. The center snapline now indicates a margin of 20.
Move elementHost3
to the right until its left edge aligns with the left edge of elementHost1
.
Change the width of elementHost3
until its right edge aligns with the right edge of elementHost2
.
A WPF control hosted on a form has the same anchoring and docking behavior as other Windows Forms controls.
Select elementHost1
.
In the Properties window, set the Anchor property to Top, Bottom, Left, Right.
Resize the TableLayoutPanel control to a larger size.
The elementHost1
control resizes to fill the cell.
Select elementHost2
.
In the Properties window, set the value of the Dock property to Fill.
The elementHost2
control resizes to fill the cell.
Select the TableLayoutPanel control.
Select elementHost3
.
Set the value of its Dock property to Fill.
The elementHost3
control resizes to fill the remaining space on the form.
Resize the form.
All three ElementHost controls resize appropriately.
For more information, see How to: Anchor and Dock Child Controls in a TableLayoutPanel Control.
.NET Desktop feedback feedback
.NET Desktop feedback is an open source project. Select a link to provide feedback:
Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.