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

How to create a basic WP app using Visual Studio 2010

Jump to: navigation, search

This article explains how to ...


WP Metro Icon Tools.png
Article Metadata

Article
Created: (23 Jan 2013)
Last edited: vdharankar (28 Dec 2012)

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



Add categories below using category selector.

232 page views in the last 30 days.
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved