First make sure you've installed the Windows Phone Developer
Tools CTP – this includes the Visual Studio 2010 Express for Windows Phone
development tool (which will be free forever and is the only thing you need to
develop and build Windows Phone 7 applications) as well as an add-on to the VS
2010 RC that enables phone development within the full VS 2010 as well.
After you’ve downloaded and installed the Windows
Phone Developer Tools CTP, launch the Visual Studio 2010 Express for
Windows Phone that it installs or launch the VS 2010 RC (if you have it already
installed), and then choose “File”->”New Project.” Here, you’ll find
the usual list of project template types along with a new category:
“Silverlight for Windows Phone”. The first CTP offers two application project
templates. The first is the “Windows Phone Application” template - this is what
we’ll use for this example. The second is the “Windows Phone List Application”
template - which provides the basic layout for a master‑details phone
application:
After creating a new project, you’ll get a
view of the design surface and markup. Notice that the design surface shows the
phone UI, letting you easily see how your application will look while you
develop. For those familiar with Visual Studio, you’ll also find the familiar
ToolBox, Solution Explorer and Properties pane.
For our HelloWorld application, we’ll start
out by adding a TextBox and a Button from the Toolbox. Notice that you get the
same design experience as you do for Silverlight on the web or desktop. You can
easily resize, position and align your controls on the design surface. Changing
properties is easy with the Properties pane. We’ll change the name of the
TextBox that we added to username and change the page title text to “Hello
world.”
We’ll then write some code by double‑clicking
on the button and create an event handler in the code-behind file
(MainPage.xaml.cs).
We’ll start out by changing the title text of
the application. The project template included this title as a TextBlock with
the name textBlockListTitle (note that the current name incorrectly includes
the word “list”; that will be fixed for the final release.) As we write code
against it we get intellisense showing the members available. Below we’ll
set the Text property of the title TextBlock to “Hello “ + the Text property of
the TextBox username:
We now have all the code necessary for a Hello
World application. We have two choices when it comes to deploying and
running the application. We can either deploy to an actual device itself or use
the built‑in phone emulator:
Because the phone emulator is actually the
phone operating system running in a virtual machine, we’ll get the same
experience developing in the emulator as on the device. For this sample, we’ll
just press F5 to start the application with debugging using the emulator.
Once the phone operating system loads, the emulator will run the new “Hello
world” application exactly as it would on the device:
Notice that we can change several settings of
the emulator experience with the emulator toolbar – which is a floating toolbar
on the top right. This includes the ability to re-size/zoom the emulator
and two rotate buttons. Zoom lets us zoom into even the smallest detail
of the application:
The orientation buttons allow us easily see
what the application looks like in landscape mode (orientation change support
is just built into the default template):
Note that the emulator can be reused across F5
debug sessions - that means that we don’t have to start the emulator for every
deployment. We’ve added a dialog that will help you from accidentally shutting
down the emulator if you want to reuse it. Launching an application on an
already running emulator should only take ~3 seconds to deploy and run.
Within our Hello World application we’ll click
the “username” textbox to give it focus. This will cause the software
input panel (SIP) to open up automatically. We can either type a message
or – since we are using the emulator – just type in text. Note that the
emulator works with Windows 7 multi-touch so, if you have a touchscreen, you
can see how interaction will feel on a device just by pressing the screen.
We’ll enter “MIX 10” in the textbox and then
click the button – this will cause the title to update to be “Hello MIX 10”:
We provide the same Visual Studio experience
when developing for the phone as other .NET applications. This means that we
can set a breakpoint within the button event handler, press the button again
and have it break within the debugger: