Welcome to the AppsByDel Mobile Development Blog. Here you will find my thoughts and experiences gained while exploring the world of mobile application development. What better way to start off than the typical “Hello World” example.
I intend for this tutorial to be for the beginner, there really is not much programming knowledge required for this one! You should, however become VERY familiar with XAML and also either C# or VB.NET when you are ready to completely dive in. VB.Net support is not currently in the beta tools, but there is word that it is coming soon. By all means, if you have any questions or concerns, please feel free to leave a comment or two. This first “Hello World” example will be created using the new Windows Phone Beta Developer Tools. If you have not already, make sure you download the tools if you want to follow along. We won’t go into details on the installation procedures in this tutorial, we’ll just focus on creating a simple “Hello World” app that will display the text “Hello World” when a button is clicked.
This example will use Visual Studio for Windows Phone which is included in the download. Once you have the tools installed successfully, let’s go ahead and launch Visual Studio and select “New Project”. The following screen will show:
Make sure that you have “Silverlight for Windows Phone” selected in the template choices on the left, then click on the ”Windows Phone Application” selection in the center section. Update the name of your application to “Hello World”, or whatever you wish to name it and click “OK”.
Now that the hard part is over, we’ll start laying out our application. You should now see the file “MainPage.xaml” open in Visual Studio. There is a visual user interface designer as well as a code view visible for the page. Also, you will see some additional tabs such as the Properties tab and the Solution Explorer.
We won’t cover the Solution Explorer in detail, but suffice it to say, this tab primarily shows the projects files, folders, etc. for your application. The Properties tab allows you to change several properties of the controls that you have added to your application pages such as margin, text, width, and opacity.
While taking a look at the user interface designer, you should notice that default values have been entered for the application’s title and page name. We will want to change that right away. There are several ways to update and change this information. One way would be to simply select the application title and page title areas on the design surface, and then while selected, update the “Text” values on the “Properties” tab. The way I prefer is by editing the XAML code.
Take a look at the XAML code that is automatically created for you when you start a new project. Find the following lines in the code:
You will see two Textblock elements, which are used to display text on your application page. Edit the “Text” values of each. Change the text in the first Textblock element from “MY APPLICATION” to “HELLO WORLD” and the value in the second Textblock from “page name” to “sample page”. The design surface should update to show the edited text.
Next we will locate the toolbox, which should be on the left hand side of the Visual Studio window. If it is not present, click on “view” from the program menu, then “other windows”, and finally “toolbox”. Take a moment to become familiar with the controls that are available to you. In this tutorial, we will use the Button control and the Textblock control.
There are again multiple ways to add a control to the design surface. The way we will choose now is drag and drop. Simply select the Textblock item from the toolbox and drag it onto the design surface. The default text “textblock” will show surrounded by drag handles which will allow you to resize the control. Feel free to experiment with the sizing of the Textblock as right now this is not really important. When you have sized the Textblock to your liking, drag it so that it is now positioned right below the “sample page” title.
Next, drag a Button control from the toolbox to the design surface. Resize it to your liking then position it right below the Textblock that you dragged over earlier. Your application page should now look similar to mine:
Ok, so far so good? Then lets continue. Notice that the Textblock and Button controls still have the default text in them. We can change the new Textblock’s text the same way that we changed the title of the application. For now, lets just remove the text from the Textblock completely. Locate the Textblock that was added in the XAML code and replace the default text Text = “textblock” with Text = “”. The Button control is a little different as there is no “Text” field for a button, but rather a “Content” value that should be edited. Change the default from Content=”Button” to Content = “Click Me”.
It is always a good practice to give a name to any and all controls that you add to your page. This is required if you wish to interact with these controls through code, which we will want to do. Find the Textblock element in the XAML and locate the “Name” attribute. It should be between the opening and closing Textblock tag. Edit the “Name” field’s text from the default “textblock1” to “txtMessage“. We’ll do the same for the Button, however lets update the Button’s Name attribute from “button1” to “BtnSayHello“.
The design surface should be updated with the new Button text and the Textblock’s text should be removed. We have now completed a very simple layout.
Each page of your application also has a “code behind” page. This is where the action happens. In order for your page to perform some kind of action, we need to write code. Thankfully, this is just a Hello World tutorial and everything we need to do can be completed with the addition of one line of code in our code behind page.
As we have already discovered, there are many different ways to accomplish the same thing when coding. Adding code to our page is no exception. If you right click on the page while viewing the XAML code, you will be presented with an option to “view code”. This is one way to navigate to the code behind page. Of course, I am going to do it another way. We want to display the text “Hello World” when the Button is clicked, therefore we will kill two birds with one stone.
Lets again take a look at the Button element in our XAML markup. There is one additional attribute that we now would like to add and that is the Click handler. We want to let our application know what to do when the button is clicked. Somewhere between the opening and closing button tags, begin typing the word “Click”. As you type, you should be presented with a menu that helps auto – complete your code. Select “Click” or just continue typing the work out completely followed by an “=” sign. A popup appears again, now indicating that you can set up a new click handler. Go ahead and double click this option and more code will be created for you.
You will now see that “btnSayHello_Click” has been added. This is telling your application that when btnSayHello is clicked, it needs to look for a method in our code behind file named “btnSayHello_Click“. Go ahead and right click on this newly added text and you will notice an option to “Navigate to Event Handler”. Click this and you will be taken directly to the appropriate section of code in the code behind page.
There is now one line left to add to the code to get your application in working order.
txtMessage.Text = “Hello World”
Add this line in the postion matching the picture below and you should be all set:
This little bit of code simply tells the app that when the button is clicked, change the Text of the Texblock named “txtMessage” so that it reads “Hello World”.
Go ahead and save your work and you’re all done! In order to test out the application, just click on the green play button on the Visual Studio toolbar, which will launch the application onto the emulator.
Once your application has launched, clicking on the button should display the Hello World text while simultaneously bringing a smile to your face.