Windows Phone 7 – My First Phone App!

After much procrastination, I started to create my first Windows Phone 7 application this week. To be honest I did not think it would be an easy task given that it has been quite a while since I last opened visual studio to code something(much of my time has been spent admiring apps written by the amazing Imagine cup competitors;-)). Well, but I decided to take the plunge, and to my complete surprise I wrote my first app in flat 15 minutes. Hence this blog post, coz I believe my example should inspire several others to start writing apps for the new and upcoming Windows Phone 7 platform using cool technologies such as Silverlight and XNA. Let me walk you through the steps I took to get started – 1. The first thing I had to do was of course to download the much talked about tools for Windows Phone 7. It was a totally painless experience to download and run the setup on my Windows 7 PC. The set up installed the following components for me in less than 5 minutes.

• Visual Studio 2010 Express for Windows Phone Beta
• Windows Phone Emulator Beta
• Silverlight for Windows Phone Beta
• Microsoft Expression Blend for Windows Phone Beta
• XNA Game Studio 4.0 Beta

Run the vm_web.exe to start the set up. 2. Once I got the tools, I had to think of the application idea that I wanted to work on, since this was my first app I decided to take a really simple app. The app basically shows up the various taxi services in Singapore and helps you directly dial the numbers without having to remember them when you need it. I find the concept very helpful when you are in rush and cant remember the numbers of the various taxi providers. 3. You can follow the following steps to recreate this app on your own: a) Open Visual studio 2010 Express for Windows Phone, click on New Project and select Silverlight for Windows Phone and Windows Phone Application(remember Silverlight and XNA are the two key technologies required to build apps for Windows Phone 7). b) The project gets created with the skeleton Silverlight based-phone app content, like any Silverlight application, the code contains a mainpage.xaml file. For first timers to Silverlight, XAML is the markup language used to define the user interface of Silverlight apps. It has a .CS file associated with it that defines the server side code. XAML has various types of controls for you to use, one of which is the GRID control, think of it like the HTML

tag. Look  through the XAML file and familiarize yourself with the basic structure. c) Navigate to the TextBlock inside the StackPanel which is named “applicationtitle”  and change the text property to “My First Phone App” or what ever else you’d like. Similarly you can change the PageTitle to “Call a Cab!!”. d)Now you need to add in other controls to populate the main Grid - [cc lang=“xml” escaped=“true”] [/cc] We need to define the rows and columns inside this main Grid, For now I am just adding 1 one row with 2 columns - [cc lang=“xml” escaped=“true”] <Grid.RowDefinitions> </Grid.RowDefinitions> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> [/cc] Adding in an image in the first column and a button in the second column but first need to add an image file to the project - Updated Grid Control code - [cc lang=“xml” escaped=“true”] <Grid.RowDefinitions>              ? </Grid.RowDefinitions> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> [/cc] Now, associating an event handler at the click event of the button control - [cc lang=“xml” escaped=“true”] <Button VerticalAlignment=“Top” Click=“Button_Click” Height=“70” Grid.Row=“0” Grid.Column =“1” Content=“Comfort Taxi” Margin=“0,0,28,0” Background="#FF7600FF"/> [/cc] Double click the button on the design pane of the xaml file and it will take you to the code behind .CS file. Add the namespace,  Microsoft.Phone.Tasks in the .CS code behind file. The statement would look like this – using Microsoft.Phone.Tasks; Inside the event handler Button_Click, add the following three lines of code and we are done. [cc lang=‘csharp’ ] private void Button_Click(object sender, RoutedEventArgs e) { PhoneCallTask call1 = new PhoneCallTask(); call1.PhoneNumber = “65521111”; call1.Show(); } [/cc] Build your application by keying in Control +F5 and that will launch the emulator and load your application onto it - Click on the Comfort Taxi button and that will prompt you with a dial screen that dials the number of the taxi provider. So far its a very basic structure of this app, obviously you can improvise here in many ways – by adding more taxi providers, by improving the user interface(I am not that artistic), by not hardcoding the taxi numbers but reading it from a stored file or something. Feel free to use these steps to get started . Happy Windows Phone 7 programming!!