Data Binding in Silverlight with RIA and EntityFramework (Displaying Data)

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

In Data Driven application a lot revolves around the data source either in the form of a 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 EnityFramework and RIA services. This post covers up to the displaying of 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 what binding is. May be writing in detail about this concept will be repetitive so I suggest that you go through this article from MSDN which is a complete learning resource on the subject.

A Real World Scenario

Here I am going 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 the state entity collection to the list box while loading of the page. Although the we never intend to show the data in a State 1 Stae 2 … 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 bellow shows the list box defined within the Grid layout control in Home page.

1. <ListBox Grid.Row="1″ HorizontalAlignment="Left" Margin="6,2,0,14″

2. Name="lstStates" Width="210″

3. FontFamily="Portable User Interface" FontSize="13″ FontWeight="Bold"

4. />

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

1. private void Page_Loaded(object sender, RoutedEventArgs e)

2. {

3. //Create DataContext Object

4. DomainService_SOI dataContext = new DomainService_SOI();

5. //Use LoadOperation method to Populate the Entity Collection

6. LoadOperation<State> states = dataContext.Load(dataContext.GetStatesQuery());

7. //Bind To List Box

8. lstStates.ItemsSource = states.Entities;

9. lstStates.DisplayMemberPath = "StateName";//Use StateName as Diplay Name

10. }

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

Instead of pointing each individual controls to the selected entity object of list boxes we are going to bind it to the the parent container of all control. The parentdataContext 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.

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

The point to note here is that except the List box binding, 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.

1. <TextBlock FontWeight="Bold" Height="23″ HorizontalAlignment="Left"

2. Margin="95,68,0,0″ Name="tbLanguage" Text="{Binding Language}"

3. VerticalAlignment="Top" Grid.Column="1″ Grid.Row="1″ />

One point to note here is that the Language is a property of State Entity which is going to be assigned to the parent grid layout control when 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 ready to go. 

Let's run the application and check 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 where in my next post will be 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: Live Sample

Article Series

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