--- title: Arrange Windows Forms controls in WPF titleSuffix: "" ms.date: "04/03/2018" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "hybrid applications [WPF interoperability]" - "arranging controls [WPF]" ms.assetid: a1db8049-15c7-45d6-ae3d-36a6735cb848 --- # Walkthrough: Arranging Windows Forms Controls in WPF This walkthrough shows you how to use WPF layout features to arrange Windows Forms controls in a hybrid application. Tasks illustrated in this walkthrough include: - Creating the project. - Using default layout settings. - Sizing to content. - Using absolute positioning. - Specifying size explicitly. - Setting layout properties. - Understanding z-order limitations. - Docking. - Setting visibility. - Hosting a control that does not stretch. - Scaling. - Rotating. - Setting padding and margins. - Using dynamic layout containers. For a complete code listing of the tasks illustrated in this walkthrough, see [Arranging Windows Forms Controls in WPF Sample](https://github.com/microsoft/WPF-Samples/tree/master/Migration%20and%20Interoperability/WpfLayoutHostingWfWithXaml). When you are finished, you will have an understanding of Windows Forms layout features in WPF-based applications. ## Prerequisites You need Visual Studio to complete this walkthrough. ## Creating the Project To create and set up the project, follow these steps: 1. Create a WPF Application project named `WpfLayoutHostingWf`. 2. In Solution Explorer, add references to the following assemblies: - WindowsFormsIntegration - System.Windows.Forms - System.Drawing 3. Double-click *MainWindow.xaml* to open it in XAML view. 4. In the element, add the following Windows Forms namespace mapping. ```xaml xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" ``` 5. In the element set the property to `true` and define five rows and three columns. [!code-xaml[WpfLayoutHostingWfWithXaml#2](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#2)] ## Using Default Layout Settings By default, the element handles the layout for the hosted Windows Forms control. To use default layout settings, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#3](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#3)] 2. Press F5 to build and run the application. The Windows Forms control appears in the . The hosted control is sized based on its content, and the element is sized to accommodate the hosted control. ## Sizing to Content The element ensures that the hosted control is sized to display its content properly. To size to content, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#4](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#4)] 2. Press F5 to build and run the application. The two new button controls are sized to display the longer text string and larger font size properly, and the elements are resized to accommodate the hosted controls. ## Using Absolute Positioning You can use absolute positioning to place the element anywhere in the user interface (UI). To use absolute positioning, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#5](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#5)] 2. Press F5 to build and run the application. The element is placed 20 pixels from the top side of the grid cell and 20 pixels from the left. ## Specifying Size Explicitly You can specify the size of the element using the and properties. To specify size explicitly, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#6](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#6)] 2. Press F5 to build and run the application. The element is set to a size of 50 pixels wide by 70 pixels high, which is smaller than the default layout settings. The content of the Windows Forms control is rearranged accordingly. ## Setting Layout Properties Always set layout-related properties on the hosted control by using the properties of the element. Setting layout properties directly on the hosted control will yield unintended results. Setting layout-related properties on the hosted control in XAML has no effect. To see the effects of setting properties on the hosted control, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#7](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#7)] 2. In **Solution Explorer**, double-click *MainWindow.xaml.vb* or *MainWindow.xaml.cs* to open it in the Code Editor. 3. Copy the following code into the `MainWindow` class definition: [!code-csharp[WpfLayoutHostingWfWithXaml#101](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml.cs#101)] [!code-vb[WpfLayoutHostingWfWithXaml#101](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/VisualBasic/Window1.xaml.vb#101)] 4. Press F5 to build and run the application. 5. Click the **Click me** button. The `button1_Click` event handler sets the and properties on the hosted control. This causes the hosted control to be repositioned within the element. The host maintains the same screen area, but the hosted control is clipped. Instead, the hosted control should always fill the element. ## Understanding Z-Order Limitations Visible elements are always drawn on top of other WPF elements, and they are unaffected by z-order. To see this z-order behavior, do the following: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#8](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#8)] 2. Press F5 to build and run the application. The element is painted over the label element. ## Docking element supports WPF docking. Set the attached property to dock the hosted control in a element. To dock a hosted control, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#9](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#9)] 2. Press F5 to build and run the application. The element is docked to the right side of the element. ## Setting Visibility You can make your Windows Forms control invisible or collapse it by setting the property on the element. When a control is invisible, it is not displayed, but it occupies layout space. When a control is collapsed, it is not displayed, nor does it occupy layout space. To set the visibility of a hosted control, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#10](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#10)] 2. In *MainWindow.xaml.vb* or *MainWindow.xaml.cs*, copy the following code into the class definition: [!code-csharp[WpfLayoutHostingWfWithXaml#102](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml.cs#102)] [!code-vb[WpfLayoutHostingWfWithXaml#102](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/VisualBasic/Window1.xaml.vb#102)] 3. Press F5 to build and run the application. 4. Click the **Click to make invisible** button to make the element invisible. 5. Click the **Click to collapse** button to hide the element from the layout entirely. When the Windows Forms control is collapsed, the surrounding elements are rearranged to occupy its space. ## Hosting a Control That Does Not Stretch Some Windows Forms controls have a fixed size and do not stretch to fill available space in the layout. For example, the control displays a month in a fixed space. To host a control that does not stretch, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#11](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#11)] 2. Press F5 to build and run the application. The element is centered in the grid row, but it is not stretched to fill the available space. If the window is large enough, you may see two or more months displayed by the hosted control, but these are centered in the row. The WPF layout engine centers elements that cannot be sized to fill the available space. ## Scaling Unlike WPF elements, most Windows Forms controls are not continuously scalable. To provide custom scaling, you override the method. To scale a hosted control by using the default behavior, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#12](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#12)] 2. Press F5 to build and run the application. The hosted control and its surrounding elements are scaled by a factor of 0.5. However, the hosted control's font is not scaled. ## Rotating Unlike WPF elements, Windows Forms controls do not support rotation. The element does not rotate with other WPF elements when a rotation transformation is applied. Any rotation value other than 180 degrees raises the event. To see the effect of rotation in a hybrid application, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#13](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#13)] 2. Press F5 to build and run the application. The hosted control is not rotated, but its surrounding elements are rotated by an angle of 180 degrees. You may have to resize the window to see the elements. ## Setting Padding and Margins Padding and margins in WPF layout are similar to padding and margins in Windows Forms. Simply set the and properties on the element. To set padding and margins for a hosted control, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#14](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#14)] [!code-xaml[WpfLayoutHostingWfWithXaml#15](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#15)] 2. Press F5 to build and run the application. The padding and margin settings are applied to the hosted Windows Forms controls in the same way they would be applied in Windows Forms. ## Using Dynamic Layout Containers Windows Forms provides two dynamic layout containers, and . You can also use these containers in WPF layouts. To use a dynamic layout container, follow these steps: 1. Copy the following XAML into the element: [!code-xaml[WpfLayoutHostingWfWithXaml#16](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml#16)] 2. In *MainWindow.xaml.vb* or *MainWindow.xaml.cs*, copy the following code into the class definition: [!code-csharp[WpfLayoutHostingWfWithXaml#103](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml.cs#103)] [!code-vb[WpfLayoutHostingWfWithXaml#103](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/VisualBasic/Window1.xaml.vb#103)] 3. Add a call to the `InitializeFlowLayoutPanel` method in the constructor: [!code-csharp[WpfLayoutHostingWfWithXaml#104](~/samples/snippets/csharp/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/CSharp/Window1.xaml.cs#104)] [!code-vb[WpfLayoutHostingWfWithXaml#104](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WpfLayoutHostingWfWithXaml/VisualBasic/Window1.xaml.vb#104)] 4. Press F5 to build and run the application. The element fills the , and arranges its child controls in the default . ## See also - - - [Design XAML in Visual Studio](/visualstudio/xaml-tools/designing-xaml-in-visual-studio) - [Layout Considerations for the WindowsFormsHost Element](layout-considerations-for-the-windowsformshost-element.md) - [Arranging Windows Forms Controls in WPF Sample](https://github.com/microsoft/WPF-Samples/tree/master/Migration%20and%20Interoperability/WpfLayoutHostingWfWithXaml) - [Walkthrough: Hosting a Windows Forms Composite Control in WPF](walkthrough-hosting-a-windows-forms-composite-control-in-wpf.md) - [Walkthrough: Hosting a WPF Composite Control in Windows Forms](walkthrough-hosting-a-wpf-composite-control-in-windows-forms.md)