Revision as of 09:46, 23 January 2013

This article explains how to ...

Introduction

This tutorial explains how to use Visual Studio 2010 ( or any other version to good extent) for creating a windows phone app. This is a step by step guide with necessary screen shots

How to...

• Start Visual Studio 2010
• Select File -> New -> Project
• Select Application type as Windows Phone Application
• Set Location and App Name and click Ok

• In next step select Windows Phone OS version as 7.1 (WP Mango)
• Wait for project to be created

• Observe various options of Visual Studio 2010 as shown in figure below

• Next, try clicking on various parts on page and see which XAML tag gets highlighted.
• Each component on page has corresponding XAML tag
• Selecting a section
• Select properties from context menu You can see properties of each control

• Next, Select “Page Name” TextBlock control
• Delete it
• Goto ToolBox and drag three controls to page
• A TextBlock, a TextBox and a Button,
• Use anchors to position controls relatively

• Each control has corresponding class and a XAML tag
• Each control has a name
• Name property is used to access objects of the controls in the code
• Next step is to set name property of each object
• Set as follows
  • Select TextBox control
  • Right click on it and from menu select “Properties” (if properties window is not open)
  • Set “Name” property of TextBox to txtPIN
  • Select Button control
  • Set “Name” Property of Button to btnLogin

• Next, set titles of TextBlock and Button controls
  • Select TextBlock control
  • Change Text property to “Enter PIN”
  • Change FontSize property to 32
  • Select Button control
  • Change Content property to “Login”

• Final layout of controls on the page must look like the image
• Now press F5 and test App in Emulator

• Next, add a new page to project
• Go to Solution Explorer
• Right click on Project Name
• Click on add option from context menu and then New Item

• Select Windows Phone Portrait Page to add to the project
• You will have a new page in your project
• Link this page to the Button click event code of previous page
• Logic – If PIN entered is correct go to new page else show error
• Now, change the “Page Name “ text of the TextBlock to “Profile”

• Now, switch to MainPage of your app, see screen shot

• Double click now on Button control to add Event Handler code
• Once user clicks on Button, app verifies PIN entered in TextBox ‘
• If PIN is correct Navigate to second page
• Type the below given code in the handler function, press F5 to run it

Summary

This tutorial walks you through all the steps for a complete example using Visual Studion.