Revision as of 17:23, 28 December 2012 by vdharankar (Talk | contribs)

How to create a basic WP app using Visual Studio 2010

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to ...

WP Metro Icon Tools.png
SignpostIcon WP7 70px.png
WP Metro Icon Baby.png
Article Metadata
Windows Phone 7.5
Created: (23 Jan 2013)
Last edited: vdharankar (28 Dec 2012)


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


Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

Add categories below using category selector.

425 page views in the last 30 days.