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
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 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.
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.
- <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 following piece of code while 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 Diplay Name
- }
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.
- <Grid x:Name=”ContentStackPanel” DataContext=”{Binding SelectedItem,ElementName=lstStates}”>
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.
- <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 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.
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 .
