Windows Phone 8 App Development Tutorial - Quick Start

In this Windows Phone 8 development tutorial, we will work on a Windows Phone 8 app sample. Using this Windows Phone 8 sample project, Visual Studio developers will get used to Windows Phone project structure and main project files. I hope this sample Visual Studio 2012 project will help developers as a quick start Windows Phone 8 app development tutorial.

To summarize what I learnt from my first Windows Phone 8 App example is project structure and project files. Namely mainPage.xaml landing page, WMAppManifest.xml configuration file, splash screen image, app icon and tile images. Then Windows Phone 8 app debugging is an other topic developers will experience in this Windows Phone tutorial. App project building and deploying the project files to a virtual Windows Phone 8 device running on Emulator WVGA is a good learning part of this Windows Phone 8 development tutorial.

I download Windows Phone sample app project mini-browser from Windows Phone Dev Center as a starting point to this WP8 tutorial. Sample Windows Phone app has a input textbox where the user enters the target URL address. The app navigates to the entered URL using the WebBrowser control and displays web page on the Windows Phone emulator.

By looking at the codes and page layout design, I created a new sample Windows Phone project build for Windows Phone 8.

Open Visual Studio 2012.
Create a new project using VS2012 menu selections: File > New > Project...
From the installed templates list, drill-through: Visual Basic > Windows Phone > Windows Phone App
This is a project template for creating Windows Phone application which is just the thing we want.
Give a name for your Visual Studio 2012 solution and identify a folder for your project work.
I named my first Windows Phone 8 app project as MyFirstWindowsPhone8App. You can name it as you wish.

Start to create your first Windows Phone 8 app using Visual Studio 2012

Second step before you start coding for your Windows Phone 8 app is to choose the target Windows Phone operation system. Since I want to create Windows Phone 8 app, I chosed Windows Phone OS 8.0.
But if you plan to create an app for Windows Phone 7 instead of WP8 devices, you can also choose Windows Phone OS 7.1

Choose target Windows Phone OS

Please note that the sample Windows Phone app project mini-browser sample is targeting Windows Phone OS 7.1
If you want to use this project for Windows Phone 8 instead of creating your sample, you have to upgrade it. For this open sdkMiniBrowserVB project in Visual Studio 2012. Then right-click on project file sdkMiniBrowserVB.vbproj in Solution Explorer windows and display properties. In Application side-tab you will see the Target Window Phone OS Version is set to Windows Phone OS 7.1 From the dropdown list, switch the selected version to Windows Phone OS 8.0

Upgrade Visual Studio 2012 sample project to target Windows Phone OS 8.0 from 7.1

After you take backup of your Visual Studio project, proceed to upgrade to Windows Phone 8.0 app project by choosing "Yes" Normally the project sdkMiniBrowserVB upgrades successfully.

I continue with new Windows Phone 8 app project which is targeting WP 8.0 operating system.

Now Visual Studio will take a short time to create blank Windows Phone 8 app project. When VS2012 completes its task, in solution explorer window ( Ctrl+Alt+L ), developers will see the following project structure.

Windows Phone 8 app project structure in Visual Studio 2012

And in main editor MainPage.xaml will be shown in both design mode and in XAML code mode.

My first Visual Studio 2012 Windows Phone 8 app project

You can immediately run the Windows Phone app project with its initial state to see what has already been done for you in this Microsoft Visual Studio 2012 project template. Press the Emulator WVGA 512MB to start debugging in emulator mode. You can also use menu options Debug > Start Debugging or Visual Studio short-cut key F5.

Use debug Windows Phone app in Visual Studio 2012 to see your first Windows Phone 8 app in emulator

Of course if you have created a user at Windows Phone Dev Center and register your Windows Phone 8 smartphone for Windows Phone 8 app development, you can test Windows Phone 8 app on your phone too. But this is later step that we need to take before releasing your Windows Phone 8 app to the market.

Visual Studio 2012 will first build Windows Phone 8 app project.
Then it will connect to Emulator WVGA 512MB.
At this step you will see a Windows Phone emulator with a black screen with text stating that Windows Phone OS is loading. When it finishes, you will see a Windows Phone 8 start screen as seen on your Windows Phone 8 smartphones like Nokia Lumia or HTC 8X.
At this step be calm and wait a few more seconds :)
In following step VS2012 will be deploying application and debuger package.
In last step when project binaries are deployed, the sample app will be launched and you will be seeing your sample Windows Phone 8 application running on the WP8 emulator.

Here is 3 states of Emulator WVGA 512MB for debugging Windows Phone 8 app project

You can press Start button at the bottom of the emulator screen just as you are using a Windows Phone 8 smartphone. Then on Start screen, swipe left to see the list of installed apps. You will also see our first sample Windows Phone app project with the solution name "MyFirstWindowsPhone8App" we have defined at creating project step.

Windows Phone 8 app sample is displayed in installed apps list

Please note to the app tile shown on the apps list and app name displayed. At this step I'll try to show you how to customize application tiles and app name for our first Windows Phone 8 project.

Windows Phone 8 app tile that is configured with default Visual Studio 2012 template project

On apps list installed on Windows Phone 8 emulator, tab on app name and keep your finger (or mouse pointer) until a context menu is displayed. When available actions are displayed, choose pin to start to create a short-cut to your app on the start screen of Windows Phone 8 emulator device.

Developers will realize that there are different tile images required for different tile sizes: large, medium and small. Also the app name in list and app name displayed on large tile are also needs our attention.

The key configuration file that we will work to customize the app name, the seen app titles on various places and the different sizes tile images is WMAppManifest.xml. The WMAppManifest.xml file is located in My Project sub-folder under project root folder.

If you don't see the WMAppManifest.xml app manifest file in Visual Studio 2012 Solution Explorer window, press the "Show All Files" icon on top command bar of Solution Explorer. This will display all files that are not included in the solution too.

To display tiles and tile images settings, double click WMAppManifest.xml app manifest file and open it in Visual Studio 2012 editor. In Application UI tab, you will see App Icon and Time Images for Small, Medium and Large options.

WMAppManifest.xml Application UI settings for app icon and app tile images for various sizes

After you create app icon and at least three app tiles for three different sizes, you can place these preferably transparent images into Windows 8 app Visual Studio 2012 project Assests > Tiles folder. After you prepare these images and copy them into Tiles folder, you can include those image resources using Include in Project context menu command.

Windows Phone 8 project Assests > Tiles folder for app icon and app tiles

For sample C-Sharp codes and sample Visual Studio 2012 project showing how to create cycle tile for a Windows Phone 8 app, please read WP8 app development tutorial titled How to Create Cycle Tile Programmatically in Windows Phone 8 App

The app icon tile which is seen in apps list installed on Windows 8 Phone has a size like 159 x 159
Small app tile for Start screen has the same size as app icon
On the other hand, medium app tile has 336 x 336 dimension and large app tile has the size of 691 x 336

You can create your application tiles using these width and height dimensions. If you make your icon and tile images transparent and use especially white color for shapes, the transparent parts will be in accent color set in Windows Phone 8 Settings app theme settings section. I used the SplashUp online image editing tool for making Kodyaz.com logo as a transparent image. And I used Lunapic free online picture editor for making the tile images of Time Management Tips app for Windows 8. So if you are looking for a free solution, you can try one of these online tool for image editing instead of using more well-known professional software tools.

I hope developers gain an idea on Windows phone 8 app development environment on Visual Studio 2012. This was the main target of this quick start guide and Windows Phone 8 development tutorial. Keep an eye on next Windows Phone 8 development tutorial at Kodyaz.