×
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 - Fix categories)
 
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Silverlight]]
+
[[Category:MS Visual Studio]][[Category:Tools for Windows Phone‎]][[Category:Getting Started on Windows Phone]][[Category:Windows Phone 7.5]]
{{Abstract|This article explains how to ... }}  
+
{{Abstract|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
 
+
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 10: Line 9:
 
|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]]
 
}}
 
}}
  
== Introduction ==
+
== How to ==
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
 
* Start Visual Studio 2010
Line 36: Line 31:
 
* Select Application type as Windows Phone Application
 
* Select Application type as Windows Phone Application
 
* Set Location and App Name and click Ok
 
* Set Location and App Name and click Ok
[[File:T3im1.png]]
+
*: [[File:T3im1.png|none|800px]]
 
+
 
* In next step select Windows Phone OS version as 7.1 (WP Mango)
 
* In next step select Windows Phone OS version as 7.1 (WP Mango)
 
* Wait for project to be created
 
* Wait for project to be created
[[File:T3im2.png]]
+
*: [[File:T3im2.png]]
 
+
 
* Observe various options of Visual Studio 2010 as shown in figure below
 
* Observe various options of Visual Studio 2010 as shown in figure below
[[File:T3im3.png]]
+
*: [[File:T3im3.png|none|800px]]
 
+
* 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
 
* Select properties from context menu You can see properties of each control
 
* Select properties from context menu You can see properties of each control
[[File:T3im4.png]]
+
*: [[File:T3im4.png|800px]]
 
+
* 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  
 
* A TextBlock, a TextBox and a Button,  
 
* A TextBlock, a TextBox and a Button,  
 
* Use anchors to position controls relatively
 
* Use anchors to position controls relatively
[[File:T3im5.png]]
+
*: [[File:T3im5.png]]
 
+
 
* Each control has corresponding class and a XAML tag  
 
* Each control has corresponding class and a XAML tag  
 
* Each control has a name
 
* Each control has a name
Line 68: Line 58:
 
** Select Button control
 
** Select Button control
 
** Set “Name” Property of Button to btnLogin
 
** Set “Name” Property of Button to btnLogin
 
 
* Next, set titles of TextBlock and Button controls  
 
* Next, set titles of TextBlock and Button controls  
 
** Select TextBlock control
 
** Select TextBlock control
Line 75: Line 64:
 
** Select Button control
 
** Select Button control
 
** Change Content property to “Login”
 
** Change Content property to “Login”
[[File:T3im6.png]]
+
**: [[File:T3im6.png]]
 
+
 
* Final layout of controls on the page must look like the image
 
* Final layout of controls on the page must look like the image
 
* Now press F5 and test App in Emulator
 
* Now press F5 and test App in Emulator
[[File:T3im7.png]]
+
*: [[File:T3im7.png]]
 
+
 
* Next, add a new page to project  
 
* Next, add a new page to project  
 
* Go to Solution Explorer
 
* Go to Solution Explorer
 
* Right click on Project Name  
 
* Right click on Project Name  
 
* Click on add option from context menu and then New Item
 
* Click on add option from context menu and then New Item
[[File:T3im8.png]]
+
*: [[File:T3im8.png]]
 
+
 
* Select Windows Phone Portrait Page to add to the project
 
* Select Windows Phone Portrait Page to add to the project
 
* You will have a new page in your project
 
* You will have a new page in your project
Line 92: Line 78:
 
* Logic – If PIN entered is correct go to new page else show error
 
* 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, change the “Page Name “ text of the TextBlock to “Profile”
[[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]]
+
 
+
 
* Double click now on Button control to add Event Handler code  
 
* Double click now on Button control to add Event Handler code  
 
* 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]]
  
  
 
== Summary ==
 
== Summary ==
This tutorial walks you through all the steps for a complete example using Visual Studion.
+
This tutorial walks you through all the steps for a complete example using Visual Studio.
  
 
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}
 
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}

Latest revision as of 09:42, 17 July 2013

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 (17 Jul 2013)

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


[edit] Summary

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

[edit] 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 09:42.
360 page views in the last 30 days.