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 destination through journey.Lots of article written and quite a lot of post are available on this specific topic , but with this series of posts tries to introduce you to the concept with minimum content and with a real time sample.

In Data Driven application whole a lot revolve around the data source either in form of Database , XML or any other source ,In my previous posts i think  i was able to give fair bit of introduction on how to create a data model using EnityFramework and RIA services.This post cover up the 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

Silverlight Ria Blog From Manas

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

Silverlight Ria Blog From Manas Silverlight Ria Blog From Manas
Binding approach

Well the binding approach 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 as State 1 Stae 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 a directly to the controls.

Silverlight Ria Blog From Manas

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 with in 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 box we are going to bind it to the the parent container of all control.The parent dataContext can be used as a source for other controls.Following piece of code shows how the Grid Layout attached to the selected item.

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

Silverlight Ria Blog From Manas

The point to note here 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″ />

Silverlight Ria Blog From Manas

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 select 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.

Lets run the application and check with the data.

Silverlight Ria Blog From Manas

Conclusion

Well the data binding is not limited to the only way described above but it is one of the suggested way .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 : Launch StatesOfIndia

Article Series