Pages - Basic Navigation & Passing Info

Visual Basic tutorials for UWP apps.
2 posts Page 1 of 1
Contributors
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Basic how to navigate pages and pass information between them

A Page is basically the equivalent to a Form and as most of us know from our experience of creating desktop software sometimes we want to show a Form2 or Form3 because not everything fits on a single form and we may want to show settings in a new form or display information from our main form into another. You can also think of a metro app as being more like a website (which they kind of are lol) and websites have pages when you click a link you goto a new page..its the same when working with metro.

This tutorial is based on a "Blank Application" project

So when we start a new blank project we have our 'BlankPage.xaml' which is our main page and this will be the page you see when you run the app. Its like the main form or home page of a website.

We need to add another page to the project so click 'Project > Add new item' and add a Blank Page which by default will be called "BlankPage1" but obviously you can change the name of it if you like.

OK now that we have our two pages go into design view of 'BlankPage.xaml' and add a button somewhere so we have something visual and also have something to click in order to navigate to the next page. Once you've done that we need to add some code the button click event to navigate to our other page so add this code in the button click:
Code: Select all
Me.Frame.Navigate(GetType(BlankPage1))
And you would basically do exactly the same with 'BlankPage1' but we want to navigate back to our main page from there so the code would be:
Code: Select all
Me.Frame.Navigate(GetType(BlankPage))
Run the project and you can now do basic navigation between pages. Awesome.


How to pass information from one page to another

Open 'BlankPage.xaml' in design view again and add a TextBox to the page and give it a name something simple like "Tbox".

Open 'BlankPage1.xaml' in design view and add a TextBlock to the page and give it a name like "Tblock".

Now in the button click code for 'BlankPage' change it to this:
Code: Select all
Me.Frame.Navigate(GetType(BlankPage1), Tbox.Text)
You will notice we added Tbox.Text to the code which will send the contents of our textbox to BlankPage1 when we navigate to it.

In order to display this information on BlankPage1 we need to add some code so open 'BlankPage1.vb' and near the top you will see the "OnNavigatedTo" event which contains all the code we want to run when we open that page. Add this code into it:
Code: Select all
TBlock.Text = e.Parameter
e.Parameter being the information sent from 'BlankPage' when we navigated to 'BlankPage1' and that code displays that information inside the TextBlock we added earlier.

Run the project and type something into the textbox then press your button to navigate to BlankPage1 and you will notice it displays whatever you typed into the box on BlankPage.

So now you can do basic navigation through pages and pass information across them :).

For a more detailed explanation of page navigation go here: http://msdn.microsoft.com/en-us/library ... 71188.aspx

Hope this helps cooll;
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

I am in the process of learning how to develop metro apps and I said to myself hey this is awesomeI should post a tutorial on navigating pages! Just checked and you have it already! Nooooooooo lol.

Nice tutorial though :) I am surprised there aren't any replies to this and no one else other than you have posted tutorials.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
2 posts Page 1 of 1
Return to “Visual Basic”