|
by
kirupa | 3 August 2010
Have questions? Discuss this Windows Phone 7 tutorial
with others on the forums.
While the concept of
navigating between pages sort of exists in desktop
applications, it is really something most of us are
more familiar with when it comes to web sites.
Clicking on a link and going from one page to
another is pretty much the expected behavior.
Strangely enough, that
behavior is common in Windows Phone applications as
well. These applications, despite running locally on the
device, use the page-centric model of web sites
where you use individual pages to
store your content. Where there are individual
pages, there are links to navigate you between them!
Here is a really short
video that demonstrates navigation in a Windows
Phone application:
In the example shown
in the video, I have two pages. The first page contains
some checkboxes and a button labeled build
playlist:
The second page
contains a list of album art and text:
When the build
playlist button on the first page is
clicked, the user is navigated to the second page.
Hitting the back button on the device/emulator takes
you back to the first page. If you found this pretty
cool, by the end of this tutorial, you will have
learned to do all of this yourself....well, at least
the navigation part!
Make sure you have everything
up and running to
do Windows Phone development, and go ahead and
create a new Windows Phone project in Expression
Blend. That's it.
In order to navigate between pages, you need to
first have pages to navigate to. If you don't have a
project that already contains existing pages, let's
quickly look at how to create pages. When you create
a new Windows Phone project, a page will already be
created for you and displayed for editing inside
Expression Blend.
This page is usually
called MainPage.xaml, and you can see it by looking
at your Projects pane:
[ your Projects panel displays all of the files in
your project ]
To add an additional
page, right click on the Project node (the green one
with a C# icon in it) and go to Add New Item. The
New Item dialog will appear:
[ this dialog displays the types of components you
can add to your project ]
This dialog lists all
of the new items you can add to your project. The
item we are interested in for this tutorial is
called Windows Phone page:
[ we want to add a Windows Phone Page ]
Select the Windows
Phone Page item, give it a custom name in the name
field (if you want), and hit OK. When you hit OK,
the New Item dialog will disappear and a new page
will be created and opened for you:
[ your newly created age appears! ]
Your newly created
page will even have a spot for it in your Projects
pane. Everybody is special!
While you can create and design pages,
users will never see anything but the startup page
if you do not provide any navigation functionality
between them. Let’s look at several ways of
providing navigation between pages with each
approach bringing something new to the table.
The easiest way to navigate between pages is to use
Expression Blend and the Navigate to functionality.
On a page, find a button or any element that you
wish to have a user tap/click to navigate between
pages. Right click on that element, and from the
menu that appears, click on the Navigate to menu:
[ right click on any arboard element to see the
Navigate To menu ]
You will see a fly-out
menu listing all of the pages that you can select to
navigate to. Once you select a page, this menu will
disappear and your Properties Inspector will change
to display more properties to help with the
navigation. If you run your application,
tapping/clicking on the element will navigate you to
the page you selected.
If you are curious as
to how this works, we apply a NavigateToPage
behavior behind-the-scenes that provides you with
the navigation functionality. When you select a page
via the menu, I vaguely mentioned that the
Properties Inspector changes. It changes to display
properties of the NavigateToPage behavior:
[ what actually gets added is a
behavior ]
Going into detail
about this behavior goes beyond the charter for this
tutorial. All you need to know is that when you
select a page from the Navigate to menu, everything
is handled behind the scenes to make it work.
There will be times
where you probably don’t want to specify the
navigation in XAML. You may have some conditional
logic where the page you navigate to depends on
something else, or you may be working with the
Application Bar where you cannot apply the
NavigateToPage behavior via the right-click menu
that you saw earlier.
The code for
navigating between pages is pretty straightforward.
Make sure whatever element will be handling the
navigation has an event and event handler associated
with it. In the event handler, the code will look as
follows:
- this.NavigationService.Navigate(new
Uri("/MyPage.xaml",
UriKind.RelativeOrAbsolute));
Just replace
“MyPage.xaml” with the path to the XAML page you
wish to load. Notice that there is a slash before
the path. The slash is important – do not ignore it when
you are typing in your own path.
Navigating between pages is
quite simple - especially in the very basic
scenarios this tutorial covered. For most cases, the
simple approaches defined here will suffice. Once
you get into passing data between pages, things get
a little bit interesting. A future tutorial will
cover some of the more advanced navigation
techniques you can use.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
