Silverlight 4 Hosting :: Passing Values between Pages in a Silverlight 4 Navigation Application

Often you’ll want to pass selected values from one page in a Silverlight 4 application to another.

Query Strings are a valid approach, but you might want to pass more than simple strings or IDs in the URL.

This quick walkthrough will show you to use access a simple static variable from one page, on another.  This could easily be a full object, but in this example it will just be a string.

Start off by creating a new project.  Silverlight now ships with a “Silverlight Navigation Application” template, which is useful for creating Line of Business (LOB) applications.  There are also a number of other templates, such as the Cosmopolitan Theme that you might find useful.


Once the project is created, open Home.xaml.cs and add a static variable to Home.xaml.cs.  This is the value we’ll be reading back on the next page.

public partial class Home : Page
{
    public static string ValueFromHome =
        "A Value on the Home.xaml.cs page";

Now add a new Page, using Page1.xaml as the default name.


We need a way to navigate here, so add a Button to Home.xaml.

<navigation:Page x:Class="SLNavDemo.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="Home"/>
                <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
                                   Text="Home page content"/>

                <Button Content="Go to Page 1"
                        Click="btnGoToPage1_Click"/>

            </StackPanel>

        </ScrollViewer>
    </Grid>

</navigation:Page>

Utilizing the NavigationService, add the following content to the Click Event.  Notice the relative URI for /Page1.  We don’t have to specify the full file name for the page, since the Navigation service can figure this out for us using UriMappings.

private void btnGoToPage1_Click(object sender, RoutedEventArgs e)
{
    this.NavigationService.Navigate(new Uri("/Page1", UriKind.Relative));
}

If you’re curious how this works, you can view the UriMappings in MainPage.xaml.  The last UriMapping simply says “if the page isn’t mapped explicitly, just try to find a file in the /Views folder with a .xaml extension.

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

Now open Page1.xaml and add a simple TextBlock to the page.

<navigation:Page x:Class="SLNavDemo.Views.Page1"
           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
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Page1 Page">
    <Grid x:Name="LayoutRoot">
        <TextBlock />
    </Grid>
</navigation:Page>

Now all we have to do is update the Text property, with the value from the Home page.

        public Page1()
        {
            InitializeComponent();

            tb.Text = Home.ValueFromHome;
        }

Hit F5 to run.

Click the button we added, and the application will navigate to Page1, with the text applied.



You’ll also notice that the URL changed to /Page1.  This is to support the browsers back button.

A pretty simple example, but this can be powerful when passing along values from one page to another, for instance, selected items in a grid.  You can also use this approach to reduce extra web service calls, if the values already exist on another page in the Silverlight application that the user has interacted with.

Hope this helps!

Comments are closed.

Sponsors

JaringanHosting.com

Cheap Reseller Hosting

Best Blog Hosting Provider

Best European ASP.NET 4.0 Hosting Provider