05. Application Bar

Series Logo

In the previous post, we talked about the back button paradigm in Windows Phone Application.

This is the fifth post in “Discover Windows Phone” development series”  we’ll be covering Application Bar.

If you look around at many of the applications that are being demoed on places like YouTube, you’ll notice a pretty consistent use of the application bar.

The Application Bar in Windows Phone 8 is that set of circled icons at the bottom of an application. Here’s an example of the App bar from my application, Playin.

wp_ss_20140205_0003

You’ll see from the above example that i have two icons that i want the user to interact with. Add, which refers to add a new playlist, and profile. Tapping any of those icons will take them to that specific page of the application at anytime. So, how do we make this thing work?

Adding the Application Bar

Let’s open the project we’ve created through out the previous posts.

1. Open Mainpage.xaml
2. Add your application bar (the following XAML code) at the very end of the page but before

</phone:PhoneApplicationPage>
<phone:PhoneApplicationPage.ApplicationBar>
 <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
 <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/add.png" Text="add">
 <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/cancel.png" Text="cancel">
 <shell:ApplicationBar.MenuItem>
 <shell:ApplicationBarMenuItem Text="MenuItem 2">
 <shell:ApplicationBarMenuItem Text="MenuItem">
 </shell:ApplicationBar.MenuItems>
 </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar> 

This is an example of an application bar with two icon buttons, first one is ‘Add’ and the second is ‘Cancel’, and two menu items. Which will end up like this:

Screenshot (164)

When you click on one of the ApplicationBarIconButtons, check the properties tab. You’ll see a simple way to set the icon and text for each one. Here’s what it looks like:

Screenshot (165)

If you drop down the IconUri select box, you’ll see a lot of standard icons that you can use in your applications, these icons should serve most of your needs, in addition; you can always create your own icon and add it manually).

Making these buttons work

Okay, so at this exact point, you’ve got a couple of pretty buttons on your application, but they do not do anything when you click them. These buttons are like anything in your XAML file. they just need a Click event, and an event handler in the code behind.

So to do this:
1. Select the ‘add’ button from the design view
2. Go to the properties windows
3. You’ll find another tab for event handlers, click on it
4. Change the name of the button, and double tap on the textbox that is corresponding to the event ‘Click’.

The result will be as follows and the project will directly take you to the event handler of the button is the code behind.

Screenshot (167)

Add a MessageBox to your event so you test that it works, that’s how it’s done:
Screenshot (169)

Same applies to any other application bar button.

So what are the other text-based menu items?

When you run your application, you may have noticed that by clicking on the ellipsis icon (…), the application bar slides up to reveal a list of another menu options. If you used the default code from above, they still say “MenuItem 1” and “MenuItem 2”. These work just like the IconButtons, where you can rig up event handlers for when your users click on them.

Can you minimize the app bar?

Yes you can! you can have an application bar that doesn’t show any of the ApplicationBarIconButtons by default. To do this, you simply need to change the Mode property of the ApplicationBar to be “Minimized”.

Other appBar properties:

You can change the opacity of the appBar, expected values are between 0.0 and 1.0, from totally transparent to completely opaque respectively.

The background and the foreground colors can be changed as a property in the XAML element. Also the visibility and enabling the appBar is possible.

To know more about ApplicationBar best practices click here.

That was how to add an application bar, download the source code from here

Next post will be discussing page orientation
For any feedback or questions:

hotmail-icon

yasmine.abdelhady@hotmail.com

twitter-icon-hover@yasabdelhady

Advertisements

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 🙂

How to localize your Windows Phone App

In this post, i’ll explain how to localize your Windows Phone app, which simply means that we can present the various bits of text in our app in different languages.

For example, you might want to support both English speakers and Arabic speakers opening up the number of markets you could potentially sell your app in. Now, there’s a bit more to selling in different markets than simply localizing your app. However, that would be a big step in the right direction.

So our game plan in this post is, first of all, to talk about this special file called the appresources.resx file and how it allows us to store name value pairs that you can access in your declarative XAML code. We can also do it in C# code. But Here i will only demo the XAML way. Then we’ll see how to create langauges of region-specific variations of that file using Visual Studio tools and finally we’ll learn how the windows phone 8 operating system will choose the correct version of the appresources.resx file based on the current user’s language and region selections.

So lets start making that:

if you expand the resources folder, you will see that there’s this file appresources.resx file. Screenshot (68)

Double click it to open it up, in the main area you will see a special designer that has a series of name and value pairs.

Screenshot (69)

So on the left-hand side are the names of the settings that we’re going yo bind to and on the right-hand side are the settings for a given language. Which language? we can see the very last attribute here, the resource language, is set to EN-US. EN means English and US is the region. In this case it means USA.

Therefore, these settings should be used in the USA for English speakers. It’s also the default app resources file. And you’ll see the difference between the default and the other languages and regions that was supported. The name value pairs are mostly snippets of the text that we’ll use throughout the app. However, the resource allow flow direction, right here, is a setting for which direction the characters should be representing for this particular language. So as you know, some languages are read from right to left. And this setting would be used throughout the app for this purpose.

So as you can see, there’s an application title set to my application. What if you wanted to convert the text block on our mainpage.xaml to utilize this app resources setting? Well, you would use a binding expression like so. Let’s get over there. Open the mainpage.xaml and there let’s go ahead and change this.

Screenshot (67)

So instead of hard coding “My Application”,

set the text to

text = "{Binding Path=LocalizedResources.ApplicationTitle,
                 Source={StaticResource LocalizedStrings}}" 

Screenshot (73)

So, as you can see, we replaces the hard coded text to this binding expression right here.

The path attribute here of the binding expression refers to the localizedstrings.cs file here in the project. It simply just creates an instance of app resources, which provides us access to the appropriate app resources file based on the region and preferred language of the phone’s user.

So the “LocalizedResources.ApplicationTitle” names or references the specific name entry in the appresources.resx file The source attribute is bound to LozalizedStrings. Again, that’s where the compiler can find the source of the localized resources property. It’s part of the LocalizedStrings.cs file. Specifically its this class LocalizedStrings. So at this point we’re only supporting English in the USA. I’d like to supprt the Arabic Language no matter which region of the world that the user resides. So to do that,

follow the following steps:

  1. Click the project name, not the solution
  2. Right click it
  3. Select properties window
  4. Under supported cultures, select Arabic (or any other language you want to support)
  5. Save
  6. The properties tab

So now when you do that, notice that there’s a new app resources file added. It’s appresources.ar.resx Screenshot (74)

The AR is for Arabic. So let’s double click it to open it up in the main area, and you can see that by default it’s in English. So whatever you do, do not translate the names into another language. Leave them in English and then change the values to the language that you want to support. The names are tokens that are used programmatically. The values are what will be displayed to the end user. Lets run the app and use the phone emulator start button in order to change the language of the phone from English to Arabic.

Steps:

You can follow the slides for the steps or read them here

  1. Go to start button
  2. Settings
  3. System
  4. Go down to language and region and set it to Arabic instead of English US.
  5. And then if you look at the very bottom, click a button that says restart phone *restart required*.
  6. Just to let you know you’re on the right track here, you see ‘مع السلامة’
  7. Now at this point VS might disconnect from the Emulator, thats okay. You don’t need to be in debug mode in VS, just focus on the phone Emulator for now.
  8. After the Phone Emulator switched on again (It will use the last deployed version of the app)
  9. Once the phone emulator reboots, you can swipe over to the lest and see that all of the options are now in Arabic.
  10. scroll down to you app and click it.
  11. You can see that instead of “My application”, the text says “طلبى”.

The title has been replaced with the title that we entered in the appresources.ar.resx file. Very cool!

To recap, the big take away of this post was how to localize your app using the app resources files, the project properties and some binding syntax. we saw how you could set the language and region of your phone to test our localization customizations as well. There you go, you just doubled the potential for your app.

For any questions or feedback you can contact me on twitter @yasabdelhady or email me at yasmine.abdelhady@hotmail.com