Get Started Creating a Windows Phone Application

Silverlight quickstart for Windows Phone development

Windows Phone includes several tools to help you create and publish applications. This QuickStart describes the development tools and how to get started creating your first application for Windows Phone.

The QuickStart contains the following sections:

• Installing the Developer Tools
• Creating a New Project
• Adding a TextBlock
• Running Your First Application
• Running Your Application on a Phone
• Adding Graphics
• Adding a Button
• Adding Animation
• Publishing to the Marketplace
• What's Next

Installing the Developer Tools

You can download and install everything necessary to build and publish Windows Phone applications. In the following table, choose the column that applies to you, and then click the links to install the tools:

C# Developer

Visual Basic Developer

If you're a C# developer, install each of the following: Windows Phone Developer Tools Windows Phone Developer Tools January 2011 Update

If you're a Visual Basic developer, you must have Visual Studio 2010 Professional, Premium, or Ultimate installed to use Visual Basic for Windows Phone. Visual Basic for Windows Phone is not supported on Visual Studio 2010 Express for Windows Phone. If you're a Visual Basic developer, install each of the following: Windows Phone Developer Tools Windows Phone Developer Tools January 2011 Update Microsoft Visual Basic for Windows Phone Developer Tools - RTW

Creating A New Project

After you've installed the Windows Phone Developer Tools, the easiest way to create your first application is to use Visual Studio.

1. On the Start menu, launch Microsoft Visual Studio 2010 Express for Windows Phone.
2. On the File menu, click New Project

This opens the New Project dialog box. On the left side of the dialog box are the different project templates. When you select Silverlight for Windows Phone, the center portion of the dialog displays the different types of applications that you can create.

3. On the left, select Silverlight for Windows Phone.
4. In the center, select the Windows Phone Application template.
5. Name the project HelloWorld_Phone and click OK.

A new Silverlight for Windows Phone project is created and opened in the designer.

By default, Visual Studio is divided into three panes. (Depending on your settings, your panes might look different.) On the left is the Design view, in the middle is the XAML view, and on the right is Solution Explorer.

In Solution Explorer, there are a number of project files. The files that you'll use in this QuickStart are MainPage.xaml and MainPage.xaml.cs. MainPage.xaml defines the user interface for the application. XAML is an XML-based declarative language used to create and lay out UI elements. For more information about XAML, see the XAML Overview on MSDN. If you expand MainPage.xaml, you'll see a C# code-behind file named MainPage.xaml.cs. A code-behind file is joined with a XAML file through a partial class and contains the logic for the XAML file. For more information about code-behind and partial classes, see the Code-Behind and Partial Classes on MSDN. Separating the UI from the code allows you to create visible user interface elements in the declarative XAML markup and then use a separate code-behind file to respond to events and manipulate the objects you declare in XAML. This separation makes it easy for designers and developers to work together efficiently on the same projects.

Adding a TextBlock

Next you'll add a simple TextBlock that displays the message "Hello, World!" There are different ways that you can add elements, but this section will use the Toolbox and Design view.

1. If MainPage.xaml isn't already open, double-click MainPage.xaml in Solution Explorer.
2. On the View menu, click Other Windows, and then click Toolbox. The Toolbox window appears.
3. Resize or pin the Toolbox so that you can see both the Toolbox and the phone in Design view.

4. From the Toolbox, drag a TextBlock on to the main panel of the phone.

In XAML view, notice that a TextBlock element was added in the Grid content panel.

XAML

5. On the View menu, click Other Windows, and then click Properties Window. The Properties window appears.

6. In Design view, make sure that the TextBlock is still selected.
7. In the Properties window, set the Text property to Hello, World!.
8. Set the FontSize property to 50.
9. Set the Height property to 70.

Design view updates and should look like the following.

Running Your First Application

Now that you've created your first Silverlight application for Windows Phone, you need to run it. You'll use the built-in Windows Phone emulator, which mimics a Windows Phone device. Using the Windows Phone emulator, you can test and debug your application quickly on the desktop without having to deploy the application to the device.

To start the emulator, you simply need to start a debug session for the application. Visual Studio will launch the emulator and load the application onto it.

1. To start the application in debug mode, press F5 or choose Debug->Start Debugging.

If there are errors compiling your application, Visual Studio will display error information. After a few moments, an emulator window, like the following image, should appear.

It takes a few moments to open the emulator and start the debugger for the first time. To speed up subsequent debug sessions, don't close the emulator window. Instead, choose Debug->Stop Debugging to stop debugging. This will leave the emulator running, so the next debug session will load more quickly.

2. To stop debugging, select Debug->Stop Debugging.

Running Your Application on a Windows Phone

To run your application on a Windows Phone, you must unlock the device by using the Windows Phone Developer Registration tool. This tool is located in the Start Menu under Windows Phone Developer Tools. In addition, you must have a paid App Hub account.

1. If you don't already have an App Hub account, register now on App Hub, the official Windows Phone developer portal.
2. Start the Zune software on your computer.
3. Connect the phone to your computer.
4. Launch the Windows Phone Developer Registration tool, then enter the Windows Live ID credentials associated with your App Hub account.
   
5. In the registration wizard, enter the required identifying information about your phone.

   Your phone is unlocked and ready to receive application deployments in Visual Studio.

6. In Visual Studio, deploying to the phone is as simple as selecting "Windows Phone Device" (instead of the emulator) in the deployment target.
   

   

7. After selecting Windows Phone Device in the drop-down, you can deploy to the unlocked device by using the same process and debugging techniques as you would with the emulator.

Adding Graphics

In Silverlight, you can add graphics by using Shape classes. You can create simple shapes, such as Rectangles, or more complex shapes, such as Polygons. Brushes are used to color or paint objects in Silverlight. For more information about graphics and brushes, see the Graphics QuickStart and the Brushes QuickStart.

You'll start by adding a StackPanel around the TextBlock. A Panel is a container that is used to group and lay out UI elements. Each application should have at least one Panel. A StackPanel lays out each element one after the other, either vertically or horizontally, depending on the Orientation. Grid and Canvas panels allow for more exact positioning of elements.

The shape you'll create is an Ellipse. The Ellipse will appear after the TextBlock in the StackPanel. You'll specify the Height and Width of the Ellipse as well as the Fill. For the Fill, you must specify a Brush to paint the Ellipse.

Instead of using Design view, this time you'll work in XAML view.

1. Close the Toolbox window.
2. In XAML view, locate the TextBlock that you added.
3. Replace the TextBlock element with the following XAML.

XAML

4. Press F5 to run the application.

The following image of the emulator shows the application so far. There's no user interaction yet, so it doesn't do much, but you'll add more controls next.

5. To stop debugging, select Debug->Stop Debugging.

Adding a Button

The next thing you'll add to your application is a button Control. Controls are one way users can interact with Silverlight applications. Silverlight has a rich control library that includes a Button, a TextBox, ListBox, and many more.

There are two parts to adding a Button. The first part is to add a Button element to the XAML. The second part is to add some logic for handling events generated by user interaction, such as clicking the Button.

1. In XAML view, add the following XAML after the <Ellipse /> tag.

XAML

The Name attribute gives the Button a name value of "FirstButton", so that you can access the Button from code. The Content attribute specifies the text that appears on the Button. The Height and Width attributes specify the height and width of the button.

Silverlight is an event-driven application model. When certain things happen in your application, such as a user clicking a Button or the application loads, an event is raised. You can add code, called an event handler, which does something when an event occurs. You'll add an event handler for the Click event.

Visual Studio can create the event handlers for you.

2. In Design View, select the Button.
3. In the Properties window, click the Events tab. A list of events for the Button appears.

4. Double-click the Click event.

The code-behind file MainPage.xaml.cs opens and you should see the FirstButton_Click event handler.

5. Within the curly braces, add the following code to the event handler.

C#

Visual Basic

The FirstButton_Click event handler performs the following action. When the Button is clicked, the text that is displayed on the button toggles between "Tap" and "Tap Again".

6. Press F5 to run the application.

The following live sample demonstrates the click event handler. To try this live sample, click the button.

In the XAML for the Button, notice that a Click attribute was added.

XAML

Adding Animation

The final thing you'll add to your application is some animation. You'll create a very simple animation that squeezes the Ellipse and then expands it back out, but you can do much more with animations. This section just introduces animations, so it's not important to understand all of the details. For more information about animations, see the Animation Overview on MSDN.

To create an animation you need to do three things: create a StoryBoard, create the animation, and then add code to start the animation.

A StoryBoard is a container that is used to group animations. From the StoryBoard, the animations can be started and stopped.

Animations in Silverlight work by changing the value of a property over a span of time. The StoryBoard.TargetName property specifies the object to which the animation will be applied. Storyboard.TargetProperty specifies the property on the object that will be animated. The To property specifies the value to animate to. The AutoReverse property specifies if the animation should repeat when it'is finished, going backwards to its start position. The Duration property specifies how long the animation will take. For example, if you want the duration to be one second, you would set the Duration to "00:00:01" (zero hours:zero minutes:one second).

1. In Solution Explorer, double-click MainPage.xaml.
2. In XAML view, replace the existing StackPanel with the following XAML.

XAML

This XAML create a StackPanel.Resource section that contains a StoryBoard element. The StoryBoard is named FirstStoryBoard so that you can access it in code. The animation changes the Width property of the Ellipse, which is a Double type, so you use a DoubleAnimation. The StoryBoard.TargetName property specifies the FirstEllipse object. The Storyboard.TargetProperty specifies to animate with Width property on the Ellipse. The To property is set to 1, so the Width will shrink from its current value of 200 down to 1. The AutoReverse property is set to True, so the animation will repeat. The Duration property is set to one second.

Now you need to start the animation. To start the animation, you call the Begin method on the StoryBoard.

3. In MainPage.xaml.cs, add the following call to the Begin method to start the FirstStoryBoard animation when the FirstButton is clicked.

C#

Visual Basic

4. Press F5 to run the application.

The following live sample demonstrates the animation. To try this live sample, click the button.

---

Publishing to the Marketplace

When you have finished your application, you will likely want to distribute it to the public as a free download or sell it. You do this by submitting your application to the Windows Phone Marketplace. To learn how to do this, see Publishing Your Application in the Marketplace.

---

What's Next

Now that you've been introduced to your first Windows Phone application, have a look at the User Experience Design Guidelines for Windows Phone. Not everything in these documents will be immediately pertinent to you, but you may want to return to them from time to time to brush up on best practices. After you're done, come back here and move on to the next QuickStart that delves into XAML, the declarative markup language used to create your application user interface: XAML QuickStart.

See Also

• Getting Started Guide
• How to: Create Your First Silverlight Application for Windows Phone
• Getting Started with Windows Phone Development