Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

How to create a basic WP app using Visual Studio 2010

From Wiki
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

WP Metro Icon Tools.png
SignpostIcon WP7 70px.png
WP Metro Icon Baby.png
Article Metadata
Windows Phone 7.5
Created: vdharankar (28 Dec 2012)
Last edited: hamishwillee (17 Jul 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


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

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]]

This page was last modified on 17 July 2013, at 06:42.
493 page views in the last 30 days.