Visual Studio Data : Data Binding

The Data Source Window Support in WCF RIA Services

XiaoyingGuo — Tue, 01 Dec 2009 05:12:17 GMT

WCF RIA Services Beta was announced at PDC09 one week ago. It contains a lot of runtime support to make the experience of building a web business application much easier using Silverlight. Besides, there are also some tooling supports to help developers write less trivial code but to make the application work as expected. The Data Source Window support is one of them to help setting business objects data binding onto UI controls in a second. Actually, it is not a new concept in other technologies. The Data Source Window support for data-binding has been working for different technologies in VS2010, including WPF and WinForms. This article will use a simple application to show you how to leverage the Data Source Window support to do data-binding through a couple of drag-and-drops in WCF RIA Services scenarios.

Get ready to the project

To try it out, you need to install the WCF RIA Services Preview on VS2010 Beta2, which works on Silverlight 4. Then follow the steps below to display your business objects into the Data Source Window:

1. Create a new Silverlight 4 Application, and check “Enable .NET RIA Services” in the New Silverlight Application Wizard. The project template and wizard will create a client project and a server project with WCF RIA Services enabled.

2. On the Server project, add ADO.NET Entity Data Model item. Here the example uses Employee and EmployeeAddress tables in the AdventureWorks database.

3. Build the solution and add a new DomainService class into the Server project. Let’s call it EmployeeService and add the following code into the file:

public IQueryable<Employee> GetEmployees()

{

return this.ObjectContext.Employees.Include("EmployeeAddresses").OrderBy(e=>e.EmployeeID);

}

Also add [Include] attribute on the EmployeeAddresses property in Employee object in the metadata file like below:

[Include]

public EntityCollection<EmployeeAddress> EmployeeAddresses;

4. Build the solution. And now let’s open the MainPage.xaml and the Data Source Window through DataàShow Data Source Window. You will see that the business objects added into the solution has been displayed in the Data Source Window now like below:

Generate Employee details and EmployeeAddress data grid view

Suppose we want our UI to look like below to display Employee data and their EmployeeAddress information in a data grid view:

Let’s go through each of control one by one:

1. Adding an Employee details view with data-binding

In the tree view of the Data Source Window, we can see the business objects and data fields are displayed together with control icons. The icons indicate which control will be generated after drag and drop to a container control (such as Grid, ScrollView, etc.) in the Silverlight designer surface. The Data Source Window set default controls based on the data type. From the picture above, we can see the default control for Employee is a DataGrid. But we definitely can change that by clicking the arrow button next to Employee:

Here, let’s choose Details in the drop-down list. We’ll see the icon has changed after clicking that:

The Data Source Window also allows us to add more control associations (including user custom controls) with a type through Customize Control Browser:

Now let’s drag the Employee node and drop it to the designer surface of MainPage.xaml. We will see the details view is generated for the Employee. Check the code in XAML, we’ll see the code is generated like below:

<riaControls:DomainDataSource AutoLoad="True" Height="0" LoadedData="employeeDomainDataSource_LoadedData" Name="employeeDomainDataSource" QueryName="GetEmployeesQuery" Width="0">

<riaControls:DomainDataSource.DomainContext>

<my:EmployeeContext />

</riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

....

....

</Grid>

The DomainDataSource is generated, and the generated input controls set the binding path to the DomainDataSource so as to load data. The validation is also enabled in the binding path.

Run the application, we will see Employee data is loaded into the details view without writing any code.

2. Associate a DataPager with the Employee details

To achieve this, you can follow the steps below:

a) Drag and drop a DataPager from the Toolbox (if you don’t find it, you can add that by right-click the Toolbox and select Choose Items…) to the designer surface.

b) Drag and drop Employee node to the DataPager that is just dropped on the designer.

c) In the property window, set PageSize of the DataPager to 1.

Now we can run the application and see how the DataPager works with the Employee details.

3. Add EmployeeAddress data grid view which is corresponding to what is selected in the Employee details view

To do so is pretty simple. The tree view also displays the relationships between business objects. For example, here we can see Employee has relationship with itself, as well as EmployeeAddress. Let’s drag and drop the EmployeeAddresses in the Employee tree to the designer surface. We will see a DataGrid is generated with columns customized through the Data Source Window.

Run the application. Now with each selected Employee, the DataGrid will display corresponding EmployeeAddress data.

As a matter of fact, the Data Source Window supports more scenarios than this. It will save a lot of coding time on some trivial data-binding work if it’s fully made use of. To get more information about it, check the walkthrough on MSDN, which will help you get full understanding about this feature. Enjoy!

Integrate SharePoint List Data in Your WPF Application

dubin — Thu, 26 Nov 2009 05:00:00 GMT

With the SharePoint 2010 Beta came out of the door, one of the exciting news is that it allows developers to access SharePoint List Data using ADO.Net Data Service 1.5. If you are familiar with Data Service Client programming mode (we have already posted some articles here), it will be very easy to integrate SharePoint List Data in your application.

Once you set up the SharePoint with ADO.Net Data Service (see How-To here ), you can check the Data Service through http://<SharePointServer>/_vti_bin/ListData.svc. Now we are going to show you how to program against the service in Visual Studio 2010 Beta2.

In Visual Studio 2010, developers can add Data Source to ADO.Net Data Service through Data Source Configuration Wizard, you can do the same thing for SharePoint Data service. Here we create a Visual Basic WPF Application, after launching the Wizard (Menu->Data->Add New Data Source), we can see a SharePoint entry as following.

After selecting the SharePoint Icon and clicking “Next” button, “Add Service Reference” will be launched. Instead of remembering the long address of the service, you only need to input the SharePoint site (eg, my sample site is http://vspro-vm-bdc1 ) then click “Go” button. Visual Studio will heuristically find the service address for you. Once it’s populated, you can click “OK” button and finish adding the data source.

Then you can open the Data Source Window (Menu->Data->Show Data Source) and check the schema of the SharePoint List Data.

As same as other data sources we introduce before, we can drag the SharePoint Data Source from Data Source Window and drop to WPF Designer. It will generate the UI with Data Binding automatically.

If you open the code-behind file (MainWindow.xaml.vb), you will notice Visual Studio has already generated the sample code so that you can simply follow the comment to fill the data.

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

Dim AnnouncementsViewSource As System.Windows.Data.CollectionViewSource = CType(Me.FindResource("AnnouncementsViewSource"), System.Windows.Data.CollectionViewSource)

'Load data by setting the CollectionViewSource.Source property:

'AnnouncementsViewSource.Source = [generic data source]

End Sub

As we mentioned before, accessing SharePoint List Data is the same as other ADO.Net Data Service. The following is a sample code to load data using the default credential.

Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

Dim AnnouncementsViewSource As System.Windows.Data.CollectionViewSource = CType(Me.FindResource("AnnouncementsViewSource"), System.Windows.Data.CollectionViewSource)

'Load data by setting the CollectionViewSource.Source property:

Dim Context As New SharePointReference.TeamSiteDataContext(

New Uri("http://vspro-vm-bdc1/_vti_bin/ListData.svc", UriKind.Absolute))

Context.Credentials = System.Net.CredentialCache.DefaultCredentials

AnnouncementsViewSource.Source = Context.Announcements.Execute().ToList()

End Sub

So far we have finished the simple application with the SharePoint List Data Source. Cheers!

WPF Data Binding: How to Bind DataSet to WPF Designer

Yaohai — Fri, 13 Nov 2009 05:58:00 GMT

WPF Data Binding: How to Bind DataSet to WPF Designer

In our previous posts, we mostly used the Entity Data Model as the ORM (Object-relational mapping) layer for the WPF Data Binding scenarios.

Meanwhile, since DataSet is used broadly, we also provide the DataSet as a supported DataSource in the Data Binding stories. Following is a step-by-step example using C#. The example is based on Visual Studio 2010 Beta2 version.

Bind DataSet to WPF designer:

1. Open Visual Studio. From the main menu: File->New Project, choose WPF Application to create a new C# application. Here, we assume the project name to the default one: WpfApplication1.

2. From the main menu: Data->Add New Data Source…->DataBase->Dataset to trigger Data Source Wizard.

3. Follow the Wizard to connect to a Northwind SQL Server database, and choose tables: Customers, Orders. Following is what the Dataset designer looks like after this step finished:

4. From the main menu: Data->Show Data Sources to show the Data Sources Tool Window, and make sure that MainWindow.xaml is the active window:

5. Switch back to DataSources Tool Window, you can click on Customers node and click the drop-down menu. On the context menu, choose “Customize…” to popup the “Customize Control Binding” dialog. Select the ComboBox for the [List] Data type:

6. Bind the Customers to the “Combobox” control. After above steps, following is the snapshot before the drag&drop operation. From its icon, you can see the Customers is bound to Combobox now.

7. Drag&drop the Customers table to the top-left corner. Then, drag&drop the Customers.Orders to the center of the WPF designer. To layout the controls as follow:

With these steps, a simple DataSet Master-Details application is created. Press “Ctrl + F5” to run the application and see the data.

Behind the Scenes:

In step 5, there are two parts of code generated: One is the xaml markup code and the other is the C# code behind. The generated code is for demonstration purpose. Here, I will explain their corresponding meanings to provide guideline for modifying the code.

Regarding the xaml code, besides the markups for the controls/data-binding, which are the same when using the EDM as the ORM layer, it also generates resources section for the Window:

<Window.Resources>

<my:NorthwindDataSet x:Key="NorthwindDataSet" />

</Window.Resources>

The first line defines an object resource of the NorthwindDataSet instance, which is specific to DataSet. So when a Window is initialized, there will be a DataSet instance created. The 2^nd and 3^rd lines of code are doing master-details data-binding leveraging CollectionViewSource.

The generated C# code behind is:

private void Window_Loaded(object sender, RoutedEventArgs e)

{

WpfApplication1.NorthwindDataSet NorthwindDataSet = ((WpfApplication1.NorthwindDataSet)(this.FindResource("NorthwindDataSet")));

// Load data into the table Customers. You can modify this code as needed.

WpfApplication1.NorthwindDataSetTableAdapters.CustomersTableAdapter northwindDataSetCustomersTableAdapter = new WpfApplication1.NorthwindDataSetTableAdapters.CustomersTableAdapter();

northwindDataSetCustomersTableAdapter.Fill(NorthwindDataSet.Customers);

System.Windows.Data.CollectionViewSource customersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersViewSource")));

customersViewSource.View.MoveCurrentToFirst();

// Load data into the table Orders. You can modify this code as needed.

WpfApplication1.NorthwindDataSetTableAdapters.OrdersTableAdapter northwindDataSetOrdersTableAdapter = new WpfApplication1.NorthwindDataSetTableAdapters.OrdersTableAdapter();

northwindDataSetOrdersTableAdapter.Fill(NorthwindDataSet.Orders);

System.Windows.Data.CollectionViewSource customersOrdersViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("customersOrdersViewSource")));

customersOrdersViewSource.View.MoveCurrentToFirst();

}

Again, the 1^st line is getting the DataSet object instance from the WPF designer resource dictionary. The 2^nd line is loading the Customers data into the table. You can replace it with other DataSet object instance as you prefer. The 3^rd and 4^th lines are initializing the CollectionViewSource. The lines 5~7, which are for the table Customers.Orders, are similar to lines 2~4.

You may notice that the data is loaded when the application starts. If you prefer to load it on demand, you can move this code to some other event handler such as a button click or something like that.

Hope this helps.

Accessing Master-Detail Data through ADO.NET Data Service in a Silverlight Application (Part 2)

XiangZeng — Sat, 07 Nov 2009 10:42:00 GMT

In Part 1 of this post, we developed our Silverlight application to access data through an ADO.NET Data Service. So far we are able to load the data at run time and navigate through the data records back and forth. Let’s now develop more functionality to update data, delete records, and add new records.

Updating Data Records

Our data is accessed through the Service Reference we added to our Silverlight application. However, the Service Reference does not keep track of the changes that we make in the application. This is actually due to a limitation of ADO.NET Data Service Client Library. We have to have a mechanism to notify the DataContext object about changes. In Part 1, we added the data we retrieved through the service into an ObservableCollection<T> so that we can get notifications when data get added, updated or removed. We can then notify the DataContext by implementing System.ComponentModel.INotifyPropertyChanged on the DataContract classes.

For example, in order to notify NorthwindEntities (the DataContext object) about changes of the CompanyName property of Customer (the DataContract object), we can do the following:

public partial class Customer : INotifyPropertyChanged

{

public event PropertyChangedEventHandler PropertyChanged;

partial void OnCompanyNameChanged()

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs("CompanyName"));

}

The OnCompanyNameChanged() partial method is defined (yet not implemented) in the generated Reference.cs file of the Service Reference. You can find this file in Solution Explorer under “Service References” – “NorthwindServiceReference” – “Reference.datasvcmap” – “Reference.cs”.

For this application, we are creating a class file “NorthwindEntitiesChangeManager.cs” in the Silverlight application. For every updatable property of Customer, Order, and Order_Details, we implement the On<PROPERTY>Changed partial method in the same manner as above.

We’ll also need to notify the DataContext object about DataContract object changes. Therefore, we are modifying the OnDataLoadComplete method to hook up the change events:

private void OnDataLoadComplete(IAsyncResult result)

{

List<Customer> custs = qry.EndExecute(result).ToList();

foreach (Customer cust in custs)

{

cust.PropertyChanged += new PropertyChangedEventHandler(cust_PropertyChanged);

foreach (Order ord in cust.Orders)

{

ord.PropertyChanged += new PropertyChangedEventHandler(ord_PropertyChanged);

foreach (Order_Details od in ord.Order_Details)

{

od.PropertyChanged += new PropertyChangedEventHandler(od_PropertyChanged);

}

data.Add(cust);

}

cvs.Source = data;

}

Handling the PropertyChanged events is to call UpdateObject() method on the DataContext object:

void cust_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Customer);

}

void ord_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Order);

}

void od_PropertyChanged(object sender, PropertyChangedEventArgs e)

{

this.ctx.UpdateObject(sender as Order_Details);

}

Deleting Data Records

To delete records, we need to call the DeleteObject() method on the DataContext object.

The following code deletes the current Customer, and all the related Orders and Order_Details, similar to a CASCADE deletion on the database backend:

void DeleteItem_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current customer and all the related order information?";

if (HtmlPage.Window.Confirm(msg))

{

Customer cust = cvs.View.CurrentItem as Customer;

foreach (Order ord in cust.Orders)

{

foreach (Order_Details od in ord.Order_Details)

{

this.ctx.DeleteObject(od);

}

this.ctx.DeleteObject(ord);

}

this.ctx.DeleteObject(cust);

this.data.Remove(cust);

this.bindingNavigator1.RecordCount--;

this.bindingNavigator1.RefreshControls();

}

Similarly, we can delete the current selected Order and its Order_Details using the following code:

private void btnDeleteOrder_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current order and all the order details?";

if (HtmlPage.Window.Confirm(msg))

{

Order ord = this.ordersDataGrid.SelectedItem as Order;

int curOrderID = ord.OrderID;

foreach (Customer cust in this.data)

{

if (cust.CustomerID == ord.CustomerID)

{

foreach (Order o in cust.Orders)

{

if (o.OrderID == curOrderID)

{

List<Order_Details> order_DetailsToRemove = new List<Order_Details>();

foreach (Order_Details od in o.Order_Details)

{

ctx.DeleteObject(od);

order_DetailsToRemove.Add(od);

}

foreach (Order_Details odToRemove in order_DetailsToRemove)

{

o.Order_Details.Remove(odToRemove);

}

ctx.DeleteObject(o);

cust.Orders.Remove(o);

break;

}

break;

}

And here’s the code to delete the currently selected Order_Details:

private void btnDeleteOrder_Detail_Click(object sender, RoutedEventArgs e)

{

string msg = "Are you sure you want to delete the current order detail?";

if (HtmlPage.Window.Confirm(msg))

{

Order_Details curOrder_Detail = this.order_DetailsDataGrid.SelectedItem as Order_Details;

ctx.DeleteObject(curOrder_Detail);

Order curOrder = this.ordersDataGrid.SelectedItem as Order;

int curOrderID = curOrder.OrderID;

foreach (Customer cust in this.data)

{

if (cust.CustomerID == curOrder.CustomerID)

{

foreach (Order o in cust.Orders)

{

if (o.OrderID == curOrderID)

{

o.Order_Details.Remove(curOrder_Detail);

break;

}

break;

}

Adding New Data Records

To add new records, we can call the Create<OBJECT> method on the DataContract object, and then call the AddTo<OBJECTS> method of the DataContext object. For example, to add a new Customer, we can use the following:

Customer cust = Customer.CreateCustomer("ABCDE", "ABCDE Corp");

this.ctx.AddToCustomers(cust);

By drag-dropping data sources from the Data Sources window, we can easily create new data entry UI as Silverlight controls. This is the new data entry UI I created by stripping data binding XAML from the generated UI:

The Orders table in the database has OrderID as an IDENTITY field (auto-increment), so we can create a new Order object by setting -1 as OrderID:

Order ord = Order.CreateOrder(-1);

Customer cust = this.cvs.View.CurrentItem as Customer;

ord.CustomerID = cust.CustomerID;

// Set other properties …

cust.Orders.Add(ord);

this.ctx.AddToOrders(ord);

Here’s the code to create a new Order_Details:

Order ord = this.ordersDataGrid.SelectedItem as Order;

int productID = Int32.Parse(this.order_DetailsDataEntry.productIDTextBox.Text); //32

decimal unitPrice = Decimal.Parse(this.order_DetailsDataEntry.unitPriceTextBox.Text);

short quantity = short.Parse(this.order_DetailsDataEntry.quantityTextBox.Text); //5

float discount = float.Parse(this.order_DetailsDataEntry.discountTextBox.Text); //0.25f

Order_Details od = Order_Details.CreateOrder_Details(ord.OrderID, productID, unitPrice, quantity, discount);

ord.Order_Details.Add(od);

this.ctx.AddToOrder_Details(od);

Saving Changes

To save changes, we can simply call the SaveChanges() method on the DataContext object. The code is similar to the following (note you may want add code to handle data update exceptions not done here):

void SaveItem_Click(object sender, RoutedEventArgs e)

{

ctx.BeginSaveChanges(System.Data.Services.Client.SaveChangesOptions.Batch, new AsyncCallback(OnSaveChangesComplete), null);

}

void OnSaveChangesComplete(IAsyncResult result)

{

ctx.EndSaveChanges(result);

}

Summary

Up to this point, we have developed a Silverlight application capable of loading data through an ADO.NET Data Service, navigating through the data records, performing updating/deleting/inserting operations, and finally committing changes to the database backend. Data validation and error handling during save is not handled here but users can easily hook up their own business logic.

Hope you will enjoy developing data applications with Silverlight.

Accessing Master-Detail Data through ADO.NET Data Service in a Silverlight Application (Part 1)

XiangZeng — Thu, 22 Oct 2009 18:26:00 GMT

With Visual Studio 2010 Beta2, users can add data sources to a Silverlight application using the Data Source Configuration Wizard. The added data source is shown in the Data Sources tool window, and can be drag-dropped to Silverlight designer, with data-bound controls automatically generated.

In this post, I’ll walk you through the steps of creating an ADO.NET Data Service to access data using Entity Data Model, and creating a Silverlight application to consume the data service. We’ll build a classic Northwind order management application where users can do CRUD operations on customer and order information through the service. The completed application will look like this:

Note: Although the following walkthrough uses Visual C# as the programming language, you can complete it in VB as well to achieve the same functionalities.

Creating an ADO.NET Data Service

To create an ADO.NET Data Service, we will need to first create a new ASP.NET Web Application to host the service. Here are the steps to create the project, define an ADO.NET Entity Data Model, and add ADO.NET Data Service:

1. Select Visual Studio File->New Project menu, and choose ASP.NET Web Application.

2. From Solution Explorer, right click the Web Application project node, and choose Add New Item. In the Add New Item dialog, choose ADO.NET Entity Data Model under the Data category. This will invoke the Entity Data Model Wizard.

3. Follow the Entity Data Model Wizard to connect to a Northwind SQL Server database, and choose tables: Customers, Orders, and Order_Details.

4. From Solution Explorer, right click the Web Application project node, and choose Add New Item. In the Add New Item dialog, choose ADO.NET Data Service under the Web category.

5. The WebDataService1.svc.cs (or WebDataService1.svc.vb) file will be opened in VS code editor. We’ll need to modify the code as follows to expose the data model and set appropriate access rules. Note we have changed the default EntitySetRights from AllRead to All so that we are able to update the entities later.

public class NorthwindWebDataService : DataService< NorthwindEntities >

{

public static void InitializeService(DataServiceConfiguration config)

{

config.SetEntitySetAccessRule("*", EntitySetRights.All);

config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

6. Build the project.

At this point, our Data Service is ready to be consumed by client applications.

Creating a Silverlight Application to Consume the ADO.NET Data Service

Now let’s create a Silverlight Application to consume the data service. The following steps create a Silverlight application, and add a new data source to consume the above ADO.NET Data Service:

1. From Visual Studio File->Add New Project menu, choose Silverlight Application.

2. On the New Silverlight Application dialog, accept the default to host the Silverlight Application in the above ASP.NET Web Application.

3. From Visual Studio Data menu, choose Add New Data Source.

4. On the Data Source Configuration Wizard, choose Service as the data source type, and click Next.

5. This will bring up the Add Service Reference dialog. Since our data service is in the same solution, we can click the Discover button to find the above ADO.NET Data Service, or type in the service address (like http://localhost:<PORT NUMBER>/WebDataService1.svc), and click OK.

6. Finish the Data Source Configuration Wizard. A new Service Reference will be added in Solution Explorer, with a code file containing data classes used to access and interact with data service resources as objects.

Drag-dropping Data Sources onto Silverlight Designer

In the above steps, we have added a Service data source to the Silverlight application. If you open the Data Sources tool window, the data objects accessible through the ADO.NET Data Service should be shown and available for drag-dropping to the Silverlight designer. However, due to a bug not yet fixed, you may need to close VS and then reopen it (this bug applies only to data services created within the same solution. If you have an existing data service, the Data Sources window will show the data objects immediately).

1. From Visual Studio Data menu, choose Show Data Sources. The Data Sources tool window will show up with data objects from the ADO.NET Data Service: Customers, Orders, and Order_Details.

2. In the Northwind Order Manager application, we want to show the customer information as details rather than the default DataGrid. To do this, in the Data Sources window, drop-down the Customers ComboBox, and choose Details.

3. Now drag Customers node to MainPage.xaml designer. The customer information is generated on the designer as data-bound controls. The XAML code also contains data binding information similar to the following:
<CollectionViewSource x:Key="customersViewSource" d:DesignSource="{d:DesignInstance my:Customer, CreateList=True}" />

4. To show the related Orders and Order_Details information, drag Customers.Orders (IMPORTANT: this is the child node Orders, under Customers node) and Customers.Orders.Order_Details from Data Sources Window to MainPage.xaml designer. The generated CollectionViewSource nodes in the XAML file will be similar to the following:
<CollectionViewSource x:Key="customersOrdersViewSource" Source="{Binding Path=Orders, Source={StaticResource customersViewSource}}" />

Writing Code to Load Data at Run Time

We’ll need to write some code to load the data at run time. Let’s declare some private members in the MainPage class in MainPage.xaml.cs:

private NorthwindEntities ctx; // The data context

private CollectionViewSource cvs; // The CollectionViewSource to bind data

private DataServiceQuery<Customer> qry; // The query to load data

private System.Collections.ObjectModel.ObservableCollection<Customer> data = new System.Collections.ObjectModel.ObservableCollection<Customer>();

In the MainPage.xaml.cs LayoutRoot_Loaded event handler, add the following code to instantiate the data service, define a DataServiceQuery and execute it to retrieve data. The retrieval of data is done through an asynchronous call.

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

{

ctx = new NorthwindEntities(new Uri("http://localhost:<PORT NUMBER>/NorthwindWebDataService.svc"));

cvs = this.Resources["customersViewSource"] as CollectionViewSource;

qry = ctx.Customers.Expand("Orders").Expand("Orders/Order_Details");

qry.BeginExecute(new AsyncCallback(OnDataLoadComplete), null);

}

private void OnDataLoadComplete(IAsyncResult result)

{

List<Customer> custs = qry.EndExecute(result).ToList();

foreach (Customer cust in custs)

{

data.Add(cust);

}

cvs.Source = data;
}

Note we are using an ObservableCollection<T> to be the Source of the CollectionViewSource, rather than just a List<T> or DataServiceQuery<T> . This is so that we can get notifications when data get added, updated or removed since we are going to update and save data later. If you do not need to update data, you may just need to set the CollectionViewSource.Source to the DataServiceQuery like :

cvs.Source = ctx.Customers.Expand("Orders").Expand("Orders/Order_Details");

Navigating through Data

To add the functionality of navigating through data at run time, we can create a Silverlight User Control similar to the following:

The XAML for one of the buttons is similar to this:

<Image.OpacityMask>

<ImageBrush.ImageSource>

</ImageBrush.ImageSource>

</ImageBrush>

</Image.OpacityMask>

</Image>

</Button>

To move to the beginning of the data collection, we can handle the MoveFirstItem button Click event with the following code:

private void moveFirstItem_Click(object sender, RoutedEventArgs e)

{

cvs.View.MoveCurrentToFirst();

RefreshControls();

}

The RefreshControls() method handles the logic to update the current position display and enable or disable buttons based on the current record position:

private void RefreshControls()

{

int pos = cvs.View.CurrentPosition;

this.positionItem.Text = (pos + 1).ToString(System.Globalization.CultureInfo.CurrentCulture);

this.countItem.Text = String.Format(this.countItemTemplate, this.recordCount);

this.moveFirstItem.IsEnabled = (pos > 0);

this.movePreviousItem.IsEnabled = (pos > 0);

this.moveNextItem.IsEnabled = (pos < this.RecordCount - 1);

this.moveLastItem.IsEnabled = (pos < this.RecordCount - 1);

this.deleteItem.IsEnabled = (this.RecordCount > 0);

}

Similarly, we can use the following code to navigate through the records by moving back and forth:

private void movePreviousItem_Click(object sender, RoutedEventArgs e)

{

cvs.View.MoveCurrentToPrevious();

RefreshControls();

}

private void moveNextItem_Click(object sender, RoutedEventArgs e)
{
cvs.View.MoveCurrentToNext();
RefreshControls();
}

private void moveLastItem_Click(object sender, RoutedEventArgs e)
{
cvs.View.MoveCurrentToLast();
RefreshControls();
}

We also provide the functionality to navigate to a specific position using the TextBox to accept user input, and navigate when the user presses the ENTER key with a valid position entered. If the number entered is not valid, it will just be ignored and the record stays at the current position. If the number is smaller than 1, we navigate to the first record instead. If the number entered is greater than the record count, we navigate to the last record.

private void positionItem_KeyDown(object sender, KeyEventArgs e)

{

if (e.Key == Key.Enter)

{

TextBox txt = sender as TextBox;

int curPos = this.cvs.View.CurrentPosition + 1;

int pos;

bool isValid = int.TryParse(txt.Text, out pos);

if (!isValid)

{

txt.Text = curPos.ToString();

}

else

{

if (pos <= 1)

{

pos = 1;

}

else if (pos > this.recordCount)

{

pos = this.recordCount;

}

if (curPos != pos)

{

this.cvs.View.MoveCurrentToPosition(pos - 1);

}

txt.Text = pos.ToString();

RefreshControls();

}

Next Steps

The next part of this post will add functionalities to update and save Customers, Orders and Order_Details. We will also develop the application to be able to delete data and add new records.

Entity Data Model: working with foreign key when you don’t have it

Yang Cao — Thu, 15 Oct 2009 23:05:00 GMT

It’s been debatable whether to include FK (foreign key) columns in the conceptual model. That’s why in Visual Studio 2010, a checkbox is added to Entity Data Model Wizard, so that the decision is left to the developers. While I was playing with it yesterday, I found FK particularly useful in the following scenario.

The application I was trying to build is really simple: change an order’s related customer from A to B.

If FK (CustomerID) is in my Order entity, I could just do a lookup binding to this FK column, and call dataContext.SaveChanges().The drag-n-drop way of doing lookup binding to a ComboBox is to first drag the FK property (in this example, CustomerID in Order entity) with a ComboBox control, and drop it onto the form. Then drag the related lookup table (Customer entity) and drop it onto the previously created ComboBox control. The SelectedValue, SelectedValuePath, ItemsSource, and DisplayMemeberPath properties will be set for you.

Things become a little bit tricky if I don’t have the FK in the entity.

Data bind Orders to a DataGrid

This step is fairly easy. Just drag Orders node onto the WPF Designer.

Create lookup binding to a ComboBox

Because I don’t have the FK column in the model, there’s no CustomerID property in Order entity. To create the lookup binding, I need to expand the navigation property Customer in Orders, and bind the CustomerID to a combobox.

After I drag-n-drop this node onto WPF Designer, I will have created a complex binding. To make it a lookup binding, I will link the newly created combobox to the lookup table. The way to do it is to drag the Customers node (marked with 2 on the picture above), and drop it onto the combobox. Please notice that while doing this, your cursor will change from a little + to an arrow, to indicate that we will not generate a new control. Instead, an existing control will be updated with the dragged data source.

Create button to save changes
Then I will add a button to “Update Customer”. In the click event handler, I need to find current selected order, get the new CustomerID that replace the old FK value, and save the changes:

Order currentOrder = (Order)ordersViewSource.View.CurrentItem;

string customerID = customerIDComboBox.SelectedValue.ToString();

currentOrder.CustomerReference.EntityKey.EntityKeyValues[0].Value = customerID;

northwindEntities.SaveChanges();

I made the data context (northwindEntities) and colletion view source (ordersViewSource) to be the property in MainWindow class, to make the code simple. I need to drill down into the order, find the CustomerReference, and set the EntityKeyValue.

F5
Debug the application now. Everything looks good at first, but when I change the customer from one to another in the drop-down combobox, Bang! I get an InvalidOperationException: The property 'CustomerID' is part of the object's key information and cannot be modified. Although I successfully created the lookup binding, I cannot modify the value because the SelectedValue is not the FK in Order, but the PK in Customer!

This tells me that the combobox should be bound OneWay. I locate the combobox in XAML, and updated the SelectedValue binding mode:

SelectedValue="{Binding Path=Customer.CustomerID,Mode=OneWay}"

F5 again
Now change selection in the combobox will not trigger the exception anymore. I click on the “Update Customer” button to continue testing, bang (again)! This time, it says EntityKey values cannot be changed once they are set. I don’t believe there’s no way to do it, so I searched around the web and found that although the value cannot be reset, the entity key can be. Now let’s assign the FK value in this way:

currentOrder.CustomerReference.EntityKey = new System.Data.EntityKey(

currentOrder.CustomerReference.EntityKey.EntityContainerName+"."+currentOrder.CustomerReference.EntityKey.EntitySetName,

"CustomerID", customerID);

You could also use KeyValuePair if you have a complex key composed of more than one property. For more information, please see here.

After all the steps above, my application finally works as I expected. You might ask, why don’t you just include the key to save all these coding and bang (runtime exception)? Some developers, as I said, vote for not including FK in the conceptual model because FK is a relational database concept and it will pollute the object world. Another reason is, the feature of include FK is only available in Visual Studio 2010, targeting .NET framework 4.0, for newly added tables. If you have an existing entity data model, you would still need to get yourself used to the life without FK.

Please let me know if you have any other idea or question about this!

Cheers!

[Update 10/20]: Alex has a post talking about this too. He suggested a way of wrapping the entity key so that a FK property is added into the partial class. Please check it out here: http://msdn.microsoft.com/en-us/vbasic/bb735936.aspx

Refresh the Primary Key Identity Column during Insert Operation

John Chen — Tue, 15 Sep 2009 08:17:46 GMT

If you have an identity primary key column defined in a database table, its value will be automatically set by the database engine when you insert a new row to the table. The identity value is determined by the column’s Identity Seed and Identity Increment properties.

While in your client application, you can insert a new row into a corresponding ADO.NET DataTable (DataTable can be seen as the in memory cache of the data table in the database, I will use DataTable as the example in this post). You will not get the true value until you commit the update to the database. What you see before the update is not what you get after the update. For better user experience, you really want to refresh the database to retrieve the correct identity value back right after the insert operation.

In this post, I will describe the way to retrieve the identity value in ADO.NET applications with the help of Visual Studio Database Tools. I will start with a sample Windows Forms application using DataSet. My database server is SQL Server.

First in Visual Studio (2005 and after) server explorer, I establish a data connection connects to a SQL Server database. I create a data table in the database called MyCustomer with three columns: CustId, Name and Company. CustId is defined as primary key and an identity column. Identity Seed and Identity Increment are set as 1 by default as shown in Figure 1 below.

Figure 1 MyCustomer table defined in database

Then I create my DataSet through the Data Source Configuration Wizard, or by adding a DataSet and then dragging and dropping MyCustomer from Server Explorer to the DataSet Designer. By opening the DataSet and selecting the CustId column, you will see that it has the following properties: AutoIncrement=True, and AutoIncrementSeed = -1 , AutoIncrementStep = -1 (Figure 2). These properties are used by ADO.NET to auto generate the CustId’s placeholder values for newly added rows.

Figure 2. CustId properties in the DataTable

The AutoIncrement property corresponds to the Identity property in the database. AutoIncrementSeed corresponds to Identity Seed, and AutoIncrementStep to Identity Increment. You may be curious why both AutoIncrementSeed and AutoIncrementStep are set to -1. This is an approach to ensure that the placeholder values that ADO.NET generates will not conflict with values that already exist in the database. Another benefit is it looks like unreal so users will know that it is just a temporary placeholder value.

Now if you click on the MyCustomerTableAdapter header and show its CommandText for Insert Command, you will see this:

INSERT INTO [MyCustomer] ([Name], [Company]) VALUES (@Name, @Company);

SELECT CustId, Name, Company FROM MyCustomer WHERE (CustId = SCOPE_IDENTITY())

The command text contains two statements and the second one is used to retrieve the primary key value after the insert operation is committed. Notice the use of the SCOPE_IDENTITY function, which is defined so in MSDN:

“SCOPE_IDENTITY (Transact-SQL) Returns the last identity value inserted into an identity column in the same scope. A scope is a module: a stored procedure, trigger, function, or batch. Therefore, two statements are in the same scope if they are in the same stored procedure, function, or batch”

The auto generation of the second statement in Insert command is controlled by the “refresh data table option” in the TableAdapter Configuration Wizard (Figure 3).

Figure 3. Refresh the data table advanced option in the TableAdapter Configuration Wizard

Now let’s take a look what is the experience when applying this refresh data table feature at run time. Let me open the Form and then show the Data Sources Window. From the Data Sources Window, I drag and drop the MyCustomer table to the Form and I get the following layout (Figure 4):

Figure 4. At design time: Drag and Drop MyCustomer from the Data Sources window to the form

Hit F5 to run the app. Click on the Add New (the + sign) button to add some rows. Notice that I will get values of -1, -2, -3, etc. for CustId column.

Figure 5. CustForm at run time, before committing

Now I click the Save (the disk sign) button and I see that the CustIds are updated to 9,10,11. Oh! I would expect to get 2,3,4; someone may beat me and add some rows before me. You see that using -1,-2,-3 really make sense here to clearly indicate that the values are not committed.

Figure 6. CustForm at run time, after committing

Now if you are using MS Access database or SQL CE, you will see that the above walk through does not work as expected. When you click the save, the primary key -1,-2,-3 keep unchanged. If you check on the TableAdapter Configuration Wizard, the Refresh the data table option is disabled. If you check the generated insert command, there is only one statement. This is because MS Access database and SQL CE do not support batching SQL statements and therefore cannot use the SCOPE_IDENTITY function. The build-in refresh the data table option is not available for these databases.

The good news is there is a sound workaround to fix this by reset the primary key identity value on Adapter.RowUpdated event. Please see Beth Massi’s blog: Using TableAdapters to Insert Related Data into an MS Access Database. Beth promised to write a follow up post for SQL CE as well. J

In summary, SQL server or any database supporting batching operation has a reliable way to retrieve the identity value through the usage of the SCOPE_IDENTITY function. Visual Studio Data Tool provides the auto generated Insert command that leverages this support with the “Refresh the data table” option turn on by default. For databases that do not support batching of SQL statements, resetting the primary key value on row updated event is a good workaround.

DataRepeater Control for Windows Forms

John Chen — Wed, 12 Aug 2009 23:44:00 GMT

The DataRepeater control is available in the Visual Basic Power Packs.

As Yun Feng introduced in his post, the Visual Basic Power Packs is included in Visual Studio 2008 Service Pack 1 and will also be shipped in Visual Studio 2010.

The DataRepeater control is my favorite component in the Visual Basic Power Packs, which I proudly participated in from start to finish. Recently I monitored the Visual Basic Power Packs forum and I found that customers are saying nice things about the DataRepeater control as well. A lot of good questions have been asked in the forum. For example, how to print all the data in the DataRepeater, how to display unbound data, how to host a data bound ComboBox in the DataRepeater, etc… I feel motivated to write some posts to answer these non-obvious questions.

In this post, I will first present the unique features of the DataRepeater control from my perspective. Then I will show a simple walk through for using a DataRepeater control in a data binding application. At the end, I will list the resources available for reference.

First of all, I would like to point out that the DataRepeater control is a true .Net Windows Forms control. It can be used not only by Visual Basic but also for any other .Net language (e.g. C#). You may be curious why it is under the Visual Basic Power Packs “brand”. The project was initially designed to help VB6 customers migrating to the .Net world with familiar experience and environment. We started the project with the Visual Basic customers in mind as there was already a Data Repeater Control in Visual Basic 6 and unfortunately there was no corresponding control in Visual Studio.Net 2002 to 2008. After we created the control we realized that it would be good for all .NET customers and we decided to make it available to all of Visual Studio.

To differentiate the DataRepeater controls in VB6 and the one now in Visual Studio 2008 SP1, in this article I would call them VB6 DataRepeater and PowerPacks DataRepeater (or simply DataRepeater). The PowerPacks DataRepeater inherits the basic concept of the VB6 DataRepeater control to display repeated data in a scrollable container. Even more, the PowerPacks DataRepeater has significant improvements over the VB6 DataRepeater. The PowerPacks DataRepeater is modern (as I said, it is a .Net control can be used by all languages), more powerful, has more functions, and yet easier to use taking all the advantages of the .Net and Visual Studio Data Access tools and technologies.

For example, in VB6, you need to create an intermediate user control to host the VB6 DataRepeater and set up the data binding there, build it and then include the user control in the host form. With PowerPacks DataRepeater, the intermediate user control is no longer needed! You can now drag and drop the DataRepeater control onto the hosting form directly, and then drag and drop controls on its item template section. You will enjoy a truly WYSIWYG design experience.

Although both DataRepeater controls can host free style controls in the item template section, the PowerPacks DataRepeater allows you to have even more controls on the layout and the appearance of the repeating items. You can use the DrawItem event to customize the color or other appearances as you wish. The LayoutStyle property lets you specify orientation (vertical or horizontal) of the displayed items. The orientation feature is really attractive and I have seen some customers choose the DataRepeater over the DataGridView simply because the DataRepeter can show data in horizontal orientation.

Talking about the DataGridView, the PowerPacks DataRepeater control can be seen as an alternative control to the DataGridView. The PowerPacks DataRepeater follows the design of the DataGridView and you can find many properties (e.g. the Virtual Mode property) in DataRepeater control in parity with the DataGridView. This description from MSDN document best describes the role of the PowerPacks DataRepeater -- “It can be used as an alternative to the DataGridView control when you need more control over the layout of the data.”

The PowerPacks DataRepeater control applies a virtualization technique to display the data in a fashion that scrolling and navigation is fast while rich UI and visual effects are still retained. For example, all displayed controls on the display surface are real controls and you can interact with them without delay. Scrolling is smoothly simulated while VB6 DataRepeater does not have a scroll effect.

You can further improve performance by turning on the Virtual Mode when you want to display large quantities of tabular data in a PowerPacks DataRepeater control. The Virtual Mode allows you explicitly manage the control’s interaction with its data source. Therefore you can load the data rows only when necessary to reduce the initial loading time. You can also reduce the memory consumption by only loading part of the rows into memory at any given time. Notice that if you already have all data rows loaded into memory like a DataSet filled by the TableAdapter.Fill method, you will not have the performance gain with Virtual Mode.

To demonstrate the ease of use of the PowerPacks DataRepeater control, let me give you a walkthrough for building an application with the DataRepeater control.

First I would create a C# Windows Forms Application in Visual Studio 2008 SP1 or 2010 (yes, I purposely choose a C# project here to show that it is not only for VB, the steps in this demo have no difference between C# and VB).

And then I want to create a DataSet data source with the DataSource Configuration Wizard or DataSet Designer. I will assume you are familiar with this part and a DataSet with Employees table connecting to the sample Northwind database is ready to use. You will see that the Data Sources Window on the left hand side is populated with the Employees Datatable (see Picture 1 bellow).

Picture 1 – DataSet designer and Data Sources window.

Now, let’s open the Form and show the Toolbox. You can find the Power Packs tab (see picture 2, marker 1, shortened as Pic.2-1), expand it and you will find the DataRepeater toolbox item (Pic.2-2). Drag and drop the DataRepeater toolbox item to the form (Pic. 2-3), you will see two sections in the location of the DataRepeater1 control on the form. The outer section (Pic.2-4) is the total display area of the control and the inner section (Pic.2-5, a.k.s. the Item Template section) holds the repeating items. It also defines the size of the repeating items and the location of the first item. You can fine tune the look and feel of the outer and inner section of the DataRepeater control as you wish.

Picture 2. Drag and Drop DataRepeater to the Form

I select my DataRepeater by clicking on the outer section of the DataRepeater, the Property Brower should show as in Pic. 3-1. And I set the anchor as top-left-right (Pic.3-2) and the LayoutStyle as Horizontal (Pic. 3-3).

Picture 3. DataRepeater layout

Now, let’s fill the DataRepeater item template section with some data bound controls. I show the Data Sources Window (Pic. 4-1), change the employees table’s view to detail (Pic. 4-2), change the First and Last Name to label (Pic. 4-3), leave the Title as default TextBox (Pic. 4-4), and change the Photo to a PictureBox (Pic. 4-5). I then drag and drop these items to the DataRepeater item template section as indicated in the picture and remove the unnecessary extra labels. Note that it will also cause the auto creation of the navigator bar (Pic. 4-6), Dataset, BindingSource, TableAdapter, etc.(Pic. 4-7). The experience is exactly the same as when you drag and drop detail view items from the Data Sources window to a form or any container control. The difference is now the data bound items in the Item Template section will now be repeated at run time.

Picture 4. Drag and drop detail view items from Data Sources window to the item template section

Now I am happy with the setup and eager to see what is out there, I hit F5 to test my app, and I got this result, that is all I need. You can scroll the data by clicking on the scroll bar or the forward and backward button on the navigation bar. You can select an item, and modify the value on any editable control on the item like Title text box (Pic. 5-1). You can add new item (Pic. 5-2), delete an item (Pic. 5-3). And you can save all the changes (Add/Delete/Update) with the save button (Pic. 5-4).

Picture 5. Run time result

To summarize, creating a data binding application can be simply done with these 3 steps: 1) Create the data source; 2) Drag and drop a DataRepeater control to the form and adjust its look and feel; 3) Drag and drop detail view items from Data Sources Window to the item template section of the DataRepeater control.

Lastly, let me wrap up with some more information:

The sample projects (VB and C# 2008 SP1 version) in this post can be found in MSDN Code Gallery Power Packs Samples
For a detail instruction of a similar walk through, see MSDN article: How to: Display Bound Data in a DataRepeater Control (Visual Studio)
For a related video demonstration, see How Do I: Use the DataRepeater Control? presented by Beth Massi.
For MSDN DataRepeater introduction article: See Introduction to the DataRepeater Control (Visual Studio)
For DataRepeater class reference: See DataRepeater Class
For questions and feedback: See Visual Basic Power Packs forum
For VB6 reference, see Data Repeater Control in Visual Basic 6
For accessing data technologies in Visual Studio: See VS2010 Beta1 version or VS2008 version

As mentioned above, my colleagues and I will post more articles to answer some advanced or non-obvious How-Tos in the near future. Stay tuned!

----------------------------------------------------------------------------

Follow-up blogs:

8/27/09 Gavin Fu: How to Change Appearance of all DataRepeater Items at Run Time
9/8/09 John Chen Writing Event Handler for controls in a DataRepeaterItem

Build Your Own Navigation Bar in WPF with Insert / Save / Delete Action

XiaoyingGuo — Sat, 08 Aug 2009 19:05:00 GMT

Some time ago, we built a navigation bar for our WPF application to navigate data. We can make it even more powerful, and add CRUD support into it. Because we are using Entity Data Framework, it’s pretty easy to achieve this. Don’t believe it? Let’s first add the following buttons into our navigation bar we built late time:

</StackPanel>

It’s something like below:

Now let’s add the following event handler methods for each button:

1. Insert button. Insert button adds a new empty entry for users to fill in data.

What we do here is pretty simple. We leverage the method IEditableCollectionViewSource.AddNew() to create a new entry into the current CollectionView. More info can be found here. Because the EmployeeID is assigned in the table automatically when a new row is inserted, we don’t need users to fill in this item.

The code looks like below:

C#:

private void insertButton_Click(object sender, RoutedEventArgs e)

{

((BindingListCollectionView)(employeesViewSource__NorthwindEntities.View)).AddNew();

employeeIDTextBox.Text = "{Auto-assigned}";

}

VB:

    Private Sub insertButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        CType(EmployeesViewSource__NorthwindEntities.View, BindingListCollectionView).AddNew()

        employeeIDTextBox.Text = "{Auto-assigned}"
    End Sub

2. Save button. Save button saves the current data into database.

Let’s use ObjectContext.SaveChanges() to persist all updates to the database. SaveChanges method has an overload version SaveChanges(Boolean). If Boolean is set to false, then you have to call AccetpAllChanges() after calling SaveChanges(Boolean). For more information about this method, please check here.

Here we also need to consider about concurrency errors. For more information about how to handle this, please see here.

The code looks like below:

C#:

private void saveButton_Click(object sender, RoutedEventArgs e)

{

try

{

northwindEntities.SaveChanges();

// Update the number of rows in the table in case it's updated by data insertion.

UpdateNavigatorUI();

}

catch (DBConcurrencyException ex)

{

// Add business logic code to resolve the concurrency violation...

}

VB:

    Private Sub saveButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Try
            NorthwindEntities.SaveChanges()
           ' Update the number of rows in the table in case it's updated by data insertion.
            UpdateNavigatorUI()
        Catch ex As System.Data.DBConcurrencyException
            ' Add business logic code to resolve the concurrency violation...
        End Try
    End Sub

3. Delete button. Delete button tends to delete the current entry.

Here we instantiate an Employee object with the current item in the form and then use DeleteObject(TEntity) to do the deletion. However, the job isn’t submitted until users click Save button.

C#:

private void deleteButton_Click(object sender, RoutedEventArgs e)

{

Employee employee = employeesViewSource__NorthwindEntities.View.CurrentItem as Employee;

if (employee != null)

{

northwindEntities.DeleteObject(employee);

}

// Update the row count number and the current row number in the navigation bar.

UpdateNavigatorUI();

}

VB:

Private Sub deleteButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

Dim employee As Employee = CType(EmployeesViewSource__NorthwindEntities.View.CurrentItem, Employee)

If Not (employee Is Nothing) Then

NorthwindEntities.DeleteObject(employee)

End If

' Update the row count number and the current row number in the navigation bar

UpdateNavigatorUI()

End Sub

Done! Now we can hit F5 and play with it. Have fun!

Customize format of DateTime string in WPF and WinForm data binding

Yang Cao — Tue, 07 Jul 2009 06:17:56 GMT

Drag-and-drop data binding helps you build business applications very easily, however sometimes you still need to customize the layout or format after data binding is set. For example, I built a simple application to display all the Customers, and for each Customer, the related Orders are loaded into a DataGrid control:

Of course the data in Birthday field is fake :) and of course I don’t want to show the time part 12:00:00 AM in the text. To customize the string format, first let’s go to the XAML file and locate the TextBlock which binds to Birthday:

<TextBlock Grid.Column="1" Grid.Row="3" Height="21" HorizontalAlignment="Left" Margin="3" Name="birthdayTextBlock" Text="{Binding Path=Birthday}" VerticalAlignment="Center" Width="120" />

You could write a converter to convert the string. Another simpler way is to insert a StringFormat property to the Text Binding and set it to only display the Date 1/1/2222:

Text="{Binding Path=Birthday, StringFormat=d}"

Similarly, if you set StringFormat to the “Order Date” and “Preferred Delivery Time” column:

…
<TextBlock Text="{Binding Path=OrderDate, StringFormat={}{0:dddd MMMM dd}}" />
…
<TextBlock Text="{Binding Path=DeliveryDate, StringFormat=t}" />
…

StringFormat={}{0:dddd MMMM dd} it will display the DateTime in your specified format; StringFormat=t will only display short time. Now the form looks like this:

Now you might ask, how about WinForms? It is just as easy.
On the left is the WinForm Designer surface. Set focus on the DateTimePicker control and find Format property in Properties window. Change the Format to Short so that Birthday TextBlock will only display the Date:

To set OrderDate column and PreferredDeliveryDate column to display in the format as in the WPF example above, click on the DataGridView control and click on the little smarttag button to open DataGridView Tasks:

Select Edit Columns to invoke Edit Columns dialog, and in Bound Column Properties, select DefaultCellStyle to launch CellStyle Builder:

There are some other customizations in this dialog, now let’s just focus on the Format. You could input Format like “dddd MM dd”, or launch Format String Dialog to set the string format. After setting format for both OrderDate column and PreferredDeliveryTime column, the final windows form is:

Well, isn’t it simple to change string format in data binding for both WPF and WinForm? To learn more about formatting (not only formatting DateTime string), please see: http://msdn.microsoft.com/en-us/library/fbxft59x.aspx

Cheers!

Build Your Own Navigation Bar for Data Navigation in WPF

XiaoyingGuo — Mon, 22 Jun 2009 09:12:51 GMT

You may have known that drag-drop data-binding experience has been introduced to WPF application development story from VS2010 Beta1, thanks to a lot of posts before this one. The whole experience in WPF is pretty similar to what we’ve already had with WinForms: developers configure the bindings in Data Source Window and associate controls with data entities or properties, and drag-and-drop from Data Source Window to the designer generates controls with data binding set in the code. All looks familiar. But wait a second, you may find there is still something missing if you tend to generate a DataGrid or DetailsView for a data entity. You are right. In WPF, there’s no navigation bar facility, so drag-and-drop will only leave the exact control you are binding with the entity. However, using WPF, you will find it’s easy to do data navigation, thanks to the CollectionViewSource. So why not build your own one and make it as whatever you like?

In this article, we will build a simple navigation bar leveraging CollectionViewSource. Below is what it looks like:

To start, we use drag-drop WPF data-binding feature in VS2010 Beta 1 to generate a Details View of Employee entity. We use EDM here as data source. Let’s update the generated code behind a little bit and declare the entity, the CollectionViewSource, and the query in a class wide. We also need to declare an int field member to get the total row counts of an entity, which looks like below:

public partial class Window1 : Window

{

private WpfDataNavigationApplication.NorthwindEntities northwindEntities = new WpfDataNavigationApplication.NorthwindEntities();

private System.Windows.Data.CollectionViewSource employeesViewSource__NorthwindEntities;

private System.Data.Objects.ObjectQuery<WpfDataNavigationApplication.Employee> employeesQuery;

private int totalRowCount;

public Window1()

{

InitializeComponent();

}

private System.Data.Objects.ObjectQuery<Employee> GetEmployeesQuery(NorthwindEntities northwindEntities)

{

// Auto generated code

System.Data.Objects.ObjectQuery<WpfDataNavigationApplication.Employee> employeesQuery = northwindEntities.Employees;

// Returns an ObjectQuery.

return employeesQuery;

}

private void Window_Loaded(object sender, RoutedEventArgs e)

{

employeesViewSource__NorthwindEntities = ((System.Windows.Data.CollectionViewSource)(this.FindResource("employeesViewSource__NorthwindEntities")));

employeesQuery = this.GetEmployeesQuery(northwindEntities);

employeesViewSource__NorthwindEntities.Source = employeesQuery.Execute(System.Data.Objects.MergeOption.AppendOnly);

}
}

Then it’s the time to build the navigation bar! Let’s start with UI design and make something like this:

From the left to the right, they are buttons for navigation to the first row, the previous row, the next row, and the last row; a text box for users to input the index of the row for navigation; a label to show how many row in all; and a button for navigation to the specific row based on what users input into the text box. We also add event handler for each button. The XAML of this navigation bar looks like below:

<Button Content=">" Height="23" Name="goToNextButton" Width="Auto" FontWeight="Bold" Background="BlanchedAlmond" Click="goToNextButton_Click"></Button>

<Button Content=">>|" Height="23" Name="goToLastButton" Width="Auto" FontWeight="Bold" Background="BlanchedAlmond" Click="goToLastButton_Click"></Button>

</StackPanel>

And in the code behind, we get a set of event handler methods for each button’s Click event.

Now it’s the time to implement navigation! Still remember we load data into a CollectionViewSource? Now it’s the time to leverage its power. CollectionViewSource is actually a XAML proxy for CollectionView class, which represents a View for grouping, sorting, filtering and navigating a data collection. The View provides a currency point and allows you to move the pointer. As a proxy of CollectionView class, CollectionViewSource has a View property, which is a dependency property. We’ll use this to move the currency and do navigation. So, for each Click event handler, the implementation is somewhat like below:

private void GoToFirstButton_Click(object sender, RoutedEventArgs e)

{

employeesViewSource_NorthwindEntities.View.MoveCurrentToFirst();

}

private void GoToPreviousButton_Click(object sender, RoutedEventArgs e)

{

employeesViewSource_NorthwindEntities.View.MoveCurrentToPrevious();

}

private void GoToNextButton_Click(object sender, RoutedEventArgs e)

{

employeesViewSource_NorthwindEntities.View.MoveCurrentToNext();

}

private void GoToLastButton_Click(object sender, RoutedEventArgs e)

{

employeesViewSource_NorthwindEntities.View.MoveCurrentToLast();

}

private void GoButton_Click(object sender, RoutedEventArgs e)

{

int position;

int.TryParse(goTextBox.Text, out position);

if (position > 0 && position <= totalRowCount)

{

employeesViewSource_NorthwindEntities.View.MoveCurrentToPosition(position - 1);

}

else

{

MessageBox.Show("The input index is not valid.");

}

To get the total row counts, we need to use the Count method in entity’s ObjectSet. Let’s put the following code into the Window_Loaded method:

totalRowCount = northwindEntities.Employees.Count();

totalRowCountLabel.Content = totalRowCount;

So far, we’ve already had our navigation work. Pretty simple, isn’t it? To make it even better, let’s do something more on the button, and disable the button when it doesn’t make sense to click it. We’ll add a new method here to set buttons’ ability:

private void SetButtonIsEnabled()

{

bool isFirst = (employeesViewSource__NorthwindEntities.View.CurrentPosition == 0);

bool isLast = employeesViewSource__NorthwindEntities.View.CurrentPosition > (totalRowCounts - 1);

goToFirstButton.IsEnabled = goToPreviousButton.IsEnabled = !isFirst;

goToNextButton.IsEnabled = goToLastButton.IsEnabled = !isLast;

}

Also, we’d like the index input text box always shows the corresponding index number for the current selection. So we need another method here:

private void SetGoTextBoxOnCurrentPosition()

{

goTextBox.Text = (employeesViewSource__NorthwindEntities.View.CurrentPosition + 1).ToString();

}

Then we can call these two methods in the Click event handler methods (or wrap these two methods into a new method, say UpdateNavigatorUI, and call the method), and we’ll get a complete functionality of a basic navigation bar. The full code can be found here.

Based on that, we can add even more features into our navigation bar. To make it more powerful, you can also add CRUD functionality into it. However, hmm… In this article, the navigation bar we build only work for one page and one entity. There still some work we can do to make this useful utility more reusable. How we can do that? Bingo! Building a user control. And we will talk about that in the future post. Wait and see!

WPF Data Binding: Lookup tables

MilindLele — Thu, 18 Jun 2009 06:15:00 GMT

A few weeks ago I wrote about creating a master-details form, where we looked at an example of a database used for tracking orders, as part of an order management system. We had used the Customers and Orders tables and built a master-details form that showed a list of customers and for each selected customer, their orders. Another common scenario for binding related tables on a form involves look up tables.

Beth Massi wrote about how to data bind WPF lookup comboboxes to entities using VS2008. She uses describes the XAML and the code behind one needs to write to accomplish this. In VS2010, it’s considerably easier. Here’s how:

We will use the same Customers and Orders tables and entities that Beth uses (and we’ve used in my previous master-details post). Once we create a WPF application and add an entity model to to it as described in earlier posts, we should be able to browse the entity model in the data sources window. In the data sources window:

Expand the Orders node and under it set the FK_Orders_Customer to a combobox
Select the Orders node and set the control to Details view
Drag and drop the Orders entity to the WPF form
Now drag and drop the LastName property under FK_Orders_Customer to the combobox on the form.

Just these four simple steps will get the look up binding setup. The application, when run, would look something like this:

The XAML for the combobox is something like this:

WPF Sample on CodeGallery

MilindLele — Thu, 11 Jun 2009 23:51:00 GMT

The MSDN CodeGallery now has VB and C# sample for WPF data binding

http://code.msdn.microsoft.com/WPFDatabinding

This is a sample of a WPF application and includes data binding, data validation, lookup binding. The solution is VS2010 Beta1 based, but the application uses .NET Framework 3.5.

See also: Beth Massi’s WPF Forms over data videos using VS2008

WPF Data Binding: Bind a generic object on a WPF designer

Jeff Chen — Mon, 01 Jun 2009 22:05:00 GMT

In Visual Studio 2010 Beta1, we have enabled data binding experience for a few data sources on WPF designer. Generic object or business object is one of them. Besides this, we have also supported multiple object selection in data source configuration wizard. I will show you all of the above features by walking through one example. In this example, I want to create a master-details form on a WPF designer by binding to the generic objects.

First, let’s create two classes called Customer and Order. And we establish one-to-many relationship between Customer and Order. This step is pretty similar to what needs to be done on a Winform designer.

Second, let’s add these two generic objects to data sources window. As I mentioned above, we now support selecting multiple objects in data source configuration wizard simultaneously.

After the addition, this is what displays in data sources window.

Third, let’s drag-drop from data sources window to the WPF designer to create a master-details form. We can bind any system or user controls to a particular data node. Here are the helps on “Customize Control Binding Dialog Box” and “How to: Add Custom Controls to the Data Sources Window”. In this example, I bind ListBox to the node Customer.LastName and DataGrid to the node Customer.Orders in the data sources window, and drag-drop these nodes to the WPF designer respectively.

Last, we need to fill the data to the form. In the third step, when we drag-drop the data nodes to the form, XAML code was automatically generated. That XMAL code is very similar to the one if we bind data to ADO.NET Entity Data Model. You can find detailed explanation about XAML code part in MilindLele’s post “WPF Data Binding: Creating a Master-Details form in Visual Studio 2010”. For the code behind the form, we set the data to the source property of the CollectionViewSource of the Customer object in the window loaded event handler.

List<Customer> customers = new List<Customer>(); 
customers.Add(...);

System.Windows.Data.CollectionViewSource customerViewSource = 
  ((System.Windows.Data.CollectionViewSource)(this.FindResource("customerViewSource"))); 
customerViewSource.Source = customers;

Now press F5, we should be able to see the form loaded with the data.

As the master-details association is already created in XAML, different sets of orders will be displayed according to the selection of customer names.

Technorati Tags: WPF,Business Object,Generic Object,VS2010 Beta1

Improvement of the data binding experience with ADO.Net Data Services

John Chen — Tue, 26 May 2009 00:32:00 GMT

In Visual Studio 2010 Beta1, the data binding experience with ADO.Net Data Services has been improved. In Visual Studio 2008 SP1, after adding an ADO.Net data service as web reference to a client project, it will not automatically show up in the data source window, you have to add an object data source to consume the ADO.Net data service. There is no more of this step in VS2010!

Let's take a look at the article of Walkthrough: Creating and Accessing an ADO.NET Data Service in Visual Studio (this is for VS2008 SP1). To create the client application consuming the ADO.Net data service, you have the following steps:

1) Create the client application

(Steps omit here)

2) Add a service reference

a) On the Project menu, click Add Service Reference.

b) In the Add Service Reference dialog box, click Discover.
The URL for the NorthwindCustomers service will appear in the Address field.

c) Click OK to add the service reference.

3) Enable data binding to the service

a) On the Data menu, click Show Data Sources.

b) In the Data Sources window, click Add New Data Source.

c) On the Choose a Data Source Type page of the Data Source Configuration Wizard, click Object, and then click Next.

d) On the Select the Object You Wish to Bind to page, expand the NorthwindClient node, and then expand the NorthwindClient.ServiceReference1 node.

e) Select Customers, and then click Finish.

4) Create the user interface

(Steps omit here)

In VS2010 beta1, you do not need to do step 3 anymore. ADO.Net data service is recognized automatically and happily shows up in the data source window. Alternatively, you can also add the ADO.net data service to your client project by the Data Source Configuration Wizard. Replace the step 2 above with the following:

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

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

c. On the Choose a Data Source Type page of the Data Source Configuration Wizard, click Service, and then click Next. The next page will be the Add Service Reference dialog box. Now you just do the same thing just as adding the service reference through Add Service Reference project menu.

At the end of Add service reference or the Data Source Configuration Wizard, you will see the following in the data source window (for the example in the walkthrough).

Even more, if you update the ADO.Net data service, e.g. adding Orders to the EDM, and update the service reference, the data source window will update accordingly as the example shown bellow.

Cheers!