Your First Windows Phone 7 Application
Your First Windows Phone 7 Application
Join the DZone community and get the full member experience.Join For Free
That lead-in should sound familiar, it's almost identical to the one on my article two days ago Your First Silverlight Application. If that application was truly your first Silverlight application, then welcome to the fun place, because you're now also a Windows Phone 7 (WP7) developer.
Let's start with a bunch of links... because first you need all the phone developer tools. They're all free, but you need to know where to go to get them.
Start at the main Windows Phone site. In the upper right is a large white on blue link button "Download the tools today!". Take that link to get to the Windows Phone 7 page, and the right-hand side has a collection of "Getting Started" resources: Demo, Developer Tools, Documentation, Developer Guides, and Code Samples.
It would be a good idea to bookmark that page and at some point view and read everything they point to! If you want to keep reading this article, for now just take the "Download the Developer Tools!" link.
That will open a page for the CTP with more stuff to read, but essentially a download of an installer for:
- Visual Studio 2010 Express for Windows Phone CTP
- Windows Phone Emulator CTP
- Silverlight for Windows Phone CTP
- XNA 4.0 Game Studio CTP
XNA, huh? ... well, hold that thought for now unless you're an XNA developer... because I'm going to be talking Silverlight in this example :)
Once you have all that downloaded and installed, and you've read everything you need/want to, crank up the development tool of your choice and continue.
From the File menu, select New Project. I've marked up the "New Project" dialog below:
On the left side, select "Silverlight for Windows Phone". If that isn't showing up, then I'd restart the development tool. If it still doesn't show up, I'd try my old standard of restarting the OS. if it STILL doesn't show up, then something you installed in a previous step didn't take, and you're going to have to go back over those steps. If you're really hung up, you can try the forums at Silverlight.net, or write me directly.
In the center section, for this first application, we're going to select the top choice, "Windows Phone Application". You can either accept the default information about the Name and Location, or type something meaningful in there. I took the defaults, and that will be reflected in screenshots.
Once the development tool finishes grinding around, you'll be presented with something like the following. I'm using VS2010, so the screenshots may not exactly match:
On the left side you see the image of the phone, and the right-hand side is MainPage.xaml which we're going to ignore for this first excursion.
Click on the TextBlock that reads "MY APPLICATION", go to the Properties Window (View->Properties Window), and set the Text property to "Your First WP7 Application"
Click on the TextBlock that reads "page title", go to the Properties Window and set the name to tbHello as shown below:
Just as with any other application with Visual Studio, drag a TextBox and button to the surface of your application as shown in this screenshot:
Using the Properties Window, change the TextBox name to tbName, and the name of the Button control to be btnPressMe, plus change the Content property to "Press Me".
You can, of course, name the controls anything you like, but these are my suggestions to match up with the code later on.
Double-click the button on the left-hand side and the click handler will be wired up, causing the codebehind file to be opened showing an empty method:
private void btnPressMe_Click(object sender, RoutedEventArgs e)
At this point, I'm going to add the same 4 lines of code from the Silverlight article, with slight naming differences:
StringBuilder sb = new StringBuilder();
tbHello.Text = sb.ToString();
and add the 'using' statment to keep StringBuilder from throwing an error:
Pressing F5 at this point will start up the emulator. A word about the emulator... once you have it running, you should leave it running until you're ready to shut down the development system. You'll find out why when you hit F5... it takes a bit of time to start!
As the emulator gets going, it will display:
and eventually your application will be shown:
Clicking inside the text in the TextBox causes the text to be highlighted and the keypad to come upon the screen:
Now typing using your PC keyboard, or clicking the letters in the emulator, fill in some text in the TextBox, and push the "Press Me" button to complete the action:
Admittedly, I spent a lot of time getting to this point, but I wanted to show all the steps along the way. The very important part to notice is aside from tooling differences and visuals, this WP7 application uses the same 4 lines of code that the Silverlight application posted two days ago used.
Looking at the file structure for this application we see the following:
Comparing this to the Silverlight application, we find only one project. That makes sense, since it's running on the device (emulator in this case), so we have no need for another (web) application to launch from.
If you've followed along, you've now built your first WP7 application, and are on your way! If you had any problems, please feel free to contact me.
Watch for continued articles as I go exploring WP7 from a beginner's standpoint.
The Wallpaper Image Oh, and before I forget, you can download the wallpaper I Love Windows Phone image from Ozymandias.
Stay in the 'Light!
Opinions expressed by DZone contributors are their own.