In this section, we will create another version of the same application, this time using WPF.

Here are the steps:

1. Create a new WPF application
2. Use the Data | Add New DataSource menu and add a reference to the NORTHWND.MDF database. Accept all the default options offered by the wizard, and pick all the tables in the database.
3. Add a reference to the C1.LiveLinq.dll assembly to the project.
4. Add a reference to a grid control such as the C1.WPF.C1DataGrid, which you can download from developer.mescius.com.
5. Add the controls to the main window: one ComboBox, one C1DataGrid, four TextBox controls, and five Label controls. Adjust the control layout so it looks like the previous version of our application, similar to the image below:

Now right-click the window, select View Code, and add the following code to the project:

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using C1.LiveLinq;
using C1.LiveLinq.AdoNet;
using C1.LiveLinq.LiveViews;

namespace LiveLinqWPF
{
  ///<summary>
  ///Interaction logic for Window1.xaml
  ///</summary>
  public partial class Window1 : Window
  {
    public Window1()
    {
      // designer-generated code
      InitializeComponent();

      // get data
      var ds = GetData();

      // create a live view with Categories and Products:
      var liveView =
        from c in ds.Categories.AsLive()
        join p in ds.Products.AsLive()
          on c.CategoryID equals p.CategoryID into g
        select new
        {
          CategoryID = c.CategoryID,
          CategoryName = c.CategoryName,
          Products = g
        };

      // bind view to controls
      DataBind(liveView);
    }
  }
}

The code is identical to the version we wrote earlier for the WinForms version of the application. It calls GetData to load the SQL data into a DataSet, then creates a LiveLinq view that exposes the data to the application, and finally calls the DataBind method to bind the controls to the LiveLinq view.

The GetData method is also identical to the one we used in the WinForms version of the application:

NORTHWNDDataSet GetData()
{
  NORTHWNDDataSet ds = new NORTHWNDDataSet();
  new NORTHWNDDataSetTableAdapters.ProductsTableAdapter()
    .Fill(ds.Products);
  new NORTHWNDDataSetTableAdapters.CategoriesTableAdapter()
    .Fill(ds.Categories);
  return ds;
}

The DataBind method is similar to the one we wrote earlier, but it is not identical. The WPF data binding mechanism is slightly different from the one in WinForms, and that is reflected here:

void DataBind(System.Collections.IEnumerable dataSource)
{
    // show categories in ComboBox
    comboBox1.ItemsSource = dataSource;
    comboBox1.DisplayMemberPath = "CategoryName";
    comboBox1.SelectedIndex = 0;

    // show products in C1DataGrid
    var b = new Binding("SelectedValue.Value.Products");
    b.Source = comboBox1;
    c1DataGrid1.SetBinding(C1.WPF.C1DataGrid.C1DataGrid.ItemsSourceProperty, b);

    // show product details in TextBox controls
    BindControl(textBox1, "ProductName");
    BindControl(textBox2, "UnitPrice");
    BindControl(textBox3, "QuantityPerUnit");
    BindControl(textBox4, "UnitsInStock");
}

void BindControl(TextBox txt, string dataMember)
{
    var b = new Binding("SelectedGridItem.Row.DataItem." + dataMember);
    b.Source = c1DataGrid1;
    txt.SetBinding(TextBox.TextProperty, b);
}

The WPF version of the DataBind method starts by assigning our live view to the ItemsSource property of the ComboBox control. It also sets the DisplayMemberPath property of the ComboBox to “CategoryName”, which is the field we want to show in the ComboBox.

Next, we use the SetBinding method to bind the grid’s ItemsSource property to the ComboBox selection. The string “SelectedValue.Value.Products” selects the “Products” field of the item that is currently selected in the ComboBox.

Finally, we use SetBinding to bind the Text property of each TextBox to the corresponding field on the grid selection. This time, we use strings like “SelectedGridItem.Row.DataItem.ProductName” which select specific properties of the product that is currently selected on the grid.

That concludes the WPF version of the application. If you run it now, you will see that it behaves exactly like the WinForms versions. Select categories from the top ComboBox, see the corresponding products on the grid below, and the product details in the TextBoxes at the bottom of the window.