In 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.
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.
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″/>
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));
}
Page 2 Code:
[code:c#]private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(BasicPage1));
}
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.
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.
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.
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.
No Comments
Nearly all of the issues you stage out is astonishingly reputable and it helps make me question the explanation why I experienced not seemed at this in this mild prior to. Your piece genuinely did switch the light on for me personally as significantly as this subject goes. However at this time there is actually one point I am not really far too comfy with and although I try out to reconcile that with the central concept of the issue, enable me observe just what all the rest of your visitors have to say.Very well carried out. My blog page http://billardgratuit.blogspot.com/