Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 15, 2011

Building a Multi-Page Silverlight LOB Application

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

Many Line of Business (LOB) applications need to accomplish more than one objective. For example, a Student Management application may need to enter students, enter grades, and show student progress.

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

Though you could try putting all of this functionality on one page, it may be easier for the users if the application provides multiple pages. Each page would allow the user to accomplish one key objective. So the application could have a student page, grade entry page, progress page, and so on.

Building a multi-page Silverlight application is easy if you use the Silverlight Navigation Application Template that is provided in Visual Studio.

Let’s get started.

1) In Visual Studio, select File | New Project.

2) From the New Project dialog, select the Silverlight Navigation Application Template under the Visual Basic or Visual C# node, as appropriate.

image

3) Accept the  defaults in the New Silverlight Application dialog.

image

Visual Studio then creates the Silverlight project and the associated Web project. The Web project provides a test page to launch your Silverlight application. By default, it is defined as the startup project.

The Silverlight Navigation Application template creates a series of files and folders in your Silverlight project.

image

The Assets folder contains your application assets, such as styles and images. If you want to keep your files organized, you can add two folders under the Assets folder: Images and Resources. The Images folder contains any images used by your application. The Resources folder contains any application resources, such as string resources for localization.

The Views folder contains the pages of the application. Visual Studio automatically creates About, Home, and ErrorWindow pages. You can add all of the other pages that your application requires under this folder.

App.xaml contains the application-level resources.

The MainPage.xaml is the start page  for your application. It provides a background for your application and a location to display all of the other pages. It also contains the code for the page navigation. The generated code, modified to display the desired application name and for better formatting, is shown below.

MainPage code:

<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"
              Style="{StaticResource LayoutRootGridStyle}">

        <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"
                      Style="{StaticResource LinkStyle}" 
                      NavigateUri="/Home"
                      TargetName="ContentFrame" Content="home"/>
                                    
                    <Rectangle x:Name="Divider1"
                      Style="{StaticResource DividerStyle}"/>
                   
                    <HyperlinkButton x:Name="Link2"
                      Style="{StaticResource LinkStyle}" 
                      NavigateUri="/About"
                      TargetName="ContentFrame" Content="about"/>

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

Notice that this generated code includes a Style definition for many of the controls, such as the Grid, Border, StackPanel and so on. These resources are defined in the Styles.xaml file.

The key part of this code is the navigation:Frame control. It defines the area where all of the other navigation pages will appear.

The Source property of the Frame control defines the first page that the MainPage.xaml navigates to. Navigated and NavigationFailed define events that you can use upon navigation to the page or when there is a navigation error.

The UriMapper allows you to map uniform resource identifier (URI) strings with pages in your application. In this example, the code is:

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

This specifies that if there is no Uri defined (Uri="") , then display the Home page that is in the Views subdirectory.

If there is a Uri defined and it matches the format of "/{pageName}, use the pageName as the name of the page that is in the Views subdirectory. This is a shortcut for explicitly defined Uri’s and prevents the need to list each page individually. So you do NOT have to do this:

Uri = "/Students" MappedUri="/Views/Students.xaml"
Uri = "/Grades"  MappedUri="/Views/Grades.xaml"

The HyperlinkButton controls at the top of the page define the navigation to the Home and About pages by setting their NavigationUri properties. For example, in the code above, the About HyperlinkButton code is as follows:

                     <HyperlinkButton x:Name="Link2"
                      Style="{StaticResource LinkStyle}" 
                      NavigateUri="/About"
                      TargetName="ContentFrame" Content="about"/>

The UriMapper then maps the Uri (/About) to the page defined by /Views/About.xaml. The navigation then displays that Page in the Frame named "ContentFrame".

Now let’s add some content to the other pages before we run the application.

Adding content to the Home page:

1) Select the Home.xaml file under Views in Solution Explorer to display the  page in the designer.

2) Add controls to build a welcome page using the Toolbox controls.

3) If desired, add an image to your project and then add it to your page.

The sample code for the Home page looks like this:

<navigation:Page x:Class="InStepSM.SL.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"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home"
    Style="{StaticResource PageStyle}">

    <Grid x:Name="LayoutRoot">
        <ScrollViewer x:Name="PageScrollViewer"
           Style="{StaticResource PageScrollViewerStyle}">

            <StackPanel x:Name="ContentStackPanel">
                <TextBlock x:Name="HeaderText"
                   Style="{StaticResource HeaderTextStyle}" 
                   Text="Welcome to InStep’s Student Management"/>
                <TextBlock x:Name="ContentText" 
                   Style="{StaticResource ContentTextStyle}" 
                   Text="InStep’s Student Management package keeps you in step with your students and their progress."/>
                <Image Height="150" Margin="10" Name="image1"  
                   Width="200" 
            Source="/InStepSM.SL;component/Assets/Images/Welcome.jpg"/>
            </StackPanel>

        </ScrollViewer>
    </Grid>
</navigation:Page>

Notice that the topmost element for the page is a "Page". Any Page can be displayed in the MainPage using the navigation feature.

Adding content to the About page:

1) Select the About.xaml file under Views in Solution Explorer to display the  page in the designer.

2) Add controls to build an about page.

The sample code for the About Page looks like this:

<navigation:Page x:Class="InStepSM.SL.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"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="About"
    Style="{StaticResource PageStyle}">

    <Grid x:Name="LayoutRoot">
        <ScrollViewer x:Name="PageScrollViewer"
               Style="{StaticResource PageScrollViewerStyle}">
            <StackPanel x:Name="ContentStackPanel">
                <TextBlock x:Name="HeaderText"
                   Style="{StaticResource HeaderTextStyle}" 
                   Text="About InStep Student Management"/>
                <TextBlock x:Name="ContentText"
                    Style="{StaticResource ContentTextStyle}" 
                    Text="Application Name: InStep.SL"/>
                <TextBlock Style="{StaticResource ContentTextStyle}" 
                    Text="Version: 1.0"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</navigation:Page>

Now you are ready to run the application.

The page initially displays the Home page.

image

Notice that the Internet Explorer Navigation bar shows the page after the "/". This has the added benefit of allowing a user to bookmark a specific page of your application.

If you click on About in the upper right corner, the About page displays.

image

Use the techniques described here any time you want to build a Silverlight application that navigates to multiple pages.

Enjoy!

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