Navigation Framework In Silverlight:-

Navigation Framework in Silverlight is used to navigate through different pages.Like ASP.Net you can pass query string parameters .For this we have to use System.Windows.Controls.Navigation

Namespace in xaml page.

->Create Silverlight project.

->Add Views folder in Silverlight application.

->Add  Home.xaml, About.xaml, Contact.xaml and ContactByRegion.xaml pages in views folder.

Home.xaml:-

<navigation:Page x:Class="NavigationFramework.Views.Home"

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

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

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

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           mc:Ignorable="d"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           Title="Home Page" >

    <Grid x:Name="LayoutRoot">

        <TextBlock Text="This is home page..."></TextBlock>

    </Grid>

</navigation:Page>

About.xaml:-

<navigation:Page x:Class="NavigationFramework.Views.About"

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

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

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

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           mc:Ignorable="d"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           Title="About Page">

    <Grid x:Name="LayoutRoot">

        <TextBlock Text="This is about page..."></TextBlock>

    </Grid>

</navigation:Page>

Contact.xaml:-

<navigation:Page x:Class="NavigationFramework.Views.Contact"

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

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

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

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           mc:Ignorable="d"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           Title="Contact Page">

    <Grid x:Name="LayoutRoot">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="135"></ColumnDefinition>

            <ColumnDefinition Width="100"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="Get Address By Region:"></TextBlock>

        <ComboBox Name="cbRegion" Grid.Column="1" Height="30" VerticalAlignment="Top" SelectionChanged="cbRegion_SelectionChanged">

            <ComboBoxItem  Content="India"></ComboBoxItem>

            <ComboBoxItem Content="US"></ComboBoxItem>

            <ComboBoxItem Content="Srilanka"></ComboBoxItem>

        </ComboBox>

    </Grid>

</navigation:Page>

private void cbRegion_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            //Get the selected region.

            ComboBox cb = sender as ComboBox;

            ComboBoxItem item = cb.SelectedValue as ComboBoxItem;

            string region = item.Content.ToString();

            //Gets the service that the host used to navigate to this page and use that service to navigate.

            this.NavigationService.Navigate(new Uri(string.Format("Contact/{0}", region), UriKind.Relative));

        }

ContactByRegion.xaml:-

<navigation:Page x:Class="NavigationFramework.Views.ContactByRegion"

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

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

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

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           mc:Ignorable="d"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           Title="ContactByRegion Page" Loaded="Page_Loaded">

    <Grid x:Name="LayoutRoot">

        <TextBlock Name="txtSelectedRegion"></TextBlock>

    </Grid>

</navigation:Page>

private void Page_Loaded(object sender, RoutedEventArgs e)

        {

            //Check the query string.

            if (this.NavigationContext.QueryString["region"] != null)

            {

                //Get the query string.

                txtSelectedRegion.Text = "You have selected  " + this.NavigationContext.QueryString["region"].ToString() + "  region";

            }

        }

->Open App.xaml file and add UriMappings for each and every page created above.

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

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

             x:Class="NavigationFramework.App"

             xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation">

    <Application.Resources>

        <navcore:UriMapper x:Key="uriMapper">

            <navcore:UriMapping Uri="Home" MappedUri="\Views\Home.xaml"></navcore:UriMapping>

            <navcore:UriMapping Uri="About" MappedUri="\Views\About.xaml"></navcore:UriMapping>

            <navcore:UriMapping Uri="Contact" MappedUri="\Views\Contact.xaml"></navcore:UriMapping>

            <navcore:UriMapping Uri="Contact/{region}"  MappedUri="\Views\ContactByRegion.xaml?region={region}"></navcore:UriMapping>

        </navcore:UriMapper>

    </Application.Resources>

</Application>

->Open MainPage.xaml and  add frame control and use the UriMappings created above.

<UserControl x:Class="NavigationFramework.MainPage"

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

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

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

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:navcore="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center">

        <Grid.RowDefinitions>

            <RowDefinition Height="20"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid Grid.Row="0">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="50"></ColumnDefinition>

                <ColumnDefinition Width="50"></ColumnDefinition>

                <ColumnDefinition Width="50"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <HyperlinkButton Grid.Column="0" Background="Gray"  x:Name="hbtnHome" Content="Home" Click="Button_Click"  Tag="Home"></HyperlinkButton>

            <HyperlinkButton Grid.Column="1" Background="Gray" x:Name="hbtnAbout" Content="About" Click="Button_Click" Tag="About" ></HyperlinkButton>

            <HyperlinkButton Grid.Column="2" Background="Gray" x:Name="hbtnContact" Content="Contact" Click="Button_Click" Tag="Contact"></HyperlinkButton>

        </Grid>

        <Grid Grid.Row="1">

            <Grid.RowDefinitions>

                <RowDefinition Height="*"></RowDefinition>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="400"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <navcore:Frame Grid.Row="0" Grid.Column="0" Name="MainFrame" UriMapper="{StaticResource uriMapper}" Source="Home"></navcore:Frame>

        </Grid>

    </Grid>

</UserControl>

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com