Floating FB popout byF5debug

Navigate between pages in Windows Store App - Day 6

 

imageIn this article we are going to see how to navigate between pages in a Windows Store Application. In our previous article we have seen how to use the application bar effectively with some design principles for a Windows Store application development. Similarly in this article we will see the basic principles that should be used to navigate between pages in a Windows Store application development. Navigation between pages is something which we have from the traditional model of any application development like take an example of a website, where we should have option to navigate between pages and collect the user information. Similarly consider we need to have multiple pages in the windows store application and we need to navigate between pages to collect information or manipulate some data we can do that effectively which we will be seeing in this tutorial.      [more]

How to code to navigate between pages?

So here is the deal on how we can effectively code to navigate between pages, this should be something we should consider while designing the application or architecting the application which should tell the developer which page has which information or when we navigate between the pages do we need to have option to pass information between pages etc.. which we normally to in a traditional web application development. Let us see the steps on how to achieve this task for a Windows Store application development, I would suggest you to read my previous article on how to create your first Windows Store application (Developing your first Windows Store App in C# and XAML - Day 3) which will provide some insights and step by step approach on starting the IDE.

Open Visual Studio 2012 IDE in Administrator mode and create a new Windows Store application with C# as the code behind, if you are familiar with JavaScript then go with JavaScript templates as shown in the screen below.

image


We can select the template as per the requirement, please read the article Selecting a right Template and Language for your Windows Store App - Day 2 which provides some insights on which template an be selected for your requirement. Once the project is created we can see a list of default files and folders added to the solution, refer to the previous article to understand the usage of each file. Let us add 2 pages between which we will play around with the navigating options available with the Windows Store application development as shown in the screen below.

image

Now let us use some controls to demonstrate how to navigate from Page 1 to Page 2 on a button click event, so drag and drop a button control from the tool box or if you are familiar with XAML you an write your own code to drop a button on the page 1 and page 2 as shown in the code below.

Code:

[code:c#]

<Button Content="Navigate to Page 2" HorizontalAlignment="Left" Margin="126,54,0,0" Grid.Row="1" VerticalAlignment="Top" Height="69" Width="268"/>
        <TextBlock x:Name="txtpage1block" HorizontalAlignment="Left" Margin="126,160,0,0" Grid.Row="1" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="59" Width="556"/>

[/code]

image

In Windows Store application development we have every page has a Frame object which has a list of properties and methods that makes developer life easy by simply using these predefined methods as listed below.

S No

Method/Property

Description

1 Navigate This method is used to display the content in the Frame.
2 GoBack It Navigates to the most recent item, basically the back navigation history that app used if the Frame manages to use its own navigation history.
3 GoForward It Navigates to the most recent item in the forward direction, basically the forward navigation history that app used if the Frame manages to use its own navigation history.
4 CanGoBack Gets a value that indicates whether there is at least one entry in back navigation history.
5 CanGoForward Gets a value that indicates whether there is at least one entry in forward navigation history.

 

Now let us write the code for the navigation process, let write the below code in the button click event of the Page 1 which need to navigate to page 2 as shown in the code below.

Page 1 Code:

[code:c#]

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(BasicPage2));
        }

[/code]

Page 2 Code:

[code:c#]

private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(BasicPage1));
        }

[/code]

Like wise do the same with the Page 2 button click as well so that it navigates to the page 1 of the application. Now build and execute the project and we can easily navigate between the pages. Now say we need to expand the requirement and we need to pass some parameters between the pages then Navigate method itself have an option to pass it. Let us see how we can do that from passing a textbox value from Page 1 to Page 2 and read the value to display it accordingly. Go to the button click event and pass a static parameter value (make it dynamic as and when required) as shown in the code below.

image

Now go to the Page 2 code behind and write the below code in the OnNavigatedTo event which gets the parameter value that is passed and use it across in the page as required as shown in the screen below.

image

Now build and execute the application and we can see the value is passed and assigned to the Textblock in the page 2 control as shown in the screen below. Here we can change the value which we hardcoded to the dynamic value from a textbox or from any other input medium that can be passed to any screen using the parameter passing option.

image

 

Conclusion:

So in this article we have seen how to achieve the navigation mechanism as per the requirement on passing the user from one page to other or passing the user with a user data from one page to other as and when required based on the requirement. So in the upcoming article we will see how we can enhance and use the Windows Store development capabilities one by one and successfully build an application to ship it to the Windows Store.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter