How to create a basic WP app using Visual Studio 2010
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
Article Metadata
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
-
Summary
This tutorial walks you through all the steps for a complete example using Visual Studio.
Hamishwillee - Subedited/comments
Hi Vishal
I've subedited the article for wiki style - basically put the images in bullets so they indent and the whole thing looks better. I also shrunk the really wide images to 800px so they can be viewed on more or less standard zoom levels.
Can you confirm what SDK you used?
I like the way your images are "marked up" to show major parts of the IDE.
I'm not completely convinced this article is much more useful than just creating the template and drag-dropping bits as you would "naturally". You do some more stuff like adding navigation, but that is very superficially covered and only as "how to", not as "this is how it works". I guess this would work better in a workshop scenario, where you can also explain aspects of what is going on. However as that "other explanation" is missing, it seems a bit "thin".
I propose we rename to "How to create a basic WP app using Visual Studio 2010", because inevitably the UI will change. People can assess relevance at the time based against their current version.
Regards
Hamishhamishwillee 09:31, 23 January 2013 (EET)
Vdharankar - Agree !
I agree with the title thing i dont think i can edit it probably you can do that . I thought this will work as real tutorial than the 'this is how it works' kind of thing as for that MSDN does a lot. I believe the beginners need quick guide in order to get started and this tutorial does exactly same.
ThanksVishal Dharankar 19:58, 23 January 2013 (EET)
Hamishwillee - Moved
Hi Vishal
I've moved the topic now.
I don't disagree that there is value in real tutorials, or that this to some extent this does do what you intend! I do think you should be even more specific in the introduction about the kind of basic application you are creating/what you are showing (e.g. basic view switching, setting app title, drag'n'drop addition of labels, text boxes and other basic controls). Ideally the title should also show this - because obviously there are millions of possible "basic" apps you could create.
The bigger question is whether there are already similar tutorials on MSDN or in DevCenter. If so then we shouldn't attempt to write our own unless we can do better in some tangible way. I haven't checked, but you should :-) The reason is that duplication is both unnecessary, and means that potentially a developer might find an average article here instead of a really great one on MSDN - and that doesn't help anyone.
Lastly, in your overview doc you explain why you created the article (for a workshop) and I think that context is useful in this document. It tells people not to expect deep explanation, but that in a workshop environment there would be more background.
Your thoughts on this welcomed.
regards
Hamishhamishwillee 07:13, 24 January 2013 (EET)