04. The Back Button

Series LogoIn the previous post, we learned how to pass parameters through NavigationService in a Windows Phone Application.

This is the 4th post in “Discover Windows Phone” development series  we’ll be covering the back button paradigm.

A couple of posts ago, we talked about Page Navigation, and how we can simply call the NavigationService to get to a different page in our application.  The Back button was mentioned briefly, but the complexities of the Back button are deserving of their own post in this series, primarily because you can override what the Back button does.

How the Back Button Works

Think of the Back button much like the one in your browser.  You can click it to navigate backwards through the history of decisions you have made in that session.  It takes you across multiple sites, and every page you visited within those sites.  The Back button on a Windows Phone works the same way.  It will take you backwards through the pages you have visited, even across multiple applications!

So, for example, if we:

  1. Open the People hub.
  2. Select a friend from our list of contacts.
  3. Click on you’re friends website
  4. Hit the Start button.
  5. Open another application.

When we hit the back button, we will navigate backwards through the previous list of events.

Overriding the Back Button

In some cases, overriding the back button is needed. In Windows Phone development you can override the Back button to make it do what you want. In any case where you want to override the back button, you should be certain you’re considering what your user considers “back.”

  1. You should consider what “back” means to your user at that point in time.
  2. If the user presses the Back button a second time, you should let the default behavior happen.
  3. Using the Back button to pause a game is perfectly acceptable, but a second press means they want to actually go backwards.  Let them.

Here you go. Here’s the code to override the Back button in Windows Phone 8.

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
//Your code goes here. Be responsible.
e.Cancel = true; //Cancels the default behavior.
}

That was the code for overriding the back button, next post will be discussing how to create an appBar
For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

03. Passing Parameters

Series LogoIn the previous post, we talked about Page Navigation in a Windows Phone Application.

This is the 3rd post in “Discover Windows Phone” development series  we’ll be covering Passing Parameters to pages.

Let’s say that you want to merge Meals.xaml and Beverages.xaml in the same page, since they do the same functionality but only display different content. You can also merge the two event handlers of the button since they’re also similar. Let’s start step by step.

1) Open the application we created together through the previous couple of posts.
2) From the Solution Explorer, delete Beverages.xaml and Meals.xaml
3) Create a new page by right clicking the project>Add>New Item>Windows Phone Portrait Page and name it Menu.xaml
4) In Mainpage.xaml, change the event handler functionof both buttons to button_click, as shown in the picture

Screenshot (128)

5) In MainPage.xaml.cs, delete the old two event handler functions, which were button_meals_click and button_beverages_click and add a new function

private void button_click(object sender, RoutedEventArgs e){
Button clickedButton = sender as Button;
switch(clickedButton.Name)
{
case "button_meals": NavigationService.Navigate(new Uri("/Menu.xaml?name=" + clickedButton.Content, UriKind.Relative));
break;
case "button_beverages": NavigationService.Navigate(new Uri("/Menu.xaml?name=" + clickedButton.Content, UriKind.Relative));
break;
}
}

Screenshot (130)

This function is called by the two buttons in the MainPage.xaml and checks the name of the button. If the name is “button_meals” it navigates to the Menu.xaml page and sends the content of the button, which in this case “Meals”. Same applies with the other button.

6) Go to Menu.xaml.cs, where the parameter that was passed to from MainPage.xaml.cs. Add to the OnNavigatedTo, if it is not there add it.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e){
base.OnNavigatedTo(e);
string name = "";
if (NavigationContext.QueryString.TryGetValue("name", out name))
textblock_pagename.Text = name;
}

This function receives the parameter passed by the previous page and assigns it to the textblock that holds the page name.

That was simply how to pass a parameter to another page, download the source code from here

Next post will be discussing the back button paradigm
For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

02. Page Navigation

Series LogoIn the previous post, we talked about Solution Explorer files in a default Windows Phone Application.

This is the second post in “Discover Windows Phone” development series  we’ll be covering Page Navigation.
This topic is important for the following two reasons:
1. because you don’t want to build your project based on only one page.
2. because you can make use that your application will automatically be able to leverage the phone’s built-in hardware back button. This will allow your user to navigate backwards in your application when they want to get back to what they were doing previously.

Let’s start applying how to simply navigate between pages

Simple Navigation
We have multiple pages, and we want to give the user a way to get between them. Let’s build a simple navigation UI that will allow us to do just that.

Last post we’ve created a default Windows Phone Application, let’s open it.
1) Open the application from where you saved it last time. Probably it will be in Documents>Visual Studio 2013>Projects

2) Right Click on the Project in the Solution Explorer>Add>New Item
Screenshot (115)

3)(Under Windows Phone on the left pane) Windows Phone Portrait Page. Name it Meals.xaml
Screenshot (118)

4) Change page’s title, so we know we’re on each page. Look for the XAML Textblock element with Text “page name” to “Meals”
Screenshot (119)

5) Repeat step 3 and 4 with page name Beverages.xaml and page name “Beverages”.

6) Go back to MainPage.xaml and also change “page name” to “Main Page”.
Screenshot (120)

7) Add 2 buttons in the MainPage.xaml by dragging the “Button” control from the Toolbox window to the MainPage designer view.
Screenshot (121)

8) Change the text that appears on each button by going to the Properties windows on the left. Under Common, change Content from “button” to Meals. Do the same to button 2 and change Content to “Beverages”.  Also change the name of each button from the same properties window as shown. Change names to “button_meals” and “button_beverages”.
Screenshot (124)

 9) Add a Click event to the button, that when you click on the button a special event happens, which in our case is to navigate to a specific page. To do this, double click on the button itself in the design view and it will automatically create an event handler and take you to the C# page where you write what happens when the button is clicked. Do the same click to the second button.
Screenshot (126)

10) Now is finally time to write the statement of navigation to another page.
for button_meals

NavigationService.Navigate( new Uri("/Meals.xaml", UriKind.Relative));

And for button_beverages

NavigationService.Navigate( new Uri("/Beverages.xaml", UriKind.Relative));

Download the Source code from here:

As you can see, by simply navigating using the NavigationService, all of your user’s actions are recorded, and using the Back button will allow them to return through their decision tree. Next post will be covering Application Bar.

For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

01. Project Template

Series Logo

On my first post in the “Discover Windows Phone” development series  we’re going to take a look at the default Windows Phone project template you generally will start with in Visual Studio 2013.

Windows Phone Application:
1. Open Visual Studio 2013
2. File> New Project
3. Under Visual C#>Choose Windows Phone> Windows Phone ApplicationVisualStudio

The left pane is the Designer View and the right pane is the XAML Viewdesignerxaml

Solution Explorer

Solution Explorer

Lets take a look at the Solution Explorer for a default project and see what does it contain and the purpose of each.

AppManifest.xml
A simple application manifest file that is required to generate the application package (XAP) for store submission.

AssemblyInfo.cs
Another configuration file that contains the name and version metadata ,including the copyrights, that is embedded into the generated assembly file.

WMAppManifest.xml
Another metadata field that contains application specific data that are categorized into four parts
1. Application UI; Display Name, description, app icon, first page to navigate to, etc.
2. Capabilities; this is where you tell the device that you will use capabilities like accessing user’s contacts or using location services, etc.
3. Requirements; This part is where you specify some hardware requirements needed to run the application, like NFC.
4. Packaging; this is where to specify some data about the packaging file, like author, version, publisher, etc.

ApplicationIcon.png
Replace this image with the one you want to represent your application on the phone.  This is what the users will see when they see your application on their phone.  Make it count.

AppResources.resx
For localizing the applicartion, basically you need to separate localizable resources from the rest of the code by creating language-specific resource files. Visual Studio uses these files to create assemblies that allow your application to support many languages.

App.xaml
It is where you keep universal data and settings for your entire application.  You can also keep my style data in this file as well, but it’s not required to do so.

App.xaml.cs
The code-behind for App.xaml (any .xaml file has a .cs file for the code behind), this is where you will handle the back-end of your application.  

MainPage.xaml
Your first application page (unless you change it in WMAppManifest.xml). Don’t make it the only page in the application. The phone handles forward and backward navigation very well, and you should not bury all of your application’s functionalities on one xaml file.

MainPage.xaml.cs
The code-behind for the MainPage.xaml file.  When you need to make things happen in code, this is where you’ll generally write it.  Interacting with the objects on the XAML file is almost always a necessity.


That was a brief about the project Solution Explorer, next post will be covering Page Navigation
For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

“Discover Windows Phone” development series for Absolute Beginners

Welcome to my new series of developing on Windows Phone 8.

Series Logo

According to the title of this series, this training is for “absolute beginners”, and while that is definitely true I will begin with the very basics of building phone apps.

This will be a journey through tons of different topics of which will lead you to gain a lot knowledge and help you start developing on Windows Phone Platform. This series will assume that you’re somewhat knowledgeable about C# programming language. If you are a beginner programmer, or you just need a quick refreshment, I recommend you check my colleague’s, Sherif El Mahdi, posts. All of the coming posts will assume some basic knowledge about C#.

Also, If you haven’t had a chance to read my previous posts about Windows Phone Design Principles and Process, check out:
Design Principles
Design Process

First thing to start with here is getting all of the tools installed. All what we will need is Visual Studio 2013, by then you’ll also get Blend along with it. So you could download it from here.

If you’re a student contact me and i’ll help you download the products for free.

This series should cover these certain topics:

01. Project Template
02. Page Navigation
03. Parameter Passing
04. The back button
05. Application Bar
06. Orientation
07. The Theme
08. Launchers
09. Choosers
10. Supporting Multiple Resolutions
11. Windows Phone Toolkit
12. Files and Storage
13. Application Life Cycle
And a lot more..

Why is this series different?

“Discover Windows Phone” Series is different that other series as it is composed of very short posts that makes you reach your goal easily. It would also contain a power-point presentation that should be helpful for reference purposes that you don’t have to go back through the whole post again just to recall some idea or technique that i demonstrated.

That’s all for now. Wait for the short series posts to learn easily how to develop on Windows Phone from scratch 🙂
For any questions, feel free to follow me  on twitter @yasabdelhady or email me at yasmine.abdelhady@hotmail.com

Your feedback is highly appreciated 🙂

Windows Phone App Design Principles

As a developer, I was always considered with the logic behind the app more and less with the design. In order to build a successive application across the Windows Phone platform we should consider both sides. Designing an application have a set of principles that we, as developers, would follow to conduct the user experience.

Now to start with the first Principle; Pride in craftsmanship. Because always small things matter, we should take care of the details that are always visible and the user will see a lot. When it comes to designing the application ensure balance and symmetry. In addition, Align to the grid as it is the glue that gives your content the cohesion it needs and find the typography that best echoes the app’s significance.

More with less is the second principle. Even though screens got larger, reducing unnecessary content from the screen and focusing on the fundamental objective and most relevant elements leaves us with a clean application. “Content before chrome” is the statement we should always follow. The application should display what the user is looking for not all menu bars and tabs.

The third one is making the app fast and fluid. Touch screens left us with tons of ideas to create a responsive and delightful interface. Let’s create the application with a fast response as the reflex action. Especially Windows Phone, having live tiles as a feature brings the app to a real life experience but then you have to make it easy and simple for the interaction though.

BRING IT TO A REAL LIFE EXPERIENCE.

Being authentically digital is going away from the static world and going to the digital world. In other words, create your application to work in a dynamic colorful way. Choose typography that matches the content of the app. Make use of the cloud.

Finally, the Win as one principle. After considering all the attributes mentioned above, don’t forget it’s a phone application that for instance need to fit in a specified measurements screen. Reflect innovation in parallel with the user experience.

This was briefly about the Windows Phone App design principles 😀

For any feedback or questions, you’re more than welcome to send me an email at yasmine.abdelhady@hotmail.com or reach me @yasabdelhady on twitter.