Favourite Pages

Wednesday, 12 February 2014

Message Box, Application Bar and Page Navigation


Message Box, Application Bar and Page Navigation
Part 3
Welcome back to WP8 programming, in this tutorials, we will get into deep dive on how to be able to use the Message Box, Application Bar and Page Navigation together with Navigating data from one page to another.
A.   Page Navigation:
Open the visual studio and create a new WP8 application ‘PartThree’. Navigation on a WP8 app is enabled by the presence of the PhoneApplicationPage’s class that has the property NavigationService. This service is the one used to navigate from one page to another. This NavigationService exposes the Navigate method which loads the specified page you want to navigate to.
1.     Adding a Button.
On the Display Layout, let’s drag and drop a button from the ToolBox Window on the Left and rename its content as “Next Page” on the Property Window, also give the Button a name, preferably “nextPageButton”!

2.     Creating a new Page
To have a new Windows Phone Application Page, right click on the project on the “Solutions window” and select Add -> New Item. Or Press ‘Ctrl+Shift+A’


Choose Windows Phone Portrait Page and rename it to PageOne.xaml.


3.      Creating the event.
On the home page, double click the “nextPageButton” and it creates the event handler for you.
Add the following C# code for navigation.

Press f5 to run your new app.

B.   Page navigation with Data.
When developing a WP8 application, sometimes it requires one to navigate with data from one Windows Phone Application Page to the next. For it to be possible, you need to create a  PhoneApplicationService.State dictionary” that will temporary store your data. The storage persists until your app is deactivated. To receive the data on our PageOne.xamk, we will have to overied ‘onNavigatedTo()’ method. Add a ‘TextBox’ by drag and dropping from the ‘ToolBox’ window on your Display Layout Page on the Home Page and rename it as “myInputBox” and remove the text.
1.     On the navigation event for your button, add the following code.

2.     On PageOne, drag and drop a “textBlock” on the “DisplayLayout” from the “ToolBox”. Rename the textblock as “myDsiplayTextBlock”. Add ‘onNaviagtedTo’ event.

3.     Now run the app again!

C. MessageBox
Message Box in WP8 are used to display to the user a scenario where the information is displayed to the user, the message is disposable only when the user selects to ‘OK’ or when provided with a choice to accept or cancel. Lets re visit our sample application and use a message box to Display the data user inputs in the ‘textBox’.
1.     Drag and drop an new “button” from the “Toolbox” and rename it as “MessageBoxButton” and Content as “Display”.
2.     Double Click it to create an event for you.
3.     On the c# code, insert the following code.
4.    
5.     It is also possible to add a ‘Caption’ for your message Box and handle the results of a button clicked.
6.    


D. Application Bar
In a Windows Phone, a default Application Bar is a row of icon buttons and an ellipsis along the bottom of the phone’s screen. The ellipsis when clicked displays the labels for the menu items and icon buttons. This Bar automatically adjusts on different phone orientation; on landscape orientation the Application Bar appears on the side of the screen vertically.
We can have either ‘icon buttons’ or ‘Menu items’ or even both on the application bar. By default the text label for ‘icon button; and menu label is in lowercase.
Application bar can be created using the c# code or using the .xaml which is easier to create.
You can have the Application Bar either in two modes, “Mode="Minimized"” or ”Mode="Default"”
Each menu item and icon button can have its own event like shown.
On our MainPage.xaml, let’s add the following code for the Application Bar.
 


Get the source code here.
We shall continue from here on our next tutorials.
Thanks.




Kamiri Peterson M,
Game & Software Developer, Tutor & Mentor.
Google+: 
http://gplus.to/pbosoa
Quick Links: www.kapes.yolasite.com 
Nokia Store Links: Nokia Store 
Windows Store Links: Windows Store 


No comments:

Post a Comment