Let's discuss

Hi
Thanks for visiting my blog and your responses.As with this short span of blogging i have seen a lots of questions regarding Silverlight,WCF RIA and on other topics either personally or through mail , i have decided to go ahead with a discussion forum where you can ask me anything which is not related to my published post .

Hope this will help me and you to experience the technology better and implement it wisely .

Lets Start with discussion ….

Leading With Banana Technology

Hi this is one of my presentations at Developer’s session , Infy .As the heading suggest the session was on the growth ,Change in strategy , and latest additions in Microsoft technology .While presentation most of the content were verbal so it may look bit awkward here but …

still sharable 🙂

Doesn't your girlfriend deserves more time rather than Silverlight ??

Understanding Asynchronous Programming Model in Silverlight 4 with WCF  RIA

Welcome Friends , … although it seems like a tabloid heading but the experience with Silverlight can be troublesome and frustrating if you ignore the async programming model/calls which  used predominantly in Silverlight and WCF RIA. The Async model changes logic  and flow of code creating confusion until you know about it.

So this post is must if you are a newbie to Silverlight with RIA services and want to spent a little searching through forums/blog for some simple but crazy results.

Visit My Original Blog For latest Updates

Hi thanks for visiting my blog at wordpress .Please Check my up to date blog .

http://manaspatnaik.com/blog

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

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();
6. //Use LoadOperation method to Populate the Entity Collection
7. LoadOperation<State> states = dataContext.Load(dataContext.GetStatesQuery());
9. //Bind To List Box
10. lstStates.ItemsSource = states.Entities;
11. lstStates.DisplayMemberPath = “StateName”;//Use StateName as Diplay Name
12. }

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}”>

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″ />

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 .

Source Code and Links

Download the Source Code for this Project – : StatesOfIndia

Element Binding In Silverlight

Well achieving a twitter page like functionality was never the intention but this simple example will introduce to element binding concept in Silverlight.In Element Binding we can bind a control property to another control property that too declaratively inside XAML.

In this post We will emulate the twitter feature where the number of character entered by user will get displayed while user enters text in the text box , that too with out a single line in code behind.

Here i have added 2 text blocks to hold max length and the other one to hold count the character.NAs we wanted the Text Block Text property should get show the Textbox.Length property , we will bind the Text Block’s Text to the length property of textbox.

The Code to Bind the element as follow

1. <TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” FontSize=”13″
2. TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″
3. Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />

In above code the 3rd line is the key where we assigning the Binding to the Text Property , remember dependency property.

The xaml source code only , based on the above fundamental achieves the twitter messaging like functionality.

1. <UserControl x:Class=”TwitterLikeMessege.MainPage”
2. xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
3. xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
4. xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;
5. xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;
6. mc:Ignorable=”d”
7. d:DesignHeight=”300″ d:DesignWidth=”400″ xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”&gt;
9. <Grid x:Name=”LayoutRoot” Background=”White”>
10. <sdk:Label Height=”30″
11. HorizontalAlignment=”Left” Margin=”0,12,0,0″
12. Name=”lblCaption” VerticalAlignment=”Top” Width=”237″ Content=”What’s happening?” FontSize=”15″ Foreground=”#82000000″ />
14. <TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” FontSize=”13″
15. TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″
16. Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />
18. <TextBlock Height=”23″ Margin=”0,150,11,0″ Name=”tbMaxLen” VerticalAlignment=”Top”
19. Width=”26″ TextAlignment=”Right” FontSize=”13″ HorizontalAlignment=”Right”
20. Text=”{Binding Path=MaxLength,ElementName=txtMsg}”/>
22. <TextBox Height=”90″ Margin=”12,37,12,0″ Name=”txtMsg” VerticalAlignment=”Top” MaxLength=”160″ />
24. <sdk:Label HorizontalAlignment=”Right” Margin=”0,152,32,0″ Name=”lblSlash” Width=”25″ Content=” / “ Height=”28″ VerticalAlignment=”Top” />
25. </Grid>
26. </UserControl>

Cascading Combo Box Data Using RIA in Silverlight 4

Having introduced to the concept of WCF RIA services with EF and Silverlight in my earlier post , now its time to take up the issues we usually face in day to day coding activity.So in this post we will replicate cascade combo box loading scenario , where the data of other combo depends on the selection of first .

Here we have 2 combo box Product and Version , Depending upon product selection the versions should get populated.

Now as usual we will follow the steps ,

• Bind Data To Product Combo
• On Selected Index change event of Product Combo we will bind to Version Combo

Binding Data To Product Combo Box

As in my earlier post , i have created a Domain Context called myDomainContext using Entity Framework code generation.

Using myDomainContext Entity Query  we will bind  the product  data to the combo box.

1. myDomainContext cont = new myDomainContext();
2. LoadOperation<PRODUCT> prd = cont.Load(cont.GetPRODUCTsQuery());
3. cmbProducts.ItemsSource = prd.Entities;

Now on selection changed event if you will try to bind it to version Combo.

On Selection Changed

Create a custom EntityQuery based on the combobox selection load the query using LoadOperation. As all queries from a domain context are executed asynchronously. To execute the query, we are passing  the EntityQuery object as a parameter in the Load method.

1. private void cmbProducts_SelectionChanged(object sender, SelectionChangedEventArgs e)
2. {
3. myDomainContext cont = new myDomainContext();
4. ComboBox cmb = (ComboBox)sender;
5. EntityQuery<VERSION> query = from c in cont.GetVERSIONsQuery()
6. where c.VERSION_PRODUCTID == ((PRODUCT)cmb.SelectedItem).PRODUCTID
7. select c;
8. LoadOperation<VERSION> prd = cont.Load(query);
9. cmbVersions.ItemsSource = prd.Entities;
10. }

Styles in Silverlight

We all are aware of CSS and user control concept in Asp.Net which is used for styling the webpage .In line with similar concept Silverlight provides option to use predefined look to  controls.While Styles used for applying simple make over to controls ,Templates are used for complex styling with a option to change complete visual representation.Generally Styles are used for a consistent look through out the application and control templates are used for visual improvement of controls.

In this post we will create a style and will attach to a control.

Defining A style

Styles are set common properties that can be reusable by various other instances.In Silverlight styles are defined in resource file can be applied to a control against its Style property.

Passing Values Between Pages in Silverlight 4

Hi , In this post we will look into some of the approaches available for Passing Values between Silverlight pages SL To SL page and ASPX To SL page .Typical approach of legacy web system is Query String , where parameters are passed as Field –Value Pair.

Query String In Silverlight

In real application scenario suppose a Customer page when the User Clicks on Detail  of particular Customer.The customer id / Name will be used in query string and can be passed to the CustomerDetail page.The CustomerDetail page will parse the URL and fetch the details from data source based on the value from query string.

The Silverlight pages can access the query string from NavigationContext property of page (Check my earlier post for more detail ).So as of the above example the CustomerDetail page can access it with following one liner code ,this.NavigationContext.QueryString[“**QS Field Name**”]

1. // Executes when the user navigates to this page.
2. protected override void OnNavigatedTo(NavigationEventArgs e)
3. {
4. lblQSValue.Content = this.NavigationContext.QueryString[“PassQS”];
5. }

Passing Parameters from Aspx Page to Silverlight by InitParameters

Although Query String is a way to pass the values between pages we can use alternate way of sending parameters to Silverlight application that is InitParam.

From Aspx page in Object Tag where the xap file is getting loaded we can add following tag.

1. <param name=”InitParams” value=”PassVALA = IamA,PassVALB = 25″ />

1. <body>
2. <form id=”form1″ runat=”server” style=”height:100%”>
3. <div id=”silverlightControlHost”>
4. <object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”100%” height=”100%”>
5. <param name=”source” value=”ClientBin/NavigationSystem.xap”/>
6. <param name=”onError” value=”onSilverlightError” />
7. <param name=”background” value=”white” />
8. <param name=”minRuntimeVersion” value=”4.0.50826.0″ />
9. <param name=”InitParams” value=”PassVALA = IamA,PassVALB = 25″ />
10. <param name=”autoUpgrade” value=”true” />
12. <a href=”http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0&#8243; style=”text-decoration:none”>
13. <img src=”http://go.microsoft.com/fwlink/?LinkId=161376&#8243; alt=”Get Microsoft Silverlight” style=”border-style:none”/>
14. </a>
15. </object><iframe id=”_sl_historyFrame” style=”visibility:hidden;height:0px;width:0px;border:0px”></iframe></div>
16. </form>
17. </body>

Now the same parameters can be accessed in the Silverlight application in Application_Startup event in App.xaml.

Navigation Framework in Silverlight 4

Navigation is an important and one of the basic aspect of web application . In earlier versions of Silverlight Navigation system was missing, until  Silverlight 3 .This blog post is all about the concept of Navigation Framework and an attempt to summarize the overall concept .[Check Online Demo of this post].

Basic Concept

Frame

• The concept of Navigation system revolves around Frame . Frame Control acts as a container for pages , it validate the state and maintain the navigation history.
• A Frame can host one page at particular time.

• Source : Source property of Frame defines the default page to load when the application initialized.
• Navigate (URI uri) :Navigate Method navigates to the specific URI from code.