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

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 🙂

Abstract Class VS Interface

Abstract Class VS Interface

In this blog post I will discuss abstract classes and interfaces with comparing their differences and similarities. The concept of abstract classes and interfaces is a bit confusing for beginners of object oriented programming. Therefore, I am trying to discuss the aspects of both the concepts and compare their usage with a small demo for their usage with C#.

Let’s start with their appearance excluding the implementation. Both the abstract class and the interface just look like each other; however there are a lot of differences and similarities between them. Let’s explain both concepts and compare them.

What is an Abstract class?

An abstract class is a special kind of class that cannot be instantiated. So why do we need a class that cannot be instantiated?

We need a class that couldn’t be instantiated to be as a kind of contract that forces all subclasses to carry on the same hierarchies or standards. So its only a subclassed class that is inherited from.

What is an interface?

An interface is an entity that is defined by the word Interface, but it is not a class. It contains no implementations; only signatures of the methods. It has a common trait with the abstract class, which is that they are both used to define hierarchies for all subclasses or it defines specific set of methods and their arguments.

When to use each?

You use the interface when you want to support multiple inheritance, and you use abstract classes when you want to inherit from only one class.

Both Together

When we create an interface, we are basically creating a set of methods without any implementation that must be overridden by the implemented classes. The advantage is that it provides a way for a class to be a part of two classes: one from inheritance hierarchy and one from the interface.

When we create an abstract class, we are creating a base class that might have one or more completed methods but at least one or more methods are left uncompleted and declared abstract. If all the methods of an abstract class are uncompleted then it is same as an interface. The purpose of an abstract class is to provide a base class definition for how a set of derived classes will work and then allow the programmers to fill the implementation in the derived classes.

The following table shows the differences and similarities between the abstract class and the interface:

Screenshot (39)

Making it easier to understand the difference, let’s see how it works with the code:

Abstract Class Student

Using System;
namespace AbstractVsInterfaces{

    Public abstract class Student{

     // these are the fields that we
     //could have in an abstract class
     Protected string id;
     Protected string name;
     Protected string major;

     //properties
     Public abstract String ID{
      get;
      set;
     }

    public abstract string name{
     get;
     set;
    }

    public abstract string major{
     get;
     set;
    }

    //complete methods with no abstract
    // keyword in the signature
    public string add(){
     return name + “with ID” + id
      + “is added successfully”;
    }

    public string delete(){
     return name + “with ID” + id
      + “is deleted !”;
    }

    // each major has a different calculation
    //to its major so I leave the method in an
    //abstract for and implement it differently
    public abstract string gpa();
   }
}

Interface Student

Using system;
namespace AbstractVsInterfaces{

    Public interface IStudent{

    //no fields
    String ID{
     get;
     set;
    }

    String name{
     get;
     set
    }

    String major{
     get;
     set;
    }

    //no implementations
    //everything is public
    String add();
    String delete();
    String gpa();
   }
}

Inherited Objects

BusinessStudent

Using system;
namespace AbstractVsInterfaces{
    //using the abstract class

    Public class BusinessStudent : Student{

    //since its using the abstract class then there
    //is not fields nor properties
    Public BusinessStudent(){
    }

    Public override string id{
     Get{
      return id;
     }
     Set{
     id = value;
     }
    }

    Public override string name{
     Get{
      return name;
     }
     Set{
      name = value;
     }
    }

    //methods that are already implemented
    //in the abstract class
    Public new string add(){
     return base.add();
    }

    Public new string delete(){
     return base.delete();
    }

    //this is the method that would
    //have different implementations
    //from major to another
    Public override string gpa(){
     Return base.name + base.id
      + “will be calculated later - abstract”;
    }
 }
}

EngineeringStudent

Using system;
namespace AbstractVsInterfaces{
    //using the interface
    Public class EngineeringStudent : IStudent{
    //fields are defined here not in the interface
    Protected string id;
    Protected string name;
    Protected string major;

    Public EngineeringStudent(){
     //constructor code
    }

    Public string id{
     get{
     return id;
     }

     set{
      id = value;
     }

    }

    Public string name{
     get{
      return name;
     }

     set{
      name = value;</p>
     }

    }

    Public string major{
     get{
      return major;
     }

     set{
      major = value;
    }

   }

    //all code implementation of add and delete
    // are written here not in the interface
    Public string add(){
     return name + id
      + “is added to the Engineering major”;
    }

    Public string delete(){
     return name + id
      + “is deleted from the Engineering major”;
    }

    Public string gpa(){
     return name + id
      + “will be calculated later- interface”;
    }
   }
  }
}

This was the difference between an abstract class and inheritance 😀
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.