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

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

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

Windows Phone Design Process

Image

Started my first blog post with the design principles, I moved forward to the process of applying the principles and design aspects to bringing the app to life. This process consists of five main stages: concept, structure, interaction, visual, and prototype.

Let’s starts with the first stage. Concept  is where you highlight what’s so great about your app. To do so, you need to BRAINSTORM creatively. If you’re not in a team ask people around you and get more questions to trigger a greater inspiration. Remember.. nothing is not worth writing because brainstorming is all about generating as many ideas as possible. Whether your app is accomplishing a specific task, entertaining users or even only informing customers with what they request, you’re narrating a story. To tell the story right you have to include some pillars, which are:

What will the app do?

What is it for?

How does it fit into the market place?

Where and when will your application be used?

What kind of content should be displayed?

How can the app leverage the hardware?

After spotting down the great list of ideas as the outcome of brainstorming, you need to FILTER them to categories or constraint list to help in narrowing down something that could actually be created. Filtering could be based on some questions like ‘can I develop this app in a reasonable time frame?’ or ‘can I develop this app with a team to make this app even better?’ Brainstorming should help a lot if done correctly and you should considering getting the great list down to two or three ideas that are good and affordable enough to implement. This is a transition phase between the concept phase and the structure one.

You’re now left with the greatest ideas as the outcome of the previous phases. SKETCH these remaining best ideas in blueprint form. Information architecture (IA) provides your content the structural integrity it needs by facilitating user scenarios and envisioning the key screens to start from. The outcome will be the structure of the app.

Interaction phase is about executing the app’s purpose. Interaction can be produced in many ways, like using WIREFRAME to sketch out your page flow and scenario that should be there. Wireframes inspires you with ideas for making your app easier to use. The purpose and navigation of your app should be obvious; keep refining until it is.

*To move quickly, use a white board and sticky notes with a similar size of the phone screen.

Let your content speak without words. Adding great visuals will imply the characteristics explicitly. Every app has its own unique identity, so let the content guide the look and feel; don’t let the look direct your content.

Create a prototype and start getting some feedback from users. You don’t have to make them a perfectly working application, you can even use papers. Paper prototypes are excellent tools for quickly creating the look and feel of your apps to present to users for visibility testing.

Try to answer the following questions about the functional elements of your app:

  • Is it clear what your application does?
  • Is it clear how to operate it?
  • Are tasks intuitive in both purpose and operation?

*To new developers, I recommend that you prototype early and often. Like any creative endeavor, the best apps are the product of intensive trial and error.

The minute you’re done with the design process, you’re ready to start coding. Finalizing the design work up front helps you to freely concentrate on the logic needed to implement the functionality you’ve already decided after testing usability. And because you’ve actually got feedback from actual users, you’ll be more likely to end up with good reviews in the marketplace. I hope I’ve got to your interest and helped you consider how this process can higher the quality of your next Windows Phone app.

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.