--- 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 [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. This walkthrough shows how you can use data binding in hybrid applications that include both Windows Forms and [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] 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 element, add the following Windows Forms namespaces mapping. ```xaml xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" ``` 5. Name the default element `mainGrid` by assigning the 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 control. The following code example defines a object named `ListItemsTemplate` that controls the visual tree of the control. This is assigned to the control's property. ### To define the data template - Copy the following XAML into the 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. controls are provided to identify each column in the Customers table. ### To set up the Grid layout - Copy the following XAML into the 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 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 control. The attached `ListItemsTemplate` binds a control to the `ContactName` field from the database. The details of each customer record are displayed in several controls. ### To specify data bindings - Copy the following XAML into the element's declaration. The class binds the 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 control named `dataGridView1`. The `dataGridView1` control is bound to the data source in the code-behind file. A control is the parent of this Windows Forms control. ### To display data in the DataGridView control - Copy the following XAML into the 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 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 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 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 element. 6. In the Properties window, click the **Events** tab. 7. Double-click the event. 8. Copy the following code into the event handler. This code assigns the 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 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 - - - [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)