Data Binding in Silverlight with RIA and EntityFramework – Part 1 (Displaying Data)

Data binding plays a major role for any technology. If you want me to rate the learning experience of SL, then surely Data Binding is going to be one of the prime destinations through journey. Lots of articles have been written and quite a lot of posts are available on this specific topic, but this series of posts tries to introduce you to the concept with minimum content and with a real time sample.

In Data Driven application, a whole lot revolves around the data source either in the form of database, XML or any other source. In my previous posts, I think I was able to give a fair bit of introduction on how to create a data model using EntityFramework and RIA services. This post covers displaying the data in the UI.

Concept of Binding in Silverlight

To proceed further with this post, I guess you may need to have some basic concept of binding. May be writing in detail of this concept will be a repetitive task so I will advise to go through this article from MSDN which is complete in terms of learning resource.

A Real World Scenario

Here, I am trying to explain a real application scenario of Master/Detail based data, where the information regarding master will be shown to the detail.

Project and Data Model Setup

Create a Silverlight Project with RIA service enabled and add Data Model using Entity Framework. The detailed steps are described in this earlier post. Here, the “DataModel_SOI.edmx” Model container shows up the mapped properties to the scalar data fields. The “DomainService_SOI” service class will take care of server side querying.

Binding Approach

Well, the binding approach is quite straight forward, we will bind the state entity collection to the list box while loading of the page. Although we never intend to show the data as State 1 State 2 … object wise format, we will assign a DisplayMember of the entity. The next step is to attach the selected List box item to the Grid layout control which is above the Visual Tree of the controls used for detailing. Once the selected state entity is attached to the Grid Layout, the properties can be used directly to the controls.

Binding to the State List Box

Of course, the first step involved is to bind the state entities to the list box and the list should display the state name. The XAML code below shows the list box defined within the Grid layout control in Home page.

<ListBox Grid.Row="1" HorizontalAlignment="Left" Margin="6,2,0,14" 
Name="lstStates" Width="210" 
FontFamily="Portable User Interface" FontSize="13" FontWeight="Bold" 
/>

I am going to bind the data to list box with the following piece of code during Page Load.

private void Page_Loaded(object sender, RoutedEventArgs e) 
{ 
//Create DataContext Object 
DomainService_SOI dataContext = new DomainService_SOI(); 
//Use LoadOperation method to Populate the Entity Collection 
LoadOperation<State> states = dataContext.Load(dataContext.GetStatesQuery()); 
//Bind To List Box 
lstStates.ItemsSource = states.Entities; 
lstStates.DisplayMemberPath = "StateName";//Use StateName as Display Name 
}

Using the Selected List Box Item as DataContext for the Grid Layout

Instead of pointing each individual control to the selected entity object of list box, we are going to bind it to the the parent container of all controls. The parent dataContext can be used as a source for other controls. The following piece of code shows how the Grid Layout is attached to the selected item.

<Grid x:Name="ContentStackPanel" DataContext="{Binding SelectedItem,ElementName=lstStates}">

The point to note here except the List box binding is that everything we are declaring is in XAML. The power of declarative programming helps to eradicate the tight coupling of binding to its data source.

Binding to the Detail Controls

The next step will be simple property binding to the DataContext assigned to the parent control.

<TextBlock FontWeight="Bold" Height="23" HorizontalAlignment="Left" 
Margin="95,68,0,0" Name="tbLanguage" Text="{Binding Language}" 
VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" />

One point to note here that the Language is property of State Entity which is going to be assigned to the parent grid layout control once the user selects an item in list box. I am going to follow the same concept for other controls and my motive of displaying data is ready to go.

Let's run the application and check with the data.

Conclusion

Well the data binding is not limited to the only way described above but it is one of the suggested ways. This post is limited to displaying of data whereas my next post will be a continuation of this article where we will use binding concept to track changes, validation and lots more.

Thanks for your patience. Keep commenting!

Source Code and Links

• Download the Source Code for this Project: StatesOfIndia
• Hosted Application: Launch StatesOfIndia

Article Series

• Data Binding in Silverlight with RIA and Entity Framework – Part 1 (Displaying Data)
• Data Binding in Silverlight with RIA and Entity Framework – Part 2 (Editing / Updating Data)
• Data Binding in Silverlight with RIA and Entity Framework – Part 3 (Validating Input Data)