Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Navigation Framework in Silverlight 4

, 12 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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 t

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.

Manas Patnaik Blog

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. 
<sdk:Frame Margin="0,37,0,-15" 
Name="frameContainer" 
Source="/View/Home.xaml"/>

Page

  • Pages are the superset of controls which is capable of Navigation and allow it self to load inside a frame.
  • Manas Patnaik Blog
  • It is important to know the relation between Frame and Page.The above fig illustrate the relation between them.Frame is responsible for navigate to a particular page with the URI .Once page loaded it can access the host Navigation system by NavigationContext and NavigationService.

Step By Step with a Example

Create a Silverlight Application

  • Lets create a Silverlight Application from Visual Studio.As shown in fig we have added some pages to the Silverlight project.

Manas Patnaik Blog

  • The MainPage will load the content pages (In View Folder) with a click of navigation Hyperlinks.

Manas Patnaik Blog

Add Event Handler to Navigate

For the project XAMl code of the MainPage as follows .

<Grid x:Name="LayoutRoot" Background="White"> 
<sdk:Frame Margin="0,37,0,-15" 
Name="frameContainer" 
Source="/View/Home.xaml"/> 

<HyperlinkButton Content="Home" 
Height="19" HorizontalAlignment="Left" 
Margin="12,12,0,0" Name="hlHome" 
VerticalAlignment="Top" Width="39" Click="hlHome_Click" /> 
<HyperlinkButton Content="About" 
Height="19" HorizontalAlignment="Left" 
Margin="57,12,0,0" Name="hlAbout" 
VerticalAlignment="Top" Width="35" /> 
<HyperlinkButton Content="Customer" 
Height="19" HorizontalAlignment="Left" 
Margin="98,12,0,0" Name="hlCustomer" 
VerticalAlignment="Top" Width="62" /> 
</Grid>

Notice the HyperlinkButton “Home” click Event. It call the code behind logic of navigating to the particular page.

private void hlHome_Click(object sender, RoutedEventArgs e) 
{ 
this.frameContainer.Navigate(new Uri("/View/Home.xaml", UriKind.Relative )); 
}

Add Error Page for Resource Not Found

The frame can handle following events in while navigation to a page

<sdk:Frame Margin="0,37,0,-15" 
Name="frameContainer" 
Source="/View/Home.xaml" 
NavigationFailed="frameContainer_NavigationFailed" /> 
private void frameContainer_NavigationFailed(object sender, 
    System.Windows.Navigation.NavigationFailedEventArgs e) 
{ 
e.Handled = true; 
frameContainer.Navigate(new Uri(“/View/ErrorPage.xaml", UriKind.Relative)); 
}

Navigation Through XAML

Instead of above coding approach we can specify Hyperlink NavigateUri property to the their relative URIs .

<HyperlinkButton Content=”About”
<HyperlinkButton Content="About" 
Height="19" HorizontalAlignment="Left" 
Margin="57,12,0,0" Name="hlAbout" 
VerticalAlignment="Top" Width="35" 
NavigateUri="/View/About.xaml" 
TargetName="frameContainer" 
/>

Hiding Resources Through URI Mapper

Sometimes it is necessary to hide your resource location also the long URL for the particular page is not so user-friendly.So we can  use URIMAPPER to enable with short and meaning full name for URIs.Suppose for this example the user should be allowed  to navigate the Customers page with adding “/Customers” to the URL.To use URIMAPPING we need following 2 references to our mainpage.xaml page

xmlns:navigation=
    "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
xmlns:uriMapper=
    "clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
  • Our Next step will be adding mapping to the Frame Control.
<sdk:Frame Margin="0,37,0,-15" 
Name="frameContainer" 
Source="/View/Home.xaml" 
NavigationFailed="frameContainer_NavigationFailed" > 

<navigation:Frame.UriMapper> 
<uriMapper:UriMapper> 
<uriMapper:UriMapping Uri="/Customers" MappedUri="/View/Customers.xaml" /> 
</uriMapper:UriMapper> 
</navigation:Frame.UriMapper> 

</sdk:Frame>

Now we need to set the Hyperlink  navigateURI. property as /”Customers “.So this will ensure that the “/Customer” is mapped to the mentioned MapeedUri.

<HyperlinkButton Content="Customer" 
Height="19″ HorizontalAlignment="Left" 
Margin="98,12,0,0″ Name="hlCustomer" 
VerticalAlignment="Top" Width="62″ 
NavigateUri="/Customers" 
/>

Now ,Customers page can be accessible by the new User friendly URI. “http://localhost:6469/NavigationSystemTestPage.aspx#/Customers”

Accessing Navigation System from a Page

  • As we mentioned above a page can access navigation system using NavigationService. In this example we have a DashBoard page which required to be loaded once the user clicks on the button in the customers page. This can be achieved by through code behind in Customers page on button click event .
private void btnShowDashBoard_Click(object sender, RoutedEventArgs e) 
{ 
NavigationService.Navigate(new Uri("/Admin/DashBoard.xaml", UriKind.Relative)); 
}

NavigationService allows the page to get the host navigation service that used to navigate to this page.

Manas Patnaik Blog

Final Words

Silverlight navigation support much more complex navigation logic such Fragmented Navigation ,Content loader etc..This post only touches the basics of navigation.More posts will follow soon about navigation and Silverlight .

Source Code

Download Source NavigationSystem

Online Demo

Links and References

http://msdn.microsoft.com/en-us/library/cc838245(VS.95).aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manas_Patnaik
Software Developer (Senior) Infosys
India India
Nothing special .. I like challenges and love my critics.
 
Associate Consultant | Microsoft | Bangalore | India

Blog : http://manaspatnaik.com/blog

Twitter@manas_patnaik
Follow on   Twitter

Comments and Discussions

 
QuestionNavigation Framework in Silverlight 4 Pinmembertsz_www88828-May-14 20:56 
GeneralMy vote of 5 Pinmembervinod deo from navi mumbai25-Mar-13 7:37 
QuestionOther Navigation Posts Pinmemberlymber131-Jul-12 20:46 
QuestionNavigation Framework in Silverlight 4 PinmemberMayur Bheda24-Nov-11 3:59 
AnswerRe: Navigation Framework in Silverlight 4 PinmemberManas_Patnaik24-Nov-11 4:15 
GeneralRe: Navigation Framework in Silverlight 4 PinmemberMayur Bheda25-Nov-11 1:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 12 Apr 2011
Article Copyright 2011 by Manas_Patnaik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid