Click here to Skip to main content
11,921,889 members (72,594 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked

Windows Phone 8 App Development Part-2: Developing an App

, 28 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
This article is the part-2 of the series of the article on windows phone 8 app developments -  Quick Start-up guide with best practices. This article is in 3 parts:Part-1: Planning and Environment SetupPart-2: App Development, best design practices, and some challenges Part-3: Testing/QA of the App

This article is the part-2 of the series of the article on windows phone 8 app developments -  Quick Start-up guide with best practices.

This whole series is in 3 parts:

  • Part-1: Planning and Environment Setup
  • Part-2: App Development, best design practices, and some challenges 
  • Part-3: Testing/QA of the App and the process of publishing it to store

In case if you haven’t checked the part-1, I strongly recommend you to go through it first. Now I will discuss about the real app development challenges and some of the best practices to follow which I experienced while developing my first windows phone 8 app. 

Language choice 

This was one of the first confusion we had – whether to go with XAML/C# or HTML/JS. Although it depends on individual or team’s experience and liking, it seems that XAML/C# is clearly the most preferred choice for app development. I have listed down some of the reasons to choose one:-

XAML/C#: Windows Ecosystem, High Performance (Native), Resolution Independence, Easier UI Binding, Better Object Oriented Programming, Stateful (persistent state), Integration with Expression Blend, Easier debugging, better community knowledge support (coming from earlier Windows 7 days).

Read more: Top 10 Reasons why I choose XAML over HTML5

HTML5/JS: Multi-Platform, Lesser learning curve, JavaScript language flexibility, Easier styling thru CSS, Powerful query selection for elements, Better integration with Blend, Plugins. 

Read more: Top 10 Reasons Why I Choose HTML5 Over XAML

If you are new to XAML, then I would strongly recommend you to learn few basic concepts such as Xaml markups, Xaml Code behind, events, styles, behavior/triggers, binding (one time, one way, two-way etc)

Link: XAML Overview

App templates 

There are many app templates available for win 8. 

If you really don’t care about template type, then let’s create a new Project for “Windows Phone Databound App” template.

If need more help, follow this link to create your first app: How to create your first app for Windows Phone

Design Considerations

The Windows phone application can be based on pure XAML or it can leverage the power of any MVVM framework. I always prefer to use MVVM framework with any XAML based application because of many advantages such as easy data binding or event handling, robust design with better SoC (Separation of Concerns), better testability etc.

MVVM framework popular options: MVVMLight (Easy and very lightweight, good for Phone), Prism (More comprehensive and good for desktop or Windows store apps). 

The recently released free MVVMLight has support for Windows Phone 8. MVVMLight has following advantages:

  • Very light weight (just around 50-60Kb in size)
  • Inbuilt IoC (SimpleIoc)
  • Decoupling of View Model by using publish/subscribe message based communication
  • Relay Command: Less code behind.

In case you are new to MVVM pattern, please go through following link to understand it. It is used almost in every XAML app. Few concepts such as view models, data context, command, property change events etc are used extensively. 

Link: Using the MVVM Pattern in Windows 8

Adding MVVMLight to the XAML project: Right click the project and select ‘Manage NuGet Packages’. Search ‘mvvmlight’ and install ‘MVVM Light’ (Toolkit). It will add few files and folders. If needs further help, follow these instructions: How to install MVVM Light Toolkit for Windows Phone

IoC implementation and importance

The SimpleIoc is really a great addition in GalaSoft MVVMLight. In most of the scenarios, view models are singleton objects and which can be easily managed by SimpleIoC and can be accessed anywhere in the application.

public class ViewModelLocator
  /// <summary>
  /// Initializes a new instance of the ViewModelLocator class.
  /// </summary>
  public ViewModelLocator()
	ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

	if (ViewModelBase.IsInDesignModeStatic)
		// Create design time view services and models
		// Create run time view services and models


  public T GetInstance<t>()
       return ServiceLocator.Current.GetInstance<t>();

  public static void Cleanup()
     // TODO Clear the ViewModels
For easy access across application:
public static ViewModelLocator Locator
      if (_locator == null)
         _locator = new ViewModelLocator();

      return _locator;

Async/Await pattern 

Asynchrony proves especially valuable for applications that access the UI thread because all UI-related activity usually shares one thread. Application can stop responding. Async/await is a Tasked-Based Asynchronous Pattern (TAP) which is much easier to implement than Event-based Asynchronous Pattern (EAP) which came in .Net 2.0. We can create an asynchronous method almost as easily as you create a synchronous method. Read more here:  Asynchronous Programming with Async and Await

async private void LoadItems(string query)
   var items = await _data.GetItems(query);

   var itemVMs = items.Select(i => new ItemViewModel { ID = i.ID, LineOne = i.LineOne, LineThree = i.LineThree, LineTwo = i.LineTwo });
   this.Items = new ObservableCollection<itemviewmodel>(itemVMs);


Windows Phone supports frame based navigation. The hardware back button makes navigation behave differently than desktop applications. Navigation can be based on “Data Template”, where depending upon current view model we can show view template registered with App resources. Data Template based navigation is quite common in WPF applications.

I suggest to use default frame based navigation. It is hassle free and provides automatic back navigation which is managed by the back stack. 

NavigationService available thru PhoneApplicationPage class (base class of every phone page).

// Navigate to the new page
NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));

In case you need to handle hardware back button press differently, then follow this:

At App level in App.xaml.cs:

private void RootFrame_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
    //Some custom logic/ condition
    If (true)
        e.Cancel = true;
    else {}

Or in page:

protected override void OnBackKeyPress(CancelEventArgs e)
    if(MessageBox.Show("Are you sure you want to exit?","Exit?", 
                       MessageBoxButton.OKCancel) != MessageBoxResult.OK)
         e.Cancel = true; 


Phone storage

User/App data can be stored in isolated phone storage. It would be good to add a utility class like AppSettings:

public class AppSettings
        IsolatedStorageSettings settings;
        bool isDirty;
        public AppSettings()
            //Get the settings for this application.
            settings = IsolatedStorageSettings.ApplicationSettings;
        /// <summary>
        /// Update a setting value for our application. If the setting does not
        /// exist, then add the setting.
        /// </summary>
        /// <param name="Key">
        /// <param name="value">
        /// <returns></returns>
        public void AddOrUpdateValue(string Key, Object value)
            if (settings.Contains(Key))
                settings[Key] = value;
            // Otherwise create the key.
                settings.Add(Key, value);
            isDirty = true;
        public bool ContainsKey(string key)
            return settings.Contains(key);
        /// <summary>
        /// Get the current value of the setting, or if it is not found, set the 
        /// setting to the default setting.
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="Key">
        /// <param name="defaultValue">
        /// <returns></returns>
        public T GetValue<t>(string Key)
            if (settings.Contains(Key))
                return (T)settings[Key];
            return default(T);
        /// <summary>
        /// Save the settings to isolated storage.
        /// </summary>
        public void Save()
            if (!isDirty)
            isDirty = false;

It can be added to App class as static field for easy access across application:

public static AppSettings Settings
        if (_settings == null)
            _settings = new AppSettings();
            return _settings;

Windows Phone Toolkit

An important addition to the default App development ecosystem which has limited no of controls at our disposal. Toolkit has many useful components. To add this: Go to “Manage NuGet Package” and search “toolkit”. Install “Windows Phone Toolkit” from the available packages.

This toolkit has many new controls such as: AutoCompleteBox, ContextMenu, CustomMessageBox, DateTimeConverters, DateTimePickers, ExpanderView, ListPicker, LongListMultiSelector, Map extensions, RatingControl, ToggleSwitch, Navigation transitions.

Application Bar

It is an integral part of your app which enables easy navigation between pages. Add following lines of code with required menu items or icons in any page where you want to provide navigation options.

<phone:phoneapplicationpage applicationbar="">
        <shell:applicationbar ismenuenabled="True" isvisible="True" mode="Minimized" opacity="0.85">
            <shell:applicationbariconbutton click="About_Click" iconuri="/Assets/Icons/questionmark.png" text="about">
            <shell:applicationbariconbutton click="Personalize_Click" iconuri="/Assets/Icons/feature.settings.png" text="personalize">
            <shell:applicationbar .menuitems="">
                <shell:applicationbarmenuitem click="Rate_Click" text="rate and review">
                <shell:applicationbarmenuitem text="MenuItem 2">

App bar:

Menu items can be hidden by setting "IsMenuEnabled " flag to false. The app bar can be in minimized state by setting “Mode” as “Minimized”. Minimized app bar:

Phone page animated transition 

It is quite easy to implement by adding following lines of code in page XAML. This is again possible because of toolkit. Even Effects such as SlideInEffect, TiltEffect and TurnstileFeatherEffect are possible thru use of toolkit.For Page transition effect:

		<toolkit:turnstiletransition mode="BackwardIn">
		<toolkit:turnstiletransition mode="ForwardIn">
		<toolkit:turnstiletransition mode="BackwardOut">
	<toolkit:turnstiletransition mode="ForwardOut"></toolkit:turnstiletransition></toolkit:navigationouttransition></toolkit:navigationouttransition></toolkit:transitionservice> 

For more info visit:

User Interface

The phone SDK provides some default theme and icons. It is highly recommended to use them as it matches the overall look and feel of phone. If needed new theme can be added or existing theme styles can be extended. It is good practice to keep these new styles in App XAML or a separate file. Expression blend can be used to efficiently create new styles.

SDK Path: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0 

ICONs (Dark/Light): C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons

Adding custom styles at App level under:

	<color x:key="GNForegroundColor">#FF000000</color>
	<color x:key="GNBackgroundColor">#FFFFFFFF</color>
	<color x:key="GNTextLightColor">#666666</color>

	<sys:double x:key="PivotHeaderFontSize">40</sys:double>
	<thickness x:key="GNPivotItemMargin">12,5,12,0</thickness>
	<solidcolorbrush x:key="GNBackgroundBrush" color="{StaticResource GNBackgroundColor}">
	<solidcolorbrush x:key="GNForegroundBrush" color="{StaticResource GNForegroundColor}">
	<style basedon="{StaticResource PhoneTextBlockBase}" targettype="TextBlock" x:key="GNTextStyle">
	<setter value="{StaticResource PhoneFontFamilyNormal}" property="FontFamily">
	<setter value="{StaticResource PhoneFontSizeMedium}" property="FontSize">
	<setter value="{StaticResource GNForegroundBrush}" property="Foreground">

Source Control

I used online visual studio as source control. It is just as easy to configure as we can do in our favorite TFS (Team Foundation Server). A valid Microsoft account is required to access online visual studio. License: The free version supports upto 5 users.

Link:  (Go to 'Visual Studio Online') Interface:

Source Code

I have developed a windows phone 8 solution which includes most of the best practices discussed above such as MVVM, IoC/DI, Storage, app bar, transitions. It would be a great starting point for your application. 

Source code location (github): 

Solution contains following:


In next post - part-3 of this article series, I will discuss about testing/QA of the developed application and the process of publishing it to windows store.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead Neudesic
India India
I have around 9 years of industry experience mostly on Microsoft platform. My expertise include Software Architecture, Designs, OOP/OOD, SOA/SOD, Design patterns, Unit testing, Performance tuning, Security, advanced Java Script, Knockout, ExtJS, ASP.NET MVC, Cloud Computing, Azure, BizTalk and agile methodologies.
In my free times I love exploring technologies, reading, trekking, playing TT and Foosball.....

You may also be interested in...

Comments and Discussions

SuggestionWindows phone development Pin
Mobilepundits17-Sep-14 22:54
memberMobilepundits17-Sep-14 22:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151120.1 | Last Updated 28 Jan 2014
Article Copyright 2014 by Manoj.Kumar12
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid