Navigation 01 Parameter

Navigating in a UWP is pretty straight forward, it's actually the frame that does most of the heavy lifting for you, you just have provide with the type that you want to navigate to and an optional serialize-able parameter. Let's say that we have two pages, our MainPage.xaml and a SecondPage.xaml.

The mark up for MainPage.xaml is as follows

<Page

    x:Class="pc.NavigateExample.MainPage"

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

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">

            <TextBox x:Name="Input_TextBox" />

            <Button Click="Button_Click">Go</Button>

        </StackPanel>

    </Grid>

</Page>

and that just renders an empty page with a textbox and a Go button, I've removed a lot of the namespaces for brevity's sake, but it should do for this example. Now if we look at our codebehind of our main page where again I removed the using statements to the bare bones.

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace pc.NavigateExample

{

    public sealed partial class MainPage : Page {

        public MainPage() { InitializeComponent(); }

        private void Button_Click(object sender, RoutedEventArgs e) {

            var parameter = Input_TextBox.Text;

            Frame.Navigate(typeof(SecondPage), parameter);

        }

    }

}

we simply grab the content of our textbox and call the navigate function of our Frame object and pass in the type of the page we want to navigate to and our parameter. In this case we used a string variable as the parameter to pass, but the actual type is an object, however this object must be xml serializable, this is because when you're application is suspended your navigation stack is serialized.

Now that's enough for our navigation to work, when we click our "Go" button we'll get navigated to our SecondPage.xaml.

<Page

    x:Class="pc.NavigateExample.SecondPage"

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

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

            <TextBlock>Second Page</TextBlock>

            <TextBox x:Name="output_TextBox" PlaceholderText="Parameter received" />

        </StackPanel>

    </Grid>

</Page>

now our second page is also really straight forward and if we run our application as is, our navigation will work, but obviously there will be no sign of our parameter. To get our parameter we override the protected OnNavigatedTo method from the base "Page" object. if you look at the codebehind of the MainPage and the SecondPage you'll notice that they both inherit from Page, and page implements the OnNavigatedTo(NavigationEventArgs e) method.

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

namespace pc.NavigateExample

{

    public sealed partial class SecondPage : Page

    {

        public SecondPage() { this.InitializeComponent(); }

        protected override void OnNavigatedTo(NavigationEventArgs e) {

            base.OnNavigatedTo(e);

            var parameter = e.Parameter as string;

            if (parameter != null)

                output_TextBox.Text = parameter;

        }

    }

}

above we override our virtual OnNavigatedTo method which fires whenever a page is first navigated to, it's here that we extract our parameter from our previous page and set our Output textbox's value to it.