Creating your first Windows Phone 7 application
Oct
18
Written by:
10/18/2011 8:51 AM
Creating applications to run on your Windows Phone 7 have never been easier. Using Microsoft Visual Studio 2010, you can create a broad range of applications and games and test them using the provided emulator.
This article will show you how to create a very simple application and in so doing introduce you to some of the powerful features you now have at your fingertips.
Start Visual Studio 2010 and from the “File” menu select “New”, then “Project…”.
From the subsequent screen, select the category called “Silverlight For Windows Phone” from the left-hand panel. Then from the right-hand panel select the option entitled “Windows Phone Application”. Click the “OK” button.
Visual Studio creates a default phone template for you. The left-hand side of the screen gives you a preview of what you application looks like on the phone. The right-hand side of the screen shows you the markup language called XAML that is used by Windows Phone applications. You can think of XAML as the HTML for Phone 7.
To change the title of your application screen from “MY APPLICATION” to something else, simply right-click on the text in the preview panel and select “Properties” from the popup menu. In the properties panel on the right-hand side of the screen you can change the text in the “Text” field.
Repeat these steps to change the text for the sub-section of you application’s main screen from “page name” to something else.
Next we will add a “Button” and a “TextBox” to the main screen. So from the “Toolbox” on the left-hand side of the screen drag a “Button” and a “TextBox” onto your application. Place those controls anywhere you like.
You can change the text that is displayed inside of your “Button”, by right-clicking on the button and selecting “Properties”. From the “Properties” panel on the right-hand side change the value in the “Context” field from the word “button” to something else. You can perform a similar action for the “TextBox” if you like.
Each control that you have in your application has a unique name. When you drag a control from the “Toolbox” to your application, Visual Studio creates the control and gives it a unique name. For example, when you added the “Button” and “TextBox”, Visual Studio gave them the following names “button1” and “textbox1”. You can change these names to more meaningful names if you like, but make a mental note of these names because we will need to use these names a little later on.
Double-click on the button and you will be taken to the code-behind page where you can add C#/VB code. What we want to do here is change the text in the “TextBox” to say “Hello” when the user clicks on the button and then we want to display a “MessageBox” to the user telling them what the time is. So your screen should look similar to the following:
Notice that when you double-clicked on the button that Visual Studio created and event-handler for you for the “Click” event. There is quite a large number of events that you can register for and the events will vary depending upon the type of control. For example, a “Button” may have a “Click” event but a “TextBox” may not have one. To see the complete list of events available for a particular control, select the control in the “Preview” panel, right-click on the control and select “Properties” and in the top right-hand side of the “Properties” panel you will see a lightning bolt icon, click on it to see the list of events available for that control.
In the code-behind page replace this code:
1.private void button1_Click(object sender, RoutedEventArgs e)
2.{
3.
4.}
With
1.private void button1_Click(object sender, RoutedEventArgs e)
2.{
3. textBox1.Text = "Hello";
4. MessageBox.Show("The current time is:" + DateTime.Now.ToString());
5.}
In our "button1_Click" event-handler, the first thing we did is set the “Text” property of the “textBox1” control to the text “Hello”. Then we displayed an alert box to the user telling them what the current time was. We used the “MessageBox” object’s “Show” method to display some text.
Run your project by pressing “F5” or clicking on the “Play” icon in the menu bar to see the results of your hard work.
Press the “Stop” icon on the menu bar to return to Visual Studio.
One last thing we will do is add an image to our application. So from the “Toolbox” drag an “Image” control on the “Preview” panel.
Right-click on the “Image” control and select “Properties”. Then from the “Properties” panel, click on the ellipsis button “…”.
Click on the “Add…” button. Choose and image from somewhere on your machine.
Click on the “OK” button to add your image to the “Image” control.
Run your application to see the results.
Enjoy!