Monday, October 11, 2010

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/

1 comment:

Unknown said...

Excellent, simple and works !!