Thursday, April 23, 2015

Step by Step : Windows Phone 7 : First Application

Hi,
Welcome to my blog of Windows Phone 7 Development. In this series of posts, I will try to explain various concepts in Windows Phone 7 Development. We will try to learn how to develop applications for Windows Phone 7.  So lets start. This post is not an exhaustive account about .NET Framework, C# concepts, Visual Studio 2010 and doesnot tell you all about Phone Emulator. This post takes into consideration that you have background knowledge ( at least beginner level ) on concepts like .NET, C#, Visual Studio and so on.

Please see my previous post titled "Windows Phone 7 : Setting Up Development Environment" to know how to setup your Windows Phone 7 Development environment. In this post we will see step by step to do the following
  • Develop of First Application which is Hello World application
  • How to change our start up page for our application

Hello World application:
Lets roll up our sleeves and start developing Windows Phone 7 applications. Lets start by developing typical Hello World application so that we can get familiar with developing and running Windows Phone 7 applications.

Launch Microsoft Visual Studio 2010 Express for Windows Phone.























Add new project. Make sure you select Silverlight for Windows Phone under Visual C# in Installed Templates. Select Windows Phone Application as shown in below screen shot and give name as HelloWorld

















Next you will get a popup as shown below that will ask for Target Windows Phone OS version. For our learning we will use Windows Phone OS 7.1 and click OK.













Next as shown in below figure drag and drop a Button and TextBlock from Toolbox and change below properties
Button
Name : btnClickMe
Content : Click Me

TextBlock
Name : txtMessage
Text:
 Width : 400














Now double click on Click Me button. This will open MainPage.xaml.cs and will add a method btnClickeMe_Click. This means whenever we click/press Click Me button this method will be executed. Please change the method as shown below. Here we are assigning text for our txtMessage TextBlock to Hello World !

private void btnClickMe_Click(object sender, RoutedEventArgs e)
        {
            txtMessage.Text = "Hello World !";
        }

Running and Debugging the application:
The easiest way to run the application is to press F5 key on your keyboard. So please press it. If you have any errors it will show them in Error list. If there are no errors Phone Emulator will launch as shown in below image. Phone Emulator is a component that runs your Windows Phone 7 apps that simulates as if you are running the application in any one of the Windows Phone mobiles. This will be helpful in testing all most all features of Windows Phone 7 application features except few. Sometimes Phone Emulator will take sometime to load your application so please be patient.
















Now press Click Me button and you will notice the Hello World ! text will be displayed. You can even keep a break point as shown in below screen shot and notice that it hits the line and there by you can debug your code.















Setting start up page:
Instead of setting default MainPage.xaml as our startup page we can set our own page as startup page. Lets see how we can do this. Right click on MainPage.xaml in Solution Explorer and press delete as shown in below image
























Build your solution to make sure you donot have any errors.

Add a new Windows Phone Portrait Page as shown in below screen shots by right clicking on your project ( here HelloWorld) in Solution Explorer. Name the page as MyFirstXamlPage.xaml
























Now add a button and textblock as you did for MainPage.xaml. Please see above for more details.
Now open WMAppManifest.xaml as shown in below image and update below DefaultTask tag.

 <Tasks>
      <DefaultTask  Name ="_default" NavigationPage="MyFirstXamlPage.xaml"/>
    </Tasks>














Now press F5 and if everything goes fine the application will be launched in Phone Emulator.

Conclusion:
In this post we saw how to develop a simple Windows Phone 7 application and how to change the start up page.I hope you enjoyed reading this post as much as I did while writing it. Please feel free to let me know your valuable and constructive comments and suggestions which can help me to make this article better and improve my technical and written skills. Last but not the least please excuse me for my grammar and typos.

Thanks and have a nice and wonderful day.