Skip navigation

This is very classic. Whenever you try to learn about a new programming language or a new development tool, you create a “Hello, World” application.

Goals:

  1. Being familiar with the Microsoft Visual Studio 2010 Express for Windows Phone.
  2. Creating a simple  Hello World application to be familiar with the cycle of app development.

IDE

First, run the tool that you will develop the application. Start –> All Programs –> Microsoft Visual Studio 2010 Express for Windows Phone. I am assuming that you already had downloaded the required tool and installed it.

Visual Studio Windows Phone 2010 home screen.

To create a new project, click the New Project link in the home screen. Or from File menu, select New Project. New Project dialog window will pop up. make sure to select Silverlight for Windows Phone from Visual C# under installed Templates part of the window. Later we might make a post about creating XNA game application for windows Phone.

In the middle part of the New Project dialog, you will notice 5 different projects for Windows Phone 7. These types are like next:

  • Windows Phone Application: a standard standalone application. Make sure to select this template.
  • Windows Phone Databound Application.
  • Windows Phone Class Library: for resuble components to be used in many other applications. e.g. : Math library.
  • Windows Phone Panorama Application: specific Windows Phone 7 UI. we will have a detailed post about later.
  • Windows Phone Pivot Application: specific Windows Phone 7 UI. we will have a detailed post about later.
New Project window.

New Project window.

Now give a name for the application (HelloWorld),  select a location for the solution file to be saved.

Now the IDE will be shown in like next image.

First Form

You will notice that the left part of the IDE, is a phone theme contains a very initial form with an application name and page title. This is the Designer part. Here you can drag and drops controls from your toolbox and arrange them around your form space.You will love to deal with this part if you are experienced windows application designer. We will see that in a moment.

The middle part is a XAML part. It is is a declarative   XML-based language created by Microsoft which is used to initialize structured values and objects. You will love to create objects and deal with them using this part if you are HTML and JavaScript guru!

Now we want to add a label that will hold our welcome message. But there is not Label control in Silverlight. There is TextBlock. Drag and drop it to somewhere in the page.

After adding the TextBlock control, go to the XAML code. You will find in the content panel area, a new tag for a TextBlock has been added. find the attribute Name, and change it to lblMessage. After renaming the TextBlock control object, we want to set the Text property value to show “Hello, World!”. Right click the control in the designer and select Peroperties. In properties windows, select Text property and change the value in it to Hello, World!

Properties Window

Properties Window

NOTE: Whatever the property you change its value, you can do that from both properties window or XAML code editor.

Now you are ready to run your to run your first Windows Phone application. just a second before you hit the lovely green play button in your IDE task bar, select the appropriate running mode from the available two options :

  • Windows Phone 7 Device: in case you have a Windows Phone 7 hardware. You will be in a need to have a Zune software which is required to sync data between your PC and your phone.
  • Windows Phone 7 Emulator: Which will preferable selection as long as you write code and test it.
Emulator

Running Options

 

Hit the run button and here we are. Congrats for your very first Windows Phone!!

Hello World Application

Hello World Application

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: