docs-desktop/dotnet-desktop-guide/framework/wpf/advanced/walkthrough-binding-to-data-in-hybrid-applications.md

---
title: "Walkthrough: Binding to Data in Hybrid Applications"
ms.date: "03/30/2017"
dev_langs:
  - "csharp"
  - "vb"
helpviewer_keywords:
  - "hybrid applications [WPF interoperability]"
  - "data binding [WPF interoperability]"
ms.assetid: 18997e71-745a-4425-9c69-2cbce1d8669e
---
# Walkthrough: Binding to Data in Hybrid Applications

Binding a data source to a control is essential for providing users with access to underlying data, whether you are using Windows Forms or WPF. This walkthrough shows how you can use data binding in hybrid applications that include both Windows Forms and WPF controls.

Tasks illustrated in this walkthrough include:

- Creating the project.

- Defining the data template.

- Specifying the form layout.

- Specifying data bindings.

- Displaying data by using interoperation.

- Adding the data source to the project.

- Binding to the data source.

For a complete code listing of the tasks illustrated in this walkthrough, see [Data Binding in Hybrid Applications Sample](https://github.com/microsoft/WPF-Samples/tree/master/Migration%20and%20Interoperability/WPFWithWFAndDatabinding).

When you are finished, you will have an understanding of data binding features in hybrid applications.

## Prerequisites

You need the following components to complete this walkthrough:

- Visual Studio.

- Access to the Northwind sample database running on Microsoft SQL Server.

## Creating the Project

### To create and set up the project

1. Create a WPF Application project named `WPFWithWFAndDatabinding`.

2. In Solution Explorer, add references to the following assemblies.

    - WindowsFormsIntegration

    - System.Windows.Forms

3. Open MainWindow.xaml in the WPF Designer.

4. In the <xref:System.Windows.Window> element, add the following Windows Forms namespaces mapping.

    ```xaml
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    ```

5. Name the default <xref:System.Windows.Controls.Grid> element `mainGrid` by assigning the <xref:System.Windows.FrameworkElement.Name%2A> property.

     [!code-xaml[WPFWithWFAndDatabinding#8](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#8)]

## Defining the Data Template

The master list of customers is displayed in a <xref:System.Windows.Controls.ListBox> control. The following code example defines a <xref:System.Windows.DataTemplate> object named `ListItemsTemplate` that controls the visual tree of the <xref:System.Windows.Controls.ListBox> control. This <xref:System.Windows.DataTemplate> is assigned to the <xref:System.Windows.Controls.ListBox> control's <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A> property.

### To define the data template

- Copy the following XAML into the <xref:System.Windows.Controls.Grid> element's declaration.

     [!code-xaml[WPFWithWFAndDatabinding#3](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#3)]

## Specifying the Form Layout

The layout of the form is defined by a grid with three rows and three columns. <xref:System.Windows.Controls.Label> controls are provided to identify each column in the Customers table.

### To set up the Grid layout

- Copy the following XAML into the <xref:System.Windows.Controls.Grid> element's declaration.

     [!code-xaml[WPFWithWFAndDatabinding#4](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#4)]

### To set up the Label controls

- Copy the following XAML into the <xref:System.Windows.Controls.Grid> element's declaration.

     [!code-xaml[WPFWithWFAndDatabinding#5](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#5)]

## Specifying Data Bindings

The master list of customers is displayed in a <xref:System.Windows.Controls.ListBox> control. The attached `ListItemsTemplate` binds a <xref:System.Windows.Controls.TextBlock> control to the `ContactName` field from the database.

The details of each customer record are displayed in several <xref:System.Windows.Controls.TextBox> controls.

### To specify data bindings

- Copy the following XAML into the <xref:System.Windows.Controls.Grid> element's declaration.

     The <xref:System.Windows.Data.Binding> class binds the <xref:System.Windows.Controls.TextBox> controls to the appropriate fields in the database.

     [!code-xaml[WPFWithWFAndDatabinding#6](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#6)]

## Displaying Data by Using Interoperation

The orders corresponding to the selected customer are displayed in a <xref:System.Windows.Forms.DataGridView?displayProperty=nameWithType> control named `dataGridView1`. The `dataGridView1` control is bound to the data source in the code-behind file. A <xref:System.Windows.Forms.Integration.WindowsFormsHost> control is the parent of this Windows Forms control.

### To display data in the DataGridView control

- Copy the following XAML into the <xref:System.Windows.Controls.Grid> element's declaration.

     [!code-xaml[WPFWithWFAndDatabinding#7](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml#7)]

## Adding the Data Source to the Project

With Visual Studio, you can easily add a data source to your project. This procedure adds a strongly typed data set to your project. Several other support classes, such as table adapters for each of the chosen tables, are also added.

### To add the data source

1. From the **Data** menu, select **Add New Data Source**.

2. In the **Data Source Configuration Wizard**, create a connection to the Northwind database by using a dataset. For more information, see [How to: Connect to Data in a Database](/previous-versions/visualstudio/visual-studio-2013/fxk9yw1t(v=vs.120)).

3. When you are prompted by the **Data Source Configuration Wizard**, save the connection string as `NorthwindConnectionString`.

4. When you are prompted to choose your database objects, select the `Customers` and `Orders` tables, and name the generated data set `NorthwindDataSet`.

## Binding to the Data Source

The <xref:System.Windows.Forms.BindingSource?displayProperty=nameWithType> component provides a uniform interface for the application's data source. Binding to the data source is implemented in the code-behind file.

### To bind to the data source

1. Open the code-behind file, which is named MainWindow.xaml.vb or MainWindow.xaml.cs.

2. Copy the following code into the `MainWindow` class definition.

     This code declares the <xref:System.Windows.Forms.BindingSource> component and associated helper classes that connect to the database.

     [!code-csharp[WPFWithWFAndDatabinding#11](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml.cs#11)]
     [!code-vb[WPFWithWFAndDatabinding#11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WPFWithWFAndDatabinding/VisualBasic/WPFWithWFAndDatabinding/Window1.xaml.vb#11)]

3. Copy the following code into the constructor.

     This code creates and initializes the <xref:System.Windows.Forms.BindingSource> component.

     [!code-csharp[WPFWithWFAndDatabinding#12](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml.cs#12)]
     [!code-vb[WPFWithWFAndDatabinding#12](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WPFWithWFAndDatabinding/VisualBasic/WPFWithWFAndDatabinding/Window1.xaml.vb#12)]

4. Open MainWindow.xaml.

5. In Design view or XAML view, select the <xref:System.Windows.Window> element.

6. In the Properties window, click the **Events** tab.

7. Double-click the <xref:System.Windows.FrameworkElement.Loaded> event.

8. Copy the following code into the <xref:System.Windows.FrameworkElement.Loaded> event handler.

     This code assigns the <xref:System.Windows.Forms.BindingSource> component as the data context and populates the `Customers` and `Orders` adapter objects.

     [!code-csharp[WPFWithWFAndDatabinding#13](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml.cs#13)]
     [!code-vb[WPFWithWFAndDatabinding#13](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WPFWithWFAndDatabinding/VisualBasic/WPFWithWFAndDatabinding/Window1.xaml.vb#13)]

9. Copy the following code into the `MainWindow` class definition.

     This method handles the <xref:System.Windows.Data.CollectionView.CurrentChanged> event and updates the current item of the data binding.

     [!code-csharp[WPFWithWFAndDatabinding#14](~/samples/snippets/csharp/VS_Snippets_Wpf/WPFWithWFAndDatabinding/CSharp/WPFWithWFAndDatabinding/Window1.xaml.cs#14)]
     [!code-vb[WPFWithWFAndDatabinding#14](~/samples/snippets/visualbasic/VS_Snippets_Wpf/WPFWithWFAndDatabinding/VisualBasic/WPFWithWFAndDatabinding/Window1.xaml.vb#14)]

10. Press F5 to build and run the application.

## See also

- <xref:System.Windows.Forms.Integration.ElementHost>
- <xref:System.Windows.Forms.Integration.WindowsFormsHost>
- [Design XAML in Visual Studio](/visualstudio/xaml-tools/designing-xaml-in-visual-studio)
- [Data Binding in Hybrid Applications Sample](https://github.com/microsoft/WPF-Samples/tree/master/Migration%20and%20Interoperability/WPFWithWFAndDatabinding)
- [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)