Step 2 of 4: Binding Grid to the Data Source

In This Topic

In the last step you set up the grid application – but while the basic grid is functional, it contains no data. In this step you'll continue in Visual Studio by adding a data source to your project. You'll then open the project in Microsoft Expression Blend to complete binding the grid to the data source.

To add a data source and set up data binding in Visual Studio, complete the following steps:

From the Data menu, select Add New Data Source. The Data Source Configuration Wizard appears.
Confirm that Database is selected in the Data Source Configuration Wizard and click Next.

If the Choose a Database Model screen appears, select Dataset and click Next.

On the Choose Your Data Connection screen, click the New Connection button to locate and connect to a database.
If the Choose Data Source dialog box appears, select Microsoft Access Database File and click Continue. The Add Connection dialog box will appear.
In the Add Connection dialog box, click the Browse button and locate C1NWind.mdb in the samples installation directory. Select it and click Open.
Click the Test Connection button to make sure that you have successfully connected to the database or server and click OK.
Click OK to close the Add Connection dialog box. The new string appears in the data connection drop-down list on the Choose Your Data Connection page.
Click the Next button to continue. If a dialog box appears asking if you would like to add the data file to your project and modify the connection string, click No since it is not necessary to copy the database to your project.
In the next window, confirm that the Yes, save the connection as check box is selected and a name has been automatically entered in the text box ("C1NWindConnectionString"). Click Next to continue.
In the Choose Your Database Objects window, you can select the tables and fields that you would like in your dataset. Select the Products table (you may need to expand the Tables node first) and change the DataSet name to ProductsDS.
Click Finish to exit the wizard. The ProductsDS.xsd files now appear in the Solution Explorer.
In the Solution Explorer, double-click the Window1.xaml.cs (or Window1.xaml.vb) file to switch to code view.
Add the following references to the top of the Window1.xaml.cs (or Window1.xaml.vb) file, replacing ProjectName with the name of your project:

Visual Basic	Copy Code
Imports C1.WPF.DataGrid Imports ProjectName.ProductsDSTableAdapters

C#	Copy Code
using C1.WPF.DataGrid; using ProjectName.ProductsDSTableAdapters;

Add the following code to the MainWindow class to retrieve the products and order details data from the database:

Visual Basic	Copy Code
Class MainWindow Inherits Window Private _productsDataSet As ProductsDS = Nothing Public ReadOnly Property ProductsDataSet() As ProductsDS Get If _productsDataSet Is Nothing Then _productsDataSet = New ProductsDS() Dim prodTA As New ProductsTableAdapter() prodTA.Fill(_productsDataSet.Products) End If Return _productsDataSet End Get End Property Public Sub New() InitializeComponent() End Sub End Class

Visual Basic

Copy Code

Class MainWindow 
    Inherits Window 
    Private _productsDataSet As ProductsDS = Nothing 
    Public ReadOnly Property ProductsDataSet() As ProductsDS 
        Get 
            If _productsDataSet Is Nothing Then 
                _productsDataSet = New ProductsDS() 
                Dim prodTA As New ProductsTableAdapter() 
                prodTA.Fill(_productsDataSet.Products) 
            End If 
            Return _productsDataSet 
        End Get 
    End Property 
    
    Public Sub New() 
        InitializeComponent() 
    End Sub 
End Class

C#	Copy Code
public partial class MainWindow : Window { private ProductsDS _productsDataSet = null; public ProductsDS ProductsDataSet { get { if (_productsDataSet == null) { _productsDataSet = new ProductsDS(); ProductsTableAdapter prodTA = new ProductsTableAdapter(); prodTA.Fill(_productsDataSet.Products); } return _productsDataSet; } } public MainWindow() { InitializeComponent(); } }

Copy Code

public partial class MainWindow : Window
{
    private ProductsDS _productsDataSet = null;
    public ProductsDS ProductsDataSet
    {
        get
        {
            if (_productsDataSet == null)
            {
                _productsDataSet = new ProductsDS();
                ProductsTableAdapter prodTA = new ProductsTableAdapter();
                prodTA.Fill(_productsDataSet.Products);
            }
            return _productsDataSet;
        }
    }
        
    public MainWindow()
    {
        InitializeComponent();
    }
}

Press F5 to run your project to ensure that everything is working correctly. Notice that the grid still appears blank in the running application; you will need to complete binding before content appears.
Close the running application and return to the project.
Add code to the MainWindow constructor so that it looks like the following:

Visual Basic
Copy Code
Public Sub New() 
    InitializeComponent()
    Me.C1DataGrid1.ItemsSource = ProductsDataSet.Products
End Sub
C#
Copy Code
public MainWindow()
{
    InitializeComponent();
    this.c1DataGrid1.ItemsSource = ProductsDataSet.Products;
}
This code will bind the grid to the Products table in the C1NWind database.

Notice in the XAML view, the C1DataGrid tag now appears as the following:

Visual Basic	Copy Code
Public Sub New() InitializeComponent() Me.C1DataGrid1.ItemsSource = ProductsDataSet.Products End Sub

C#	Copy Code
public MainWindow() { InitializeComponent(); this.c1DataGrid1.ItemsSource = ProductsDataSet.Products; }

XAML	Copy Code
<c1:C1DataGrid HorizontalAlignment="Left" Name="C1DataGrid1" VerticalAlignment="Top" Height="215" Width="384"/>

Run the program and observe:

The grid is now populated with data from the Products table:

You've successfully bound DataGrid for WPF's C1DataGrid control to a data source. In the next step you'll explore some of the run-time interactions that are possible in your grid application.