In this tutorial I'll show you how to write a very simple program for Windows Phone 7 platform.
In this tutorial I'll show you how to write a very simple program for Windows Phone 7 platform. All devices with this operating system have multi-touch screen with 480x800 resolution, at least 8GB of Flash memory, camera and radio tuner. These requirements are imposed on hardware manufactures by Microsoft to ensure high quality of final product. Each device should also have accelerometer, light and proximity sensor, compass and GPS. A list of hardware buttons is limited to six - Back, Start, Search on the front of the phone and Camera, Power, Volume on the sides. Thanks to that developers can design their programs for a specific hardware and they know that devices from different manufactures will have the same parameters.
Applications are created in Silverlight for Windows Phone. It allows you to create user interface in XAML files and program it in code behind files. If you used normal Silverlight before it will be very simple for you, if not don't worry - I'll explain everything to you. You can also use XNA Framework in your apps, which is also used in creating games for video console Xbox from Microsoft. Development tools for Windows Phone apps are: Visual Studio and Expression Blend, the former is used for implementation of your programs and the latter makes creating advanced user interfaces much easier. Both these tools can be downloaded for free from the internet, you can get it here: http://create.msdn.com/en-us/home/getting_started.
Now we'll create a new application for Windows Phone. Open Visual Studio and go to File -> New -> Project, then find Windows Phone Application as shown on the picture below:
You can name your application as you like, in our example it will be MyFirstWPApp. Now take a look at Solution Explorer window on right, it contains all files of our project:
The most important files are:
- App.xaml and App.xaml.cs - it handles initialization of our application
- MainPage.xaml - it's a user interface and main page of your application, that will be a page where we put all controls that we'll use in our app.
- MainPage.xaml.cs - code behind file, here we'll implement behavior for all events such as pressing a button on MainPage.xaml
- ApplicationIcon.png - icon of our app on phone's application list
- Background.png - icon of our app on phone's start screen
- SplashScreenImage.jpg - this image will be displayed after launching of our application, before MainPage is loaded.
In the image underneath you can see the main page of application, on the left there is a phone, where you can drag and drop controls (such as button) from toolbox. On the right there is a XAML code, you can also create user interface just by editing this code. XAML is an declarative markup language. In Visual Studio there is an build-in Windows Phone emulator, you can test there all your applications. To launch it just click on the run button that is marked in the image:
Our application is not ready yet so you'll just see a default application. Remember that you don't have to turn off emulator after testing. It's better to stop it by pressing stop button in Visual Studio. Thanks to that you don't have to wait for the emulator to start each time you want to test your application. To start your application again you just have to press again run button. Windows Phone emulator looks like this:
Now we'll start creating our app. It will be a very simple calculator. Firstly we'll change the name of our page. Go to MainPage.xaml file, click on the text "page name" to select TextBlock. After selecting it go to the Properties window on right and change Text property to "Calculator":
We can now add all controls to our page. Go to Toolbox on left and find TextBox, Button and TextBlock, we'll need two TextBoxes to type two numbers, four Buttons for mathematical operations and one TextBlock to show the results. Drag and drop it from Toolbox to your main page as shown on the example below:
To change text of buttons and all other controls just do the same thing as before - click a control (eg. button) go to Properties window and change Text property to a text that you want to be displayed on this control.
Now that our user interface is ready, we have to implement the behavior of our application. In this app after clicking button we'll take both numbers from left and right TextBox and do appropriate mathematical operation on these numbers, displaying result in the TextBlock below. To do this double click on "+" button, you'll go to MainPage.xaml.cs code-behind file where you can program this button, add following code to button1_Click function:
We'll have to do this for all other operations. So double-click on "-" button and add following code:
Button "*":
Last one "/" button:
Note that in the last example we use double instead of int in cease where result in not an integer number (eg. division 5/7).
Your application is now ready. As you see, creating applications for Windows Phone is quite easy especially for those who are already familiar with Silverlight.