Building a Simple Windows Phone App - Page 1
       by kirupa  |  10 May 2010

Normally, an introductory tutorial to anything involves the two sweetest words in the English language, hello world. Given how guilty this site is of promoting such traditions, it seemed appropriate that an introductory tutorial to building a Windows Phone application follow in such a well-trodden path. If you were expecting tradition, then you will be sorely disappointed.

The reason is simple. Because of how nearly identical building applications for the Windows Phone is when compared to building Silverlight or WPF applications, please refer to the introductory tutorials that already exist. Instead, I am going to assume you have basic familiarity with Blend and dive into creating a cool application that uses, as you will find out soon, behaviors and animations!

By the end of this tutorial, you will have created something similar to what is shown in the following video: 

[ the music totally makes this awesome ]

Just to make sure we are all on the same page, the video shows a rectangle being dragged around. When the drag is released, the rectangle snaps back to its original position with a slight bounce. Let's create this!

Inspiration
This application is a variant of the MoveMe application that is used as part of Apple's introductory tutorial on iPhone development. Shawn Burke even created an excellent writeup showing how you can re-create MoveMe in Windows Phone using Expression Blend and some C#!
 
What this tutorial brings to the table is taking Shawn's writeup one step further and explaining how you can create MoveMe without writing a single line of code.

What Needs to be Done
At a very high level, to create this application, you will need to perform the following tasks:

1. Create a new Windows Phone application.
2. Draw a rectangle.
3. Apply a behavior to enable dragging.
4. Create an animation to snap the rectangle back to its original position.
5. Apply a behavior to actually play the animation when the drag is released.

While five high-level tasks seems like a lot, it's actually going to be quite painless and fun. Let's get started.

Creating a Windows Phone Application
In order to create a Windows Phone aplication, you need to tell Expression Blend to put you inside a Windows Phone project:

1. Make sure you have everything downloaded and installed for working with Windows Phone applications. The "Required for Windows Phone Development" section in the Getting Started page will help you out.
2. Launch Expression Blend, and go to File | New Project or click on the New Project link on the Welcome Screen:

[ first, you will need to create a New Project ]

3. The New Project dialog will appear. Select Windows Phone from the Project types tree found on the left, and select Windows Phone Application from the panel on the right:

[ more specifically, create a new Windows Phone Application ]

Feel free to give your project a unique name if you want, but otherwise, hit OK to create a Windows Phone Application project.

4.  After a few seconds, your artboard will display an empty project with a Windows Phone device shell displayed:

[ behold, it lives! ]

Ok, now that you have created your  new project, this seems like a good place to take short breather! In the next page, we'll draw a rectangle and make it draggable.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6