Silverlight User Control Navigation Solution

There are two solution approaches when implementing a navigation solution, the capability to navigate between pages using Silverlight. One approach is to use user controls and is what this write-up focuses on the other approach which was recently added in Silverlight 4. For the most part this is a summary of the demo video provided by Jesse Liberty from Microsoft.

Steps for Creating a User Control Navigation solution
1. Create Silverlight Application
2. Add a new page called NavigationFrame
a. Delete the Grid control LayoutRoot in the NavigationFrame.xaml file
b. In the code behind file add the code below to the constructor to load a default page in this example it is the main page

if (this.Content == null)
{
this.Content = new MainPage();
}

c. Add a navigate method to change the content displayed in the page

public void Navigate(UserControl nextPage)
{
this.Content = nextPage;
}
3. Update the App.xaml.cs to load the NavigationFrame Page instead of the MainPage on Application load
a. In the Application_Startup method change MainPage to NavigationFrame
4. Create another Silverlight page called Page_2
5. Add navigation Controls
a. In my case I am using buttons for navigation and added them to both pages (MainPage and Page_2)

<button name="buttonSwitch" type="submit" width="75" content="Switch" height="23" horizontalalignment="Left" margin="132,212,0,0" verticalalignment="Top" click="Switch_Click">

6. In the code behind of both MainPage and Page_2 the even handler needs to be added to swap between the target pages
a. Example of code behind for Page_2

private void Switch_Click(object sender, RoutedEventArgs e)
{
NavigateFrame ps = this.Parent as NavigateFrame;
ps.Navigate(new MainPage());
}





Reference: User Control Implementations
Jesse Liberty Demo Video - http://www.silverlight.net/learn/videos/silverlight-videos/using-multiple-pages-part-1/
Slightly Different implementation use a service approach- http://nerddawg.blogspot.com/2008/06/pages-in-silverlight.html
Similar example - http://www.c-sharpcorner.com/UploadFile/nipuntomar/Silverlight07082008154003PM/Silverlight.aspx

Navigation Application (SL4)
Basic implementation write up- http://www.silverlighttoys.com/Tutorials.aspx?tutorial=1
Detailed write-up - http://stuff.seans.com/2010/05/07/silverlight-4-project-types-part-ii-%E2%80%93-silverlight-navigation-application/

JQuery Resources

With the recent uptick in JQuery as a go to client side technology, I wanted to share these resources I recently found.

This is a nice article describing the role of JQuery and ASP.NET as well as some well-founded conjecture on the future of Microsoft support of JQuery.
http://visitmix.com/Articles/Javascript-Libraries-and-ASPNET

This is an online training guide, I’ve only skimmed the content but it looks like a fantastic resource.
http://jqfundamentals.com/book/book.html

Accessing the UI thread in Silverlight

I’m creating a separate class where I want to move all related Client Object Model (COM) code.

In my case for the COM code to work it must update the UI thread. To accomplish this I had to move the reference from the main page, which was apparently passing through the Deployment object, to explicitly calling the Deployment object.

So in the case of the main page or I suspect any xmal pages code behind use this line of code in the ClientRequestSucceededEventHandler method:

this.Dispatcher.BeginInvoke(updateUI);


For separate classes to gain access to the UI thread use this line of code in the ClientRequestSucceededEventHandler method:

Deployment.Current.Dispatcher.BeginInvoke(updateUI);



Reference:
http://www.go4answers.com/Example/error-invalid-cross-thread-access-48335.aspx
Using Silverlight Object Model: http://msdn.microsoft.com/en-us/library/ee538971.aspx