Building a Simple Windows Phone App - Page 1 by
kirupa | 10 May 2010
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
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
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
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
What Needs to be Done
At a very high level, to create this application,
you will need to perform the following tasks:
Create a new Windows Phone application.
Draw a rectangle.
Apply a behavior to enable dragging.
Create an animation to snap the rectangle
back to its original position.
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:
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.
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 ]
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
Feel free to give your
project a unique name if you want, but otherwise,
hit OK to create a Windows Phone Application
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.