Embed WPF User Controls in WinForms Applications
Tags: webdev, tutorial, devops
Published: 2023-02-01 21:35:08

---
canonical_url: https://www.grapecity.com/blogs/embed-wpf-user-controls-in-winforms-application
description: Learn how to embed WPF user controls in your WinForms applications. See more from ComponentOne today.
---

WinForms and WPF are two different technologies. Both have pros and cons. However, we can intermix UI controls between them. So, we can support the functionality of WinForms and WPF in a single application by adding WPF controls in the WinForms application. We can also support the [MVVM](https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern) approach and Binding functionality of WPF in the WinForms application. To achieve this requirement, we must host a WPF UserControl in the WinForms application.

In this blog, we will see how to use a ComponentOne WPF control (C1FlexGrid and C1Rating) in a WinForms application.

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

![](https://files.grapecity.com/gc-website-media/jnynsava/01-addelementhost.gif?width=500&height=282.84023668639054)

### 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".

![](https://files.grapecity.com/gc-website-media/cwsoyj03/02-creatingusercontrol.gif?width=500&height=282.84023668639054)

### **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.

![](https://files.grapecity.com/gc-website-media/ubiook0q/03-hostwpfusercontrol.gif?width=500&height=282.84023668639054)

Finally, the WPF UserControl is hosted on a WinForms application where WPF controls (C1FlexGrid and C1Rating) are added to the hosted WPF UserControl.

For full implementation, download the [sample](https://files.grapecity.com/gc-website-media/ihkm0hrm/wpfcontrolhost.zip).