Walkthrough: Binding WPF Controls to a Dataset

In this walkthrough, you will create a WPF application that contains data-bound controls. The controls are bound to product records that are encapsulated in a dataset. You will also add buttons to browse through products and save changes to product records.

This walkthrough illustrates the following tasks:

• Creating a WPF application and a dataset that is generated from data in the AdventureWorksLT sample database.

• Creating a set of data-bound controls by dragging a data table from the Data Sources window to a window in the WPF Designer.

• Creating buttons that navigate forward and backward through product records.

• Creating a button that saves changes that users make to the product records to the data table and the underlying data source.

  Note

  Your computer might show different names or locations for some of the Visual Studio user interface elements in the following instructions. The Visual Studio edition that you have and the settings that you use determine these elements. For more information, see Customizing Development Settings in Visual Studio.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio

• Access to a running instance of SQL Server or SQL Server Express that has the AdventureWorksLT sample database attached to it. You can download the AdventureWorksLT database from the CodePlex Web site.

Prior knowledge of the following concepts is also helpful, but not required to complete the walkthrough:

• Datasets and TableAdapters. For more information, see Working with Datasets in Visual Studio and TableAdapter Overview.

• Working with the WPF Designer. For more information, see WPF and Silverlight Designer Overview.

• WPF data binding. For more information, see Data Binding Overview.

Creating the Project

Create a new WPF project. The project will display product records.

To create the project

1. Start Visual Studio.

2. On the File menu, point to New, and then click Project.

3. Expand Visual Basic or Visual C#, and then select Windows.

4. Select the WPF Application project template.

5. In the Name box, type AdventureWorksProductsEditor and click OK.

   Visual Studio creates the AdventureWorksProductsEditor project.

Creating a Dataset for the Application

Before you can create data-bound controls, you must define a data model for your application and add it to the Data Sources window. In this walkthrough, you create a dataset to use as the data model.

To create a dataset

1. On the Data menu, click Show Data Sources.

   The Data Sources window opens.

2. In the Data Sources window, click Add New Data Source.

   The Data Source Configuration Wizard opens.

3. On the Choose a Data Source Type page, select Database, and then click Next.

4. On the Choose a Database Model page, select Dataset, and then click Next.

5. On the Choose Your Data Connection page, select one of the following options:

   • If a data connection to the AdventureWorksLT sample database is available in the drop-down list, select it and then click Next.

     -or-

   • Click New Connection and create a connection to the AdventureWorksLT database.

6. On the Save the Connection String to the Application Configure File page, select the Yes, save the connection as check box, and then click Next.

7. On the Choose Your Database Objects page, expand Tables, and then select the Product (SalesLT) table.

8. Click Finish.

   Visual Studio adds a new AdventureWorksLTDataSet.xsd file to the project, and it adds a corresponding AdventureWorksLTDataSet item to the Data Sources window. The AdventureWorksLTDataSet.xsd file defines a typed dataset named AdventureWorksLTDataSet and a TableAdapter named ProductTableAdapter. Later in this walkthrough, you will use the ProductTableAdapter to fill the dataset with data and save changes back to the database.

9. Build the project.

Editing the Default Fill Method of the TableAdapter

To fill the dataset with data, use the Fill method of the ProductTableAdapter. By default, the Fill method fills the ProductDataTable in the AdventureWorksLTDataSet with all rows of data from the Product table. You can modify this method to return only a subset of the rows. For this walkthrough, modify the Fill method to return only rows for products that have photos.

To load product rows that have photos

1. In Solution Explorer, double-click the AdventureWorksLTDataSet.xsd file.

   The Dataset designer opens.

2. In the designer, right-click the Fill,GetData() query and select Configure.

   The TableAdapter Configuration Wizard opens.

3. In the Enter a SQL Statement page, add the following WHERE clause after the SELECT statement in the text box.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
   

4. Click Finish.

Defining the User Interface

Add several buttons to the window by modifying the XAML in the WPF Designer. Later in this walkthrough, you will add code that enables users to scroll through and save changes to products records by using these buttons.

To define the user interface of the window

1. In Solution Explorer, double-click MainWindow.xaml.

   The window opens in the WPF Designer.

2. In the XAML view of the designer, add the following code between the <Grid> tags:

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="625" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75">&lt;</Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">&gt;</Button>
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>
   

3. Build the project.

Creating Data-Bound Controls

Create controls that display customer records by dragging the Product table from the Data Sources window to the WPF Designer.

To create data-bound controls

1. In the Data Sources window, click the drop-down menu for the Product node and select Details.

2. Expand the Product node.

3. For this example some fields will not be displayed so click the drop-down menu next to the following nodes and select None:

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Click the drop-down menu next to the ThumbNailPhoto node and select Image.

   Note

   By default, items in the Data Sources window that represent pictures have their default control set to None. This is because pictures are stored as byte arrays in databases, and byte arrays can contain anything from a simple array of bytes to the executable file of a large application.

5. From the Data Sources window, drag the Product node to the grid row under the row that contains the buttons.

   Visual Studio generates XAML that defines a set of controls that are bound to data in the Products table. It also generates code that loads the data. For more information about the generated XAML and code, see Binding WPF Controls to Data in Visual Studio.

6. In the designer, click the text box next to the Product ID label.

7. In the Properties window, select the check box next to the IsReadOnly property.

Navigating Product Records

Add code that enables users to scroll through product records by using the < and > buttons.

To enable users to navigate product records

1. In the designer, double-click the < button on the window surface.

   Visual Studio opens the code-behind file and creates a new backButton_Click event handler for the Click event.

2. Modify the Window_Loaded event handler so the ProductViewSource, AdventureWorksLTDataSet, and AdventureWorksLTDataSetProductTableAdapter are outside of the method and accessible to the entire form. Only declare these global to the form, assign them within the Window_Loaded event handler similar to the following:

   Dim ProductViewSource As System.Windows.Data.CollectionViewSource
   Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
   Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
   Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
       'Load data into the table Product. You can modify this code as needed.
       AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
       AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
       ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
       ProductViewSource.View.MoveCurrentToFirst()
   End Sub
   

   private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
   private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
   private System.Windows.Data.CollectionViewSource productViewSource;
   
   private void Window_Loaded(object sender, RoutedEventArgs e)
   {
       AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
       // Load data into the table Product. You can modify this code as needed.
       adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
       adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
       productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
       productViewSource.View.MoveCurrentToFirst();
   }
   

3. Add the following code to the backButton_Click event handler:

   If ProductViewSource.View.CurrentPosition > 0 Then
       ProductViewSource.View.MoveCurrentToPrevious()
   End If
   

   if (productViewSource.View.CurrentPosition > 0)
   {
       productViewSource.View.MoveCurrentToPrevious();
   }
   

4. Return to the designer and double-click the > button.

5. Add the following code to the nextButton_Click event handler:

   If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
       ProductViewSource.View.MoveCurrentToNext()
   End If
   

   if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
   {
       productViewSource.View.MoveCurrentToNext();
   }
   

Saving Changes to Product Records

Add code that enables users to save changes to product records by using the Save changes button.

To add the ability to save changes to product records

1. In the designer, double-click the Save Changes button.

   Visual Studio opens the code-behind file and creates a new saveButton_Click event handler for the Click event.

2. Add the following code to the saveButton_Click event handler:

   AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

   Note

   This example uses the Save method of the TableAdapter to save the changes. This is appropriate in this walkthrough, because only one data table is being changed. If you need to save changes to multiple data tables, you can alternatively use the UpdateAll method of the TableAdapterManager that Visual Studio generates with your dataset. For more information, see TableAdapterManager Overview.

Testing the Application

Build and run the application. Verify that you can view and update product records.

To test the application

1. Press F5.

   The application builds and runs. Verify the following:

   • The text boxes display data from the first product record that has a photo. This product has the product ID 713, and the name Long-Sleeve Logo Jersey, S.

   • You can click the > or < buttons to navigate through other product records.

2. In one of the product records, change the Size value, and then click Save changes.

3. Close the application, and then restart the application by pressing F5 in Visual Studio.

4. Navigate to the product record you changed, and verify that the change persisted.

5. Close the application.

Next Steps

After completing this walkthrough, you can perform the following related tasks:

• Learn how to use the Data Sources window in Visual Studio to bind WPF controls to other types of data sources. For more information, see Walkthrough: Binding WPF Controls to a WCF Data Service.

• Learn how to use the Data Sources window in Visual Studio to display related data (that is, data in a parent-child relationship) in WPF controls. For more information, see Walkthrough: Displaying Related Data in a WPF Application.

See Also

Tasks

How to: Bind WPF Controls to Data in Visual Studio

Concepts

Binding WPF Controls to Data in Visual Studio

Working with Datasets in Visual Studio

WPF and Silverlight Designer Overview

Data Binding Overview