Deborah's Developer MindScape

So, you've started building a Silverlight Line of Business (LOB) application using the Silverlight Navigation Application template (as shown in this prior post). This post covers how to add pages to it.

NOTE: This post is part of a series that starts with this prior post.

1) Add a new Page by right-clicking on the Views folder and selecting Add | New Item. Then pick the Silverlight Page template under the desired language: VB or C#.

2) Add any desired controls to the page.

3) Modify MainPage.xaml to include an additional HyperlinkButton to display the new page. The changes are shown in red:

<UserControl
    x:Class="InStepSM.SL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

        <Grid x:Name="LayoutRoot">
            <Border x:Name="ContentBorder" 
                 Style="{StaticResource ContentBorderStyle}">

                <navigation:Frame x:Name="ContentFrame"
                    Style="{StaticResource ContentFrameStyle}" 
                    Source="/Home" Navigated="ContentFrame_Navigated"
                    NavigationFailed="ContentFrame_NavigationFailed">
                    <navigation:Frame.UriMapper>
                        <uriMapper:UriMapper>
                            <uriMapper:UriMapping Uri=""
                                 MappedUri="/Views/Home.xaml"/>
                            <uriMapper:UriMapping Uri="/{pageName}"
                                 MappedUri="/Views/{pageName}.xaml"/>
                        </uriMapper:UriMapper>
                    </navigation:Frame.UriMapper>
                </navigation:Frame>
            </Border>

            <Grid x:Name="NavigationGrid"
                     Style="{StaticResource NavigationGridStyle}">

                <Border x:Name="BrandingBorder"
                         Style="{StaticResource BrandingBorderStyle}">
                    <StackPanel x:Name="BrandingStackPanel" 
                     Style="{StaticResource BrandingStackPanelStyle}">
                        <ContentControl
                           Style="{StaticResource LogoIcon}"/>
                        <TextBlock x:Name="ApplicationNameTextBlock" 
                          Style="{StaticResource ApplicationNameStyle}"
                          Text="InStep Student Management"/>
                    </StackPanel>
                </Border>

                <Border x:Name="LinksBorder"
                             Style="{StaticResource LinksBorderStyle}">
                    <StackPanel x:Name="LinksStackPanel" 
                        Style="{StaticResource LinksStackPanelStyle}">
                        <HyperlinkButton x:Name="Link1"  
                           NavigateUri="/Home" 
                           TargetName="ContentFrame" Content="home"/>

                        <Rectangle x:Name="Divider1" 
                           Style="{StaticResource DividerStyle}"/>

                        <HyperlinkButton x:Name="Link2" 
                         NavigateUri="/Overview" 
                         TargetName="ContentFrame" Content="overview"/>
                        
                        <Rectangle x:Name="Divider2" 
                          Style="{StaticResource DividerStyle}"/>

                        <HyperlinkButton x:Name="Link3" 
                          NavigateUri="/About" 
                          TargetName="ContentFrame" Content="about"/>

                    </StackPanel>
                </Border>
            </Grid>
        </Grid>
</UserControl>

Ensure that the name of the page is the same name as that defined in the NavigateUri property. In this case, the page is named "Overview" so the NavigateUri property is set to "/Overview.

When you click on the hyperlink, the navigation framework uses the NavigateUri property and the UriMapper code defined in the MainPage.xaml to display the new page.

When you run the application, you should see the following. Notice the new hyperlink in the upper right corner.

NOTE: This page is themed and styled as defined in this prior post. Your page may look different if you used other styles/themes.

Click on the new Overview hyperlink and you will see your page. (The look of the page will differ based on the controls you added to the page.)

Use this technique to add all of the desired pages to your Silverlight application.

Enjoy!

UPDATE 1/17/2011: Changed the screen shots to reflect the theme/styles used in the prior post.