How to create a basic WP app using Visual Studio 2010

Jump to: navigation, search

This tutorial explains how to use Visual Studio 2010 ( or any other version to good extent) to create a basic Windows Phone app. It provides a step by step guide with necessary screen shots

Article Metadata

Article

Created: vdharankar (28 Dec 2012)

Last edited: hamishwillee (23 Jan 2013)

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