Embed WPF User Controls in WinForms Applications

WinForms and WPF are two different .NET Frameworks that both create Windows desktop applications built on Win32. While they both have pros and cons, you are not completely limited to the UI capabilities of the framework you choose. You can intermix UI components between WPF and WinForms to unlock more component possibilities.

A common use case is embedding a WPF control into a WinForms application. Since WinForms is older, you may have some legacy .NET Framework applications that can’t be migrated to a new technology. WPF offers more modern-looking controls and oftentimes, larger toolbox selections. Take, for example, the C1Rating control. This is only supported in WPF and can be hosted in a WinForms .NET Framework application.

In addition to gaining more UI controls, hosting WPF elements in WinForms also provides a clearer path to support MVVM data binding. In this tutorial, we will demonstrate how to host a WPF C1Rating control and a ViewModel-bound datagrid (C1FlexGrid) in a WinForms application. We will cover:

1. Adding ElementHost Control
2. Creating a WPF UserControl
3. Editing WPF UserControl
4. Hosting WPF UserControl on ElementHost

Ready to Start Embedding WPF User Controls? Try ComponentOne Today!

Steps to Host WPF UserControl in Winforms

Add ElementHost Control

ElementHost is a WinForms control that can be used to host a Windows Presentation Foundation (WPF) element. To add ElementHost Control in Windows Form, you need to add the WindowsFormsIntegration.dll reference first.
Then you can drag ElementHost from the Toolbox and drop it into the Form.

Creating a WPF UserControl

You can create a WPF UserControl in the WinForms application. In the Solution Explorer of the project, right-click on the project node and select Add->New Item. Select UserControl (WPF) and create your own UserControl named "WpfUserControl.xaml".

Editing WPF UserControl

You can edit the WPF UserControl with some XAML code. You can add WPF controls like C1FlexGrid(WPF) and C1Rating into the WPF UserControl.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfControlHost" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="WpfControlHost.WpfUserControl" mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="500"> <UserControl.DataContext> <local:ViewModel/> </UserControl.DataContext> <Grid> <!--C1 WPF FlexGrid control--> <c1:C1FlexGrid x:Name="grid" ItemsSource="{Binding Songs}" MinRowHeight="50" Loaded="FlexgridLoaded" AutoGenerateColumns="False"> <c1:C1FlexGrid.Columns> <c1:Column Header="Track" Binding="{Binding Track}"/> <c1:Column Header="Duration" Binding="{Binding Duration}"/> <c1:Column Header="Size" Binding="{Binding Size}"/> <c1:Column Header="Rating" Binding="{Binding Rating}"> <c1:Column.CellTemplate> <DataTemplate> <!--C1 WPF C1Rating control--> <c1:C1Rating Value="{Binding Rating}" RatedBrush="Yellow" HoveredBrush="Orange" VerticalAlignment="Center" ShowToolTip="False"> </c1:C1Rating> </DataTemplate> </c1:Column.CellTemplate> </c1:Column> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid> </Grid> </UserControl> 

Hosting WPF UserControl on ElementHost

At last, host the WPF UserControl on ElementHost. First, rebuild your solution, so the WpfUserControl is visible in the Toolbox. Now, open the ToolBox, drag WpfUserControl from ToolBox and place it on your Form.

Conclusion

Finally, the WPF FlexGrid and Rating components are hosted in our WinForms application.

As you can see, the UserControl is the key to making this work. A UserControl is really just a custom control that can be reused throughout your applications. You can further add customization endpoints to allow for different usage scenarios. For example, you could expose the data source and bind each instance of your UserControl to a different parameter from WinForms. This would be achieved by adding a public DataSource property on the UserControl, which can be set by C# code in your WinForms app. For full implementation, download the complete sample.

Ready to Start Embedding WPF User Controls? Try ComponentOne Today!