Hey folks! Welcome back! By now you would have tried doing something on the SDK we downloaded in our tutorial the last time. Now is the time to see what and how we are going to run codes in it. Then we will get to see the output for the code which we can even see visually!

Visit: Beginner’s guide to Windows Phone App Development

Do note that this exercise is just to make sure you understand the way in which we can run a code on the Windows Phone 7 SDK. So try to ignore the coding syntaxes and how these things are done kinda things. We can deal with them in later modules. Just make sure you have a very thorough idea about how we are going to execute the code. This is going to be necessary in all the codes we will type into the SDK.

Visuals are really important again.

Show me what I have done!

1. Every programming tutorial will start with a ‘Hello World’ code. Well, just to break the stereotype, let me just proceed with something like ‘Hello Kennedy’ which is going to give me more satisfaction when I run the code. You can even give your name instead of mine if you want!

2. Open the Visual Studio 2010 Express we have downloaded. You will be provided with a start page which will look like the visual below. It will consist of some info to get you started and some links. Go to the top left corner and hover or left-click the ‘File’ tab. This will open new options as given-

Select the ‘New Project’ field. On selecting the New Project, you will be presented with a new window-

It contains a host of things which we can utilize. Next select the ‘Windows Phone Application’ option on top of the list.

3. Now if you scroll down on the page, you will find the fields with ‘Name’, ‘Location’ and ‘Solution name’. We have to specify a valid Name for our new project. I have given Mine as ‘HelloKennedy’.

Click ‘OK’.

4. On clicking ‘OK’, the Visual Studio will get to work and undergo some ‘under the hood’ operations we don’t have to worry about. It will present you with a new screen which will look like this-

This is our working field. Now as you can notice, we are presented with an almost phone like interface on the left. This is called the ‘Emulator’. We will discuss in detail about it when we start debugging the code. On the right side we have a host of XML codes which we will deal with in later modules.

5. I will give you a tip. When you hover over the left pane of the emulator you will find that there is a ‘Toolbox’ field there. When you over it, you will get a new window which will have a host of useful things called a Toolbox which we are going to use in our module. Just pin it on the menu so that it will not keep ‘auto-hiding’ itself, as this is a very important window and we will need to access it very frequently.

6. Once that is done, we can start our designing part on how our first app is going to look like. Click and ‘drag and drop’ the ‘Button’ available in the Toolbox. Release it in the working surface as highlighted-

Once you release this button you will have an option of placing it anywhere on the working surface. I have shown an example-

7. Now from the Toolbox drag and drop a ‘TextBlock’ on the work surface.

You can also manage where this will be placed on the work surface. You can also increase or decrease its size if you wish to. Select this TextBlock using your cursor.

8. Now take a look at the lower right corner where you will find the ‘Properties’ window. As you have selected the TextBlock, it will display its properties. Go to the TextBlock header field as shown below and change the name to ‘myTextBlock’ as shown. Then scroll down and go to the Text body field and delete all the contents of the field as shown. When you clear this field, do note that the change is reflected on our TextBlock too.

9. Then select the Button we imported and edit the Properties like we did for the TextBlock. Name the header as myButton as shown and on the Content field, type ‘Click me!’ so that the user knows what to do with a button. This change is also reflected on our button.

10. To make things really easy let’s imagine a real life situation-

“When you install a bulb or a tube in your room, you usually, well every time actually, install a switch with it. Now this switch is used to control the bulb or tube. When the switch is turned on, the bulb or tube glows and vice-versa. You might have understood that each of them is kinda useless without one another. Have you seen a switch which is used for switching practice? My point is, you need the switch to control the bulb or tube. Similarly, in our app, when we create a button, we need something which is going to display the output when we press the button. Either is useless without each other.”

11. Let’s start with the coding part. Do understand that we are going to code for the Button and not the TextBlock because we are going to ‘click’ the Button and not the ‘TextBlock’. (We don’t click on the bulb or tube to ‘on’ the switch!) The coding window will be displayed once you click the Button, ‘Two times’. The window looks like this-

This is where we are going to code how the button is going to act when we click it. The IDE will present you with some pre-written codes which will be required during our coding process but we don’t need to write them again, as the IDE has already coded them for us.

12. Write the code on the field as shown below-

Do remember not to write the code anywhere else! That may lead to an error. Once we have entered in the codes, we are now ready to test our first app. Let’s try it.

13. This can be done by using the button as shown below. Or you can use the debugging option in the menu.

Click the ‘Run’ button.

14. You will be presented with an emulator screen. The emulator is a visual representation of a Windows Phone. This is used to test and let us debug how the app is going to look like when we install it in our real-life phone. This gives us the chance of making any changes as we want and debug any error-

Now click the button we created (the Click me! button). We will be presented with an output on the TextBlock as shown below-

It says, “Hello Kennedy!!”, exactly as we had coded before. Success!! We have created our first app! In order to stop debugging the app, click the ‘stop’ button-

I do hope this will get you going and raise your interest towards coding for a Windows Phone 7 app. Happy app-developing!! See you next time!!

Next Topics :

• Analysis of Emulator in Windows Phone 7 App Development
• Coding for Hello World Application in Windows Phone 7