Introduction

In the first part of this series I showed you how to bind and display data in a control using C# code in a DataGrid. In this part I will show how the same thing can be done declaratively using Xaml.

Starting the Process

First we need to delete or comment out the code we added in EmployeeListing.Xaml.cs, which you wrote in the first part. Delete or comment out the following code from the Loaded event of EmployeeListing:

Switch to the Xaml view. We will do the same operation using Xaml now. We need to add a reference to the controls that come with the framework. Add a refrence to System.Windows.Ria.Controls:

Figure 1: Adding reference to System.Windows.Ria.Controls

Now also add this namespace in your Xaml editor:

Now we need to add some elements. We’ll add a DomainDataSource which is a non visual element. In your Xaml editor add the following code just after the <Grid.RowDefinitions> </Grid.RowDefinitions> section:

In the above Xaml I’ve created a DomainDataSource element, named it employeeDataSource, set the QueryNameProperty to GetQueryByHireDate and also set the AutoLoad property to true to load the data automatically. Now we need to fix from what DomainContext we’ll get the information from. To do this we need to add another name space in Xaml. Add this namespace in your Xaml editor:

The above namespace is the services namespace of our web application. That’s where our context exists. Add the following Xaml inside the <rc:DomainDataSource> </rc:DomainDataSource> section:

You can see in the above Xaml that our DomainContext is NwdDomainContext. Here’s the complete Xaml we have added so far:

We’ve instantiated a new NwdDomainContext and we’re trying to load the data using this DomainDataContext. The three lines of code you wrote earlier are actually represented here in Xaml.

Binding Data

Now we need to bind data to our DataGrid, which is the empGrid we added earlier. We’ll bind data to ItemsSource. This is exactly what we did in C# in the first part of this series. We’ll also use a new Silverlight 3 element to perform element binding. Your Xaml should look like the following if you want to use the binding feature of Silverlight:

Take a look at the above Xaml. We’ve bound the grid to the DomainDataSource element (employeeDataSource) and its path is Data. We’re making the DataGrid get its ItemSource from the element employeeDataSource; and its Path is Data. Now press F5 and run the application. You should see the same result as the following screenshot:

Summary

In this article you learned how you can bind and display data declaratively using Xaml. You have done the exact thing declaratively like you did previously procedurally. That’s it for now. Hope you’ve enjoyed this part. In the next part I’ll try to cover more stuff on RIA Services. Till then happy coding.

About Faisal Khan

Currently working at Vectorform as a Silverlight developer. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with next ge... This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.