Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 16, 2011

Adding a New Page to a Multi-Page Silverlight Application

Filed under: C#,Silverlight,VB.NET @ 7:48 pm

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.

4 Comments

  1.   marco — January 17, 2011 @ 12:48 pm    Reply

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

  2.   DeborahK — January 17, 2011 @ 12:57 pm    Reply

    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.

  3.   Michael — January 19, 2011 @ 3:20 pm    Reply

    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?

  4.   BAH Celeste — August 24, 2015 @ 2:55 am    Reply

    Hi;
    This post is so helpful.Thanks alot I want more post on silverlight with c# in order to develop a complete website because I am a new web developper and I am a fun of silverlight.
    Thanks for your reply.

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs