×
Namespaces

Variants
Actions
Revision as of 10:25, 23 January 2013 by hamishwillee (Talk | contribs)

How to create a basic WP app using Visual Studio 2010

From Nokia Developer 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
Compatibility
Platform(s):
Windows Phone 7.5
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
    T3im1.png
  • In next step select Windows Phone OS version as 7.1 (WP Mango)
  • Wait for project to be created
    T3im2.png
  • Observe various options of Visual Studio 2010 as shown in figure below
    T3im3.png
  • 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
    T3im4.png
  • 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
    T3im5.png
  • 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”
      T3im6.png
  • Final layout of controls on the page must look like the image
  • Now press F5 and test App in Emulator
    T3im7.png
  • 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
    T3im8.png
  • 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”
    T3im9.png
  • Now, switch to MainPage of your app, see screen shot
    T3im10.png
  • 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
    T3im11.png


Summary

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

416 page views in the last 30 days.
×