Adding a New Page to a Multi-Page Silverlight Application

Posted Sun, Jan 16 2011 17:48 by Deborah Kurata

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#.

image

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.

image

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.)

image

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.

Filed under: , , , ,

Comments

# re: Adding a New Page to a Multi-Page Silverlight Application

Monday, January 17, 2011 12:48 PM by marco

This is a joke! why do you waste ur time writing tutorial on such a basic thing?

# re: Adding a New Page to a Multi-Page Silverlight Application

Monday, January 17, 2011 12:57 PM by Deborah Kurata

Hi Marco -

Thanks for your feedback.

This post is one in a set of posts that build a line of business application step by step. Though the techniques in this specific post may be basic to you, they are required for any of the readers that may be working through this entire set of posts.

# re: Adding a New Page to a Multi-Page Silverlight Application

Wednesday, January 19, 2011 3:20 PM by Michael

Thanks for posting these tutorials - nothing wrong with starting with the basics. You're going to get to some data integration as you continue, I hope?

# Charting in a Silverlight Application using MVVM

Saturday, January 29, 2011 7:13 PM by Deborah's Developer MindScape

Data visualization is often a requirement in today's line of business (LOB) applications. Plus charts

# Accessing Data in a Silverlight Application: EF

Monday, January 31, 2011 12:29 AM by Deborah's Developer MindScape

One of the challenges of building a Silverlight line of business (LOB) application is getting the data

# Accessing Data in a Silverlight Application: EF

Monday, January 31, 2011 12:31 AM by Deborah's Developer MindScape

One of the challenges of building a Silverlight line of business (LOB) application is getting the data

# Silverlight 4 GDR3 a další SL4 novinky

Wednesday, February 23, 2011 2:07 AM by Michalowo Zákysník

  SL4 Update Microsoft uvolnil nový build Silverlightu 4 (4.0.60129.0 též značen jako GD3) jež mj.

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: