Build your own Windows Phone 7 Application

After a few months of break, I am back now and hope to post a few useful posts on Silverlight and Windows Phone 7 development in coming days.

In between, the entire World, particularly the developer community, has now started talking about Windows Phone 7 (expected to get launched this Fall - Sep/Oct in India) after Microsoft's recent announcement on WP7 and release of development kit for the developers to start building Apps on WP7 before every common man :-) starts using it.

Here, I will talk about how to start building your own application that can run on Windows Phone 7. People who are already familiar with Silverlight, would be very happy to see the same technology getting used for application development except few changes. I will talk about those changes in my future posts.

The installations/applications that are required for WP7 app development are -

1. Visual Studio as IDE

2. Windows Phone 7 Development Kit (aka WP7 Developer Tools)

Download Microsoft Visual Studio 2010 Express for Windows Phone if you do not have Visual Studio 2010 already. This will also install Windows Phone 7 development kit that includes Windows Phone Emulator, Silverlight for Windows Phone 7, XNA Game Studio 4.0, Expression Blend for Windows Phone 7 etc.

If you already have Visual Studio 2010 version, then just download and install Windows Phone 7 development kit. This will install the Plugin for Visual Studio 2010 version side by side that is required for Windows Phone 7 application development.

While installing the developer tools, if you get an error related to Windows Phone 7 Emulator start up problem then please note that this error has already been reported to the WP7 development team and they are currently looking into this.

Once you have Visual Studio, Expression Blend, Windows Phone 7 development tools installed then fasten your seat belt to explore the Windows Phone 7 world and can immediately start developing your first Windows Phone 7 application. If you already are a Silverlight developer then it would be an extremely easy job for you to start writing the code directly.

Now, let's learn how to develop a Windows Phone 7 application.

Open Visual Studio and Click File -> New Project. Select Silverlight for Windows Phone Installed Templates and on the right hand side select Windows Phone Application. Click OK after entering the project name.

On creating a Windows Phone Application, a new Solution/Project will be created with a folder structure similar to the figure shown below. You will find that the folder structure created is something similar to Web Silverlight project except following changes.

- Microsoft.Phone and Microsoft.Phone.Interop references added to the project

- 2 XML files - AppManifest.xml and WMAppManifest.xml

- 3 pictures files for application startup icons, background and Application menu icons

At the same time you will see two XAML files - MainPage.xaml and App.xaml similar to silverlight project. As Silverlight project, MainPage.xaml is the starting page which gets instantiated on the application initialization as defined as the Default Navigation Page in WMAppManifest.xml file.

Now open the MainPage.xaml file and you will find the entire code similar to Silverlight code except few inclusions like new namespaces, font styles, root Control etc., otherwise the structure of the layout and controls placement code are all similar to what we generally have in a Silverlight application. You will find the same Grid, StackPanel, Canvas layout styles used here too.

In the default code, let's make few changes to see how it behaves.

Change the ApplicationTitle text to something like "WP7 App - How to develop?" and PageTitle to "Shubha's Blog".

Let's make the following changes to the Inner Grid code (Content Grid)

Here, basically I have added two ListBox controls (as ComboBox doesn't work in Windows Phone 7 - check my another blog on this) to show different Indian States and corresponding Cities. Upon a State selection, the City Listbox will display the corresponding Cities in that state. The third row will display a text combining State and City selected upon clicking the Show button. Anybody who is already familiar with Silverlight, will not find anything different from what they have learnt in Silverlight so far.

So, now let's put some code to the code-behind file to populate the List boxes and handle the Show button click event.

In the code behind, I have tried to populate the State Listbox in the Load event of the page and populate the City Listbox in SelectionChanged event of the State Listbox. Again, this code is not different from Silverlight code if you are already familiar with. On the click of the Show button, I am just displaying whatever is selected in the listboxes.

Now try to run the application by pressing Ctrl+F5 or selecting the menu option from Debug menu. Now Windows Phone Emulator will start and will directly display the page. Then select a State and City from the Listboxes and click Show button. You will get the output/page as shown below.

If the Phone Emulator doesn't start then please ensure the target environment is set to Windows Phone 7 Emulator in the Target drop down just above the code window in the toolbar.

How are you feeling now ? Huh ! Your first Windows Phone 7 application is ready to run.

In this blog, your came to know how to write your first Windows Phone 7 (WP7) application, so now you can straight away jump to start writing your own applications for WP7. I would recommend learning Silverlight first before jumping directly to Windows Phone 7 development if you do not know Silverlight already. If you already know it then you can start building few WP7 applications for the entire world to use it :-)

I will start publishing few more blogs on Silverlight and WP7 in coming days. Till then, please share your valuable feedback with me.