How to: Bind WPF Controls to Data in Visual Studio

  • Article

You can create data-bound WPF controls by using the Data Sources window. First, add a data source to the Data Sources window. Then, drag items from the Data Sources window to the WPF Designer.

Adding a Data Source to the Data Sources Window

Before you can create data-bound controls, you must first add a data source to the Data Sources window.

To add a data source to the Data Sources window

  1. On the Data menu, click Show Data Sources to open the Data Sources window.

  2. Click Add New Data Source and complete the Data Source Configuration Wizard.

  3. Perform one of the following tasks to create data-bound controls:

    • Creating a control that is bound to a single field of data.

    • Creating a control that is bound to multiple fields of data.

    • Creating a set of controls that are bound to multiple fields of data.

    • Binding data to existing controls in the designer.

Creating a Control That is Bound to a Single Field of Data

After you add a data source to the Data Sources window, you can create a new data-bound control that displays a single field of data, such as a ComboBox or TextBox.

To create a control that is bound to a single field of data

  1. In the Data Sources window, expand an item that represents a table or an object. Locate the child item that represents the column or property that you want to bind to. For a visual example, see Data Sources Window.

  2. Optionally, select the control to create. Each item in the Data Sources window has a default control that is created when you drag the item to the designer. The default control depends on the underlying data type of the item.

    To choose a different control, click the drop-down arrow next to the item and select a control. For more information, see How to: Set the Control to be Created when Dragging from the Data Sources Window.

  3. Drag the item to a valid container in the designer, such as a Grid. For more information about valid containers, see Binding WPF Controls to Data in Visual Studio.

    Visual Studio creates the new data-bound control and an appropriately titled Label in the container. Visual Studio also generates XAML and code to bind the control to the data. For more information, see Binding WPF Controls to Data in Visual Studio.

Creating a Control That is Bound to Multiple Fields of Data

After you add a data source to the Data Sources window, you can create a new data-bound control that displays multiple fields of data, such as a DataGrid or ListView.

To create a control that is bound to multiple fields of data

  1. In the Data Sources window, select an item that represents a table or object. For a visual example, see Data Sources Window.

  2. Optionally, select the control to create. By default, each item in the Data Sources window that represents a data table or object is set to create a DataGrid (if your project targets .NET Framework 4) or ListView (for earlier versions of the .NET Framework).

    To select a different control, click the drop-down arrow next to the item and select a control. For more information, see How to: Set the Control to be Created when Dragging from the Data Sources Window.

    Note

    If you do not want to display a specific column or property, expand the item to display its children. Click the drop-down arrow next to the column or property that you do not want to display, and then click None.

  3. Drag the item to a valid container in the designer, such as a Grid. For more information about valid containers, see Binding WPF Controls to Data in Visual Studio.

    Visual Studio creates the new data-bound control in the container. Visual Studio also generates XAML and code to bind the control to the data. For more information, see Binding WPF Controls to Data in Visual Studio.

Creating a Set of Controls That are Bound to Multiple Fields of Data

After you add a data source to the Data Sources window, you can bind a data table or object to a set of controls. A different control is created for each column or property in the table or object.

To create a set of controls that are bound to multiple fields of data

  1. In the Data Sources window, select an item that represents a table or object. For a visual example, see Data Sources Window.

  2. Click the drop-down arrow next to the item and select Details.

    Note

    If you do not want to display a specific column or property, expand the item to display its children. Click the drop-down arrow next to the column or property that you do not want to display, and then click None.

  3. Drag the item to a valid container in the designer, such as a Grid. For more information about valid containers, see Binding WPF Controls to Data in Visual Studio.

    Visual Studio creates the new data-bound controls in the container. Each control is bound to a different column or property, and each control is accompanied by an appropriately titled Label control. Visual Studio also generates XAML and code to bind the controls to the data. For more information, see Binding WPF Controls to Data in Visual Studio.

Binding Data to Existing Controls in the Designer

After you add a data source to the Data Sources window, you can add a data binding to an existing control in the desgner.

To bind data to an existing control in the designer

  1. In the Data Sources window, use one of the following procedures:

    • To add a data binding to an existing control that displays multiple fields of data, such as a DataGrid or ListView, select the item that represents the table or object that you want to bind to the control.

    • To add a data binding to an existing control that displays a single field of data, such as a ComboBox or TextBox, expand the item that represents the table or object that contains the data, and then select the item that represents the data that you want to bind to the control.

  2. Drag the selected item from the Data Sources window onto an existing control in the designer. The control must be a valid drop target. For more information, see Binding WPF Controls to Data in Visual Studio.

    Visual Studio generates XAML and code to bind the control to the data. For more information, see Binding WPF Controls to Data in Visual Studio.

    Note

    If the control is already bound to data, the data binding for the control is reset to the item that was dragged onto the control most recently.

See Also

Tasks

How to: Create Lookup Tables in WPF Applications

How to: Display Related Data in WPF Applications

Walkthrough: Binding WPF Controls to an Entity Data Model

Walkthrough: Binding WPF Controls to a Dataset

Walkthrough: Binding WPF Controls to a WCF Data Service

Walkthrough: Displaying Related Data in a WPF Application

Concepts

Binding WPF Controls to Data in Visual Studio