×
Namespaces

Variants
Actions
(Difference between revisions)

How to create a basic WP app using Visual Studio 2010

From Nokia Developer Wiki
Jump to: navigation, search
vdharankar (Talk | contribs)
(Vdharankar -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
Line 10: Line 10:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20121228
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Vdharankar]]
 
}}
 
}}
  
Line 45: Line 45:
 
[[File:T3im3.png]]
 
[[File:T3im3.png]]
  
* Next , try clicking on various parts on page and see which XAML tag gets highlighted.
+
* Next, try clicking on various parts on page and see which XAML tag gets highlighted.
 
* Each component on page has corresponding XAML tag  
 
* Each component on page has corresponding XAML tag  
 
* Selecting a section
 
* Selecting a section
Line 51: Line 51:
 
[[File:T3im4.png]]
 
[[File:T3im4.png]]
  
* Next , Select “Page Name” TextBlock control  
+
* Next, Select “Page Name” TextBlock control  
 
* Delete it
 
* Delete it
 
* Goto ToolBox and drag three controls to page  
 
* Goto ToolBox and drag three controls to page  
Line 94: Line 94:
 
[[File:T3im9.png]]
 
[[File:T3im9.png]]
  
* Now , switch to MainPage of your app , see screen shot
+
* Now, switch to MainPage of your app, see screen shot
 
[[File:T3im10.png]]
 
[[File:T3im10.png]]
  
Line 100: Line 100:
 
* Once user clicks on Button, app verifies PIN entered in TextBox ‘
 
* Once user clicks on Button, app verifies PIN entered in TextBox ‘
 
* If PIN is correct Navigate to second page
 
* If PIN is correct Navigate to second page
* Type the below given code in the handler function, press F5 to run it
+
* Type the below given code in the handler function, press F5 to run it
 
[[File:T3im11.png]]
 
[[File:T3im11.png]]
  

Revision as of 09:46, 23 January 2013

This article explains how to ...


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)

Contents

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

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 Studion.

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

371 page views in the last 30 days.