ARTICLE

Navigating and passing values between XAML Pages in Silverlight 2

Posted by Nipun Tomar Articles | Silverlight with C# July 08, 2008
In this article, I discuss how to navigate and pass values between XAML pages in Silverlight.
Reader Level:
Download Files:
 

Silverlight lacks built-in support for reusable pages in its applications, and the task of navigation between them as WPF. A simple workaround this is in Application_Startup. Let do it step by step.

  1. Create a Silverlight application in visual studio 2008
  2. Change the Application_Startup as below

private static Grid root;
private
void Application_Startup(object sender, StartupEventArgs e)

        {

            root = new Grid();

            root.Children.Add(new Page());

            this.RootVisual = root;

  }

  1. Global resources  can be defined in App.xaml that are available to all the pages in the application. To pass the values between pages use get/set properties in the App.xaml and then access these properties from the respective pages.

    public string Name{get;set;}
  2. Add the following code to your App.xaml.cs to create a method that will manipulate the children of the Grid element at runtime.

    public static void Navigate(UserControl newPage)
    {

            UserControl oldPage = root.Children[0] as UserControl;

            root.Children.Add(newPage);

      root.Children.Remove(oldPage);
}

 

  1. Add the following xaml to add TextBox and a Button control to Page.xaml.

<UserControl x:Class="SilverlightApplication2.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <TextBox x:Name="TextBoxName" Grid.Row="0" Background="AliceBlue" Height="50"></TextBox>

        <Button x:Name="Button1" Height="50" Grid.Row="1" Content="Go to Page2" Click="Button1_Click"/>

    </Grid>

</UserControl>

  1. Add functionality to the click event of the button.

private void Button1_Click(object sender, RoutedEventArgs e)

        {

            App app = (App)Application.Current;

            app.Name = TextBoxName.Text;

            App.Navigate(new Page2());

}

  1. Add the following xaml to the Page2.

<UserControl x:Class="SilverlightApplication2.Page2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBlock x:Name="LabelDisplay" Text="Welcome"/>

        <Button Height="50" x:Name="Button1" Click="Button1_Click" Content="Go to previous page"></Button>

    </Grid>

</UserControl>

  1. Add the following code to Page2.xaml.cs

public partial class Page2 : UserControl

    {

        App app = null;

        public Page2()

        {

            InitializeComponent();

            app = (App)Application.Current;

            LabelDisplay.Text = LabelDisplay.Text + " " + app.Name;

        }

 

        private void Button1_Click(object sender, RoutedEventArgs e)

        {

            App.Navigate(new Page());

        }

}

That's  all. You are done run the application and you can seee the result as below

Type youe name in the textbox and press the button, and yes you are on Page2

And now if you press the button, you will be back on first page.

Login to add your contents and source code to this article
post comment
     

Hi Nipun
You mentioned that Silverlight "lacks built-in support for reusable pages in its applications, and the task of navigation between them as WPF" - does that mean that in WPF, you can navigate between UserControls without them being actual Pages?

thanks

Posted by Ofir Aug 13, 2010
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.