My Master's Thesis Problems and solutions encountered…

Views – Navigation Framework

When developing your Silverlight application you will almost always need to create several pages and subpages. Thus, you will need a navigation framework. Silverlight allows you to browse between different pages while enabling forward and backward navigation through the history using the browser's back and forward buttons.

This post provides a complete walk trough on how to implement a menu in your Silverlight application, and how to create and access subpages. You will end up with something like the application showed below (but without the formatting):

The working application is temporarily hosted here.

Step 1: Add support for the Navigation Framework by adding a reference to System.Windows.Controls.Navigation.dll by right clicking on the References folder in your Silverlight Project, and choosing Add reference.

Step 2: Go to the .Net tab, and select the System.Windows.Controls.Navigation, as seen below:

Notice that it says "Filtered to: Silverlight 4" at the top. If you happen to have converted your Silverlight application from Silverlight 3, then it will say "Filtered to: Silverlight 3", and you will need to update this by right-clicking on you project >> Properties >> and set Target Silverlight Application to "Silverlight 4".

Step 3: You will need to add System.Windows.Controls.Navigations to your UserControl definition. Insert the following code at the top of your MainPage.xaml:

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

Step 4: Create a StackPanel within your Grid in your MainPage.xaml, and insert HyperlinkButtons, that will be used as the menu. Something like this:

<!--Menu -->
            <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Bottom"
                            Grid.Column="1"
                            Grid.Row="0">

                <HyperlinkButton Content="Home"
                                 Click="LinkClick"
                                 Tag="/Home.xaml"
                                 Padding="5"/>
                <HyperlinkButton Content="Find supplier"
                                 Click="LinkClick"
                                 Tag="/Find_Supplier.xaml"
                                 Padding="5"/>
                <HyperlinkButton Content="Questionnaire data"
                                 Click="LinkClick"
                                 Tag="/Options.xaml"
                                 Padding="5"/>
            </StackPanel>
<!--Navigation Frame -->
            <navigation:Frame x:Name="ContentFrame"
                              Margin="10"
                              Grid.Row="1"
                              Grid.Column="1"
                              BorderBrush="Black"
                              BorderThickness="2"
                              Source="/Home.xaml"
                              />

Note:
Lines 2-6 define how the menu will look like, so you can of course change this as you please.
Line 10, 14, and 18: You will create each of these pages in the next step. Change the Tag so it matches the name of your subpages.
Line 9, 13, 17: The LinkClick-method is created later.
Line 28: The Source states the opening page, ie. the frontpage of your application.

The above code basically just creates the menu that the user will click on to navigate through the application. The XAML page you insert this into will not ever be shown: It is merely used to define the framework and the links to subpages. What you need to do next is actually create all the subpages, that will hold all content.

Step 5: Add a new page by right-clicking on your Project >> Add >> New Item >> New Page. It looks like this:

Remember to name the pages like you stated in the HypperlinkButton above.

Step 6: Open your new subpages and add simple Textblocks, preferably including the name of the page, so you can identify it when you run the program.

Step 7: The last step is to add a LinkClick method in your MainPage.xaml.cs.

 private void LinkClick(object sender, RoutedEventArgs e)
        {
            HyperlinkButton button = (HyperlinkButton)sender;
            string viewSource = button.Tag.ToString();
            ContentFrame.Navigate(new Uri(viewSource, UriKind.Relative));

        }

And that's it!

Inner Views

If you need to create a new page that is not one of the 'main' pages shown in the menu, you need to create an InnerView. You just do like shown above (you create a button with a Click property, but without the Tag property, and you create a new page). The main difference lies in step 7. You have to insert the code below instead:

 private void LinkClick(object sender, RoutedEventArgs e)
        {
           NavigationService.Navigate(new Uri ("/InnerView.xaml", Uri.Kind.Relative));

        }

Enjoy!