Navigation in silverlight using Frame

Purpose:

                If application contain multiple pages or user control, which requires navigating between pages. It requires silverlight navigation frame work.

 Navigation types:

                1. Application Navigation

1.       Frame based navigation

2.       Page based navigation

                2. Web Browser-Integrated Navigation

                3. External Navigation

                4. Extending the Navigation System

Navigation using frame or page:

          In frame based navigation, frame acts as a container for page controls, and facilitates navigation to pages. At any one time, the frame displays the content of a single page. You change the page that is displayed within the frame by navigating, either programmatically or through user action, to a new page.

Example:

<UserControl x:Class="NavigationApplication.MasterPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot">

      <sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml">

      </sdk:Frame>

  </Grid>

</UserControl>

Navigating between pages in XAML:

        HyperlinkButton control in Silverlight is used to navigate between pages; it has NavigateUri property, which is used to set target URI of the page. Make sure that HyperlinkButton control should resides outside the frame.

Example: 

<UserControl x:Class="NavigationApplication.MasterPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot">

        <HyperlinkButton NavigateUri="/Home.xaml" Content="Home" />

                <HyperlinkButton NavigateUri=" /Pages/contacts.xaml" Content="Contact Us" />

      <sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml">

      </sdk:Frame>

  </Grid>

</UserControl>

Navigating between pages using code behind:

        The above navigation will navigate to target URI without making any validation. If you don’t want to make some validation or pass some values from one page to another page means, can use navigation in code behind.

XAML:

     Create click event in xaml

<HyperlinkButton Name="aboutUs" Content="About Us"                                                                                        Click="aboutUs_Click"

 Width="100" Height="20"/>

XAML.cs:

      Map frame to target URI, here About.Xaml page

ChildFrame.Navigate(new Uri("/Pages/About.xaml", UriKind.Relative));

Error Handling in Navigation:

            Frame had inbuilt support to handle navigation errors. This is called NavigationFailed event, in this event we can show some error details during navigation.

XAML:

<sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml" NavigationFailed=" ChildFrame_NavigationFailed">

      </sdk:Frame>

XAML.cs:

       Handle navigation errors in code behind, by using the way

private void ChildFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)

  {

   e.Handled = true;

   masterCtrl.Navigate(new Uri("/Pages/ErrorDetails.xaml",UriKind.Relative));

  }