Creating the UI
A Silverlight page/control consists of a layout XAML file and a code-behind xaml.cs file. Typically, similar to an ASP.NET page, the XAML file contains the layout definition (like a *.aspx file where we define our UI), while the xaml.cs file contains the logic and event handlers (like our aspx.cs file).
Adding the Assembly to Use a DataGrid Control
We will display our data using the DataGrid control, but Silverlight does not include a reference to the DataGrid control by default, so we need to add one. This process is very similar to using a custom control in ASP.NET. Recall that we add a reference to the appropriate DLL in the project and then add a register tag in the aspx page. To achieve this in Silverlight, add a new reference (right click on References and select New Reference) and locate System.Windows.Controls.Data in the list (this is the assembly that contains the DataGrid).

After this reference is added, we need to assign a namespace to this assembly in our XAML markup. To do this, add the following to the namespace declaration of the file Page.Xaml.
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

UI Layout
Create a Grid named LayoutRoot with three rows: the first one for our Application Title (width=50), the third one for a status bar (width=20), and the middle row acting as the main content holder (width=*, takes all the space that is left). Add a title TextBlock to the first row, and an empty TextBlock named txtStatus to the bottom row of the LayoutRoot grid. In the middle row (the one we identified as the content holder) of the LayoutRoot grid, add another Grid named ContentRoot with two columns and two rows; the left column with width 200 and the right column taking the rest. The rows should be divided in the ratio 60% and 40%. In the left column of this ContentRoot grid, add a ListBox that spans in both rows. In the right column, add a DataGrid for the customer orders in the first row and another DataGrid for the order details in the second row.
UserControl xmlns:basics=”clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls”
x:Class=”DataApplication.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:data=”clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data”
Width=”Auto” Height=”Auto”
Grid x:Name=”LayoutRoot” Background=”White”
Grid.RowDefinitions
RowDefinition Height=”55″ x:Name=”HeaderRow”
RowDefinition Height=”*” x:Name=”ContentRow”
RowDefinition Height=”20″ x:Name=”FooterRow”
Grid.RowDefinitions
Grid.ColumnDefinitions
ColumnDefinition Width=”*”
Grid.ColumnDefinitions
Heading
TextBlock x:Name=”txtHeader” Grid.Row=”0″
FontSize=”20″ Margin=”5,5″ Foreground=”Blue”
Text=”My First Data Application in Silverlight”
TextBlock
A textblock in the footer to be used as an Status bar
TextBlock x:Name=”txtStatus” Grid.Row=”2″
FontSize=”10″ Margin=”5,0″ Foreground=”Red”
TextBlock
Content Holder
Grid x:Name=”ContentGrid” Grid.Row=”1″ Margin=”5″
Grid.RowDefinitions
RowDefinition Height=”.6*”
RowDefinition Height=”.4*”
Grid.RowDefinitions
Grid.ColumnDefinitions
ColumnDefinition Width=”200″
ColumnDefinition Width=”*”
Grid.ColumnDefinitions
Listbox for displaying customers
ListBox x:Name=”lstCustomers” Grid.Column=”0″ Grid.RowSpan=”2″
DisplayMemberPath=”ContactName”
Loaded=”lstCustomers_Loaded”
SelectionChanged=”lstCustomers_SelectionChanged”
ListBox
DataGrid for displaying orders of a customer
(with autogenerated columns)
data:DataGrid x:Name=”dgOrders” Grid.Row=”0″ Grid.Column=”1″
AutoGenerateColumns=”True”
SelectionChanged=”dgOrders_SelectionChanged”
data:DataGrid
DataGrid for displaying orderdetais for an order
data:DataGrid x:Name=”dgOrderDetails” Grid.Row=”1″ Grid.Column=”1″
AutoGenerateColumns=”True”
AutoGeneratingColumn=”dgOrderDetails_AutoGeneratingColumn”
data:DataGrid
Grid
Grid
UserControl
ListBox
The listbox lstCustomers will be used for displaying the list of customers in the database. We will be binding this listbox inside the Loaded event for which we have registered. Note that if a ListBox is bound to some object source, it will display the value object.ToString() for each of its items collection. If we want to display any other value (typically a string member of the object), we have three apparent choices:
* Override the object.ToString() method (We are not going to do this just for displaying the correct values in a ListBox).
* Define some Data Template (this is the most flexible approach, and we will briefly look at DataTemplates in this article when we will manually define the columns for our DataGrid, but for now, we will skip this choice).
* Define the property to be used in the DisplayMemberPath property of the ListBox (fairly simple, so we will keep ourselves to this for now).
Since we want the ListBox to show the ContactName property of the Customer object to which it is bound, we use DispalyMemberPath=”ContactName”. Also, we have registered for the SelectionChanged event which we will handle in our code-behind file to update the DataGrid with the selected customer’s orders.
DataGrids
We have just configured DataGrids to auto-generate their columns when they are data bound. Note that we also subscribed for the AutoGeneratingColumns event in dgOrderDetails. This is a common practice, and used in conjunction with auto-generating columns if we want to remove certain unwanted columns quickly.