Navigation in Silverlight using Navigation Framework


Navigation is an important and one of the basic aspects of web applications. In earlier versions of Silverlight, the Navigation system was missing, until  Silverlight 3. This article 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 systems revolves around the Frame control. The Frame Control acts as a container for pages; it validates the state and maintains the navigation history.
  • A Frame can host one page at a time.

Manas Patnaik Blog

  • Source : Source property of Frame defines the default page to load when the application initializes.
  • Navigate (URI uri) :Navigate Method navigates to the specific URI from code.
  1. <sdk:Frame Margin="0,37,0,-15″
  2. Name="frameContainer"
  3. Source="/View/Home.xaml"/>
PAGE
  • Pages are the superset of controls capable of Navigation and allow itself to load inside a frame.
  • Manas Patnaik Blog
  • It is important to know the relation between Frame and Page. The preceding figure illustrates the relation between them. Frame is responsible for navigation to a particular page with the URI. Once the page has loaded it can access the host Navigation system by NavigationContext andNavigationService.
Step By Step with an Example
CREATE A SILVERLIGHT APPLICATION
  • Lets create a Silverlight Application from Visual Studio. As shown in the figure 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 .

  1. <Grid x:Name="LayoutRoot" Background="White">
  2. <sdk:Frame Margin="0,37,0,-15″
  3. Name="frameContainer"
  4. Source="/View/Home.xaml"/>
  5. <HyperlinkButton Content="Home"
  6. Height="19″ HorizontalAlignment="Left"
  7. Margin="12,12,0,0″ Name="hlHome"
  8. VerticalAlignment="Top" Width="39″ Click="hlHome_Click" />
  9. <HyperlinkButton Content="About"
  10. Height="19″ HorizontalAlignment="Left"
  11. Margin="57,12,0,0″ Name="hlAbout"
  12. VerticalAlignment="Top" Width="35″ />
  13. <HyperlinkButton Content="Customer"
  14. Height="19″ HorizontalAlignment="Left"
  15. Margin="98,12,0,0″ Name="hlCustomer"
  16. VerticalAlignment="Top" Width="62″ />
  17. </Grid>

Notice the HyperlinkButton "Home" click Event. It calls the code behind logic of navigating to the particular page.

  1. private void hlHome_Click(object sender, RoutedEventArgs e)
  2. {
  3. this.frameContainer.Navigate(new Uri("/View/Home.xaml"UriKind.Relative ));
  4. }
ADD ERROR PAGE FOR RESOURCE NOT FOUND
  1. <sdk:Frame Margin="0,37,0,-15″
  2. Name="frameContainer"
  3. Source="/View/Home.xaml"
  4. NavigationFailed="frameContainer_NavigationFailed" />
  1. private void frameContainer_NavigationFailed(object sender, System.Windows.Navigation.NavigationFailedEventArgs e)
  2. {
  3. e.Handled = true;
  4. frameContainer.Navigate(new Uri("/View/ErrorPage.xaml"UriKind.Relative));
  5. }
Navigation Through XAML

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

  1. <HyperlinkButton Content="About"
  2. Height="19″ HorizontalAlignment="Left"
  3. Margin="57,12,0,0″ Name="hlAbout"
  4. VerticalAlignment="Top" Width="35″
  5. NavigateUri="/View/About.xaml"
  6. TargetName="frameContainer"
  7. />
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 a short and meaningful name for URIs. Suppose for this example the user should be allowed  to navigate the Customers page by adding "/Customers" to the URL. To use URIMAPPING we need the following 2 references to our mainpage.xaml page.
  1. xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
  2. xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
  • Our Next step will be adding mapping to the Frame Control.
  1. <sdk:Frame Margin="0,37,0,-15″
  2. Name="frameContainer"
  3. Source="/View/Home.xaml"
  4. NavigationFailed="frameContainer_NavigationFailed" >
  5. <navigation:Frame.UriMapper>
  6. <uriMapper:UriMapper>
  7. <uriMapper:UriMapping Uri="/Customers" MappedUri="/View/Customers.xaml" />
  8. </uriMapper:UriMapper>
  9. </navigation:Frame.UriMapper>
  10. </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 MappedUri.

  1. <HyperlinkButton Content="Customer"
  2. Height="19″ HorizontalAlignment="Left"
  3. Margin="98,12,0,0″ Name="hlCustomer"
  4. VerticalAlignment="Top" Width="62″
  5. NavigateUri="/Customers"
  6. />

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 that must be loaded once the user clicks on the button in the customers page. This can be achieved through code behind in Customers page on button click event .
  1. private void btnShowDashBoard_Click(object sender, RoutedEventArgs e)
  2. {
  3. NavigationService.Navigate(new Uri("/Admin/DashBoard.xaml"UriKind.Relative));
  4. }

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

Manas Patnaik Blog

Final Words

Silverlight navigation supports much more complex navigation logic such as 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


Similar Articles