User Interface Basics: Windows Phone 7 compared to Android & iOS

Windows just announced the new mobile operating system, Windows Phone 8. We would like to point out what we consider the two main key points for developers:

  1. Nowadays WP7 devices will not be able to upgrade to the new operating system. That is a huge inconvenience. If we want to develop an app for all Windows Phone devices, don’t use WP8 or make one app for WP7 and another for WP8.
  2. All Windows OS will be more similar. Obviously this is a big advantage, it will be much easier to port code between PC, mobile or tablet applications.

By the way, don’t worry about your WP7 apps, they will run in WP8, as Larry Lieberman stressed.

That said, we want to share with you some basic functionalities we have been using in our first steps with WP7. One of ARLab common practices in app development is to include within a parent class the recurring functions used in all screens.

First we will share how iOS & Android  achieve our goal. Then, we will give a step-by-step explanation of how WP7 reaches the same point, if possible. It’s pretty simple, and quite useful for code maintaining.


Extending Activity class. In this case we have FrameActivity as the parent activity, every child activity must extend it as follows:

public class ScanActivity extends FrameActivity{
...child Activity code here...

FrameActivity defines the common functionality, in this case we want to add a Settings Button present in all activities. What we usually do is override the setContentView function. Let’s have a look to FrameActivity:

public class FrameActivity extends Activity{
private Button settingsButton; 
public void setContentView(int layoutResID) {
settingsButton=new Button(this);

settingsButton.setOnClickListener(new View.OnClickListener){
public void onClick(View arg0) {
Intent i = new Intent(ScanActivity.this, SettingsActivity.class);
LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
addContentView(settingsButton, params);



Then, for every FrameActivity child we have, a settings button will appear. When the user presses it, the SettingsActivity will be launched. That was simple, right?.

You can inflate your own layout and add it directly. It is probable that it is not placed where you want, change the params or add it into a child layout to have more control over its position.


Let’s have a look to the example. Make your ViewController inherit from FrameViewController:

@interface ScanViewController : FrameViewController{

In FrameViewController, that inherits from UIViewController, you should override the viewDidLoad function:

... inside FrameViewController.m...
- (void)viewDidLoad
[super viewDidLoad];
UIButton* settingsButton=    [UIButton buttonWithType:UIButtonTypeRoundedRect];
[settingsButton setTitle:@"Settings" forState:UIControlStateNormal];
[settingsButton addTarget:self action:@selector(settings_touchup:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:settingsButton];
//Launch your SettingsViewController

That’s it! You will have the button appearing on every child screen. Change the button frame to control its position.

Windows Phone

Now it’s Windows Phone 7 time… be careful! The main difference we will find is that it is necessary to add a function to control where to place the button*.

First, we will need to add the parent Page, working with C#. Press Project, Add New Item, select C# class and type your parent page name. In our case FrameParentPage:

Here comes the tricky; For every child page you will have to modify its .xaml file and .xaml.cs file. The child pages, as ScanPage.xaml, should start as follows:
x:Class="YOURNAMESPACE.ScanPage" ... 
... child page content ...

Then, in ScanPage.xaml.cs, follow this lines:

public partial class ScanPage : FrameParentPage{

public ScanPage()
... rest of ScanPage Constructor...
... rest of child page code ...

That is what you need to do in your child pages, now, the code in FrameParentPage:

public class FrameParentPage:PhoneApplicationPage
Button settingsButton=new Button();

public FrameParentPage(){

settingsButton.Click+=new RoutedEventHandler(SettingsBTN_Click); 
public addViews(Panel panel){
private void SettingsBTN_Click(object sender, RoutedEventArgs e)
NavigationService.Navigate(new URI("/SettingsPage.xaml",UriKind.Relative));

There you are, you will have the settings button in every child page you call the addViews. In this case we have created an additional function to let the child page choose in which panel the button should be*. Observe that the button will be placed inside the panel you pass to the function.

*Notice that it is not possible to have more than one direct child in WP7 pages.

Do not forget to check out our AR Browser and Image Matching SDKs.

Tags: , , , , , , , ,
Posted on: No Comments

Leave a Reply