Say ‘Hello World’ to Windows Phone 7 (Mango) | Windows Application Development

• Introduction:

Mango, the official name given to the successor of the Microsoft’s old mobile OS is out in the market. This Windows Phone 7 OS comprises of the new capabilities and features; new user interface, better user experience and functionality are part of this enhanced operating system. Microsoft also has unveiled the first SDK in Sep 2010. The developer’s tool kit comprises of:

• Visual Studio 2010 express
• Windows Phone emulator
• Silverlight 4
• Microsoft Expression Blend for WP7
• XNA Game Studio 4.0

The SDK is free to download and install and with Visual Studio 2010 express edition you can develop almost any kind of app with fabulous capabilities. However in this tutorial we will be putting the first step towards development of the WP7 application.

• Pre-requisite:

The installation of SDK for WP application is quite simple and straight forward. You can download the web installer from here and then install the SDK by taking help of the instruction which comes with the installer.

• System Requirement:

• Windows Phone & Emulator
• DirectX 10 or higher
• WDDM 1.1 Driver

• Development of first app in the WP7: Hello World

Well, after the successful installation of the pre-requisites, we are now ready to put the first step in the Windows Phone 7 application development world. Here we will start with the very basic application; Hello World. Following tutorial will demonstrate how you can develop the basic Hello World application using Visual Studio 2010 express edition.

• Step1: Start the Visual Studio 2010 then go to the File and click on the ‘New Project’ to create the new project, just like show in the below snap:

• Step2: This will show up the dialog window just like show in the picture below:

The left panel showcase the list of installed project templates. Look for the Visual C# and expand it and select the ‘Silverlight for the Windows Phone’.

In the middle section you will find the WP project templates, select the ‘Windows Phone Application’ and then change the name of the application as ‘HelloWorld’ and also select the project folder. Now click on the ‘OK’ button and this will create the project with the name ‘HelloWorld’.

• Step3: When the project gets loaded, you will see the default editor with the name MainPage.xaml. This editor will be having two frames, with the left pane as the WP7 device designer and the right one is the code pane.

The idea here is to create a simple app with one button and using text area, which means when the button will be clicked; the text ‘Hello World’ will appear on the screen. SO let us start by adding a button on this app.

• Step4: Look for the button control in the tool bar left to the MainPage.xaml. Make use of visual helper to position the button inside the rectangle located in the content area.

• Step5: If you want, you can also change the properties of the button, like text property and other also using property box. In our scenario, look for the text property and replace the existing text by the text ‘Click Me’.

• Step6: Just like we added button, now we have to add the TextBlock control in the designer pane and resize it to fit in the content box.

• Step7: Erase the default text from the TextBlock control and leave it empty.

• Step8: Now you should see the designer pane similar to the image mentioned below:

• Step9: Now to get the ‘Hello World’ on the click of Button ‘Click Me’, we have to do some coding stuff. For this, we have to write action listener for the Button and hence double click on the button and wait until you see the new document. When the new window gets open you will see the view like show in the below picture.

• Step10: You need to edit the document by simply adding a single line of code as shown in the snap below: Save the document and hit the F5 to start the emulator.

• Step 11: Once, emulator gets load, you will see the snap like mentioned below. Now click on the ‘Click Me’ Button and this will trigger the action write on it and will display the ‘Hello World’ as show in the image.

That’s it; you have now entered into the Windows Phone 7 Development world with your first app.

Popularity: 1% [?]

Incoming search terms:

• windows phone mango tutorial (3)
• hello world mango (2)
• windows phone 7 mango tutorials (2)
• Windows phone 7 5 ui for nokia 5233 (2)
• mango development visual studio express edition (2)
• windows phone 7 hello world (2)
• windows mobile 7 with visual studio 2010 express basic tutorial (1)
• windows mango application development hello world (1)
• windows 7 mango for nokia 5233 (1)
• windows 7 gdesk on nokia 5233 tutorial download (1)

Related posts:

1. Will Windows Phone Mango survive in the mobile Wars?
2. How to install Mango on Windows Phone 7 without a developers account
3. How to set an external ringtone on Windows phone Mango
4. How to setup Office 365 in Windows Phone 7.5, Mango
5. World’s fastest Android Phone | HTC Sensation XE 4g review