[Tutorial] Getting Started With Windows 8 Metro App Development using Microsoft Visual Studios 2012

Imagine , browsing  internet  using an app  made  by you , or  watching  a  video by a  Media Player you’ve made. Sounds  adorable, But most of the people  think  like “Oh, No!! create an app?? How?? Am lack in  touch with programming, and how can I make a working application?? “. As an answer , Microsoft has came up with one of the most User-Interface as well as User friendly  tool called “MICROSOFT   VISUAL  STUDIO  EXPRESS” with  WINDOWS 8. One of the coolest feature of  Visual Studio is that it  provides a Designer view  for the programmer so that  he/she  can  decide  what all elements should  be placed and where it should be placed. All of the above , More than  coding and knowledge in programming, Visual Studio demands  Logic and  skill in creating something which will treat someone’s  eyes and mind.

Let’s Start Development

In order to get a fair idea about Windows 8 Metro App Development. Let’s start with a simple “Hello World” application. Here we will be discussing about an app which reads data(For Example: a person’s name) from and text box and displays it with a message “Hello <name>“.

  •  start Microsoft Visual studio and click on “New Project“.
  • Click  on “Visual C#” And select a “Blank App(XAML)” from “Windows Store” template.
  • Name it as “HelloWorld” and hit “OK”

Now  you will get directed to a working platform. You will see some windows named  Toolbox(left side)( Contains all working elements), Solution Explorer(Right Side) (Contains all codes and classes), Property window( Defines the property of all elements used in app) . So go to Solution Explorer  and here “Double Click” on  MainPage.XAML .It will show a designer window where our work starts. Now we’ve  loaded a Blank page template. Starts working on this Blank Page template is not a proper method. So, let’s choose a “Basic Page” for our first application. To Start with a Basic Page

  • Right  click on  MainPage.XAML  and select DELETE.
  • Now go to  PROJECT (top Menu) and Select  Add New Item.
  • Choose a “Windows Store” C# template  “BASIC PAGE” type.
  • And name it as “MainPage.XAML“.
    (Ps: Remember if you leave the name as “BasicPage1.XAML” ,The project won’t work)

After Clicking OK it will show a confirmation message  asking “add missing files“. Just click YES.

  • Now double click on “MainPage.XAML” In Solution Explorer, Then it will show a window with the following message “Build the Project to update Design view.”
  • Just go to BUILD(top menu) and click “Build Solution” or just press F7 Button.
  • Wait for the solution to be build , then click on “MainPage.XAML” it will show a Basic Page View As follows:

So let’s start adding our elements. Here we need two TextBlocks, One TextBox and a Button. The purpose of these elements will be discussing on the way.

  1. TextBlocks: Used for displaying Texts; for example name, item specification etc.
    • As discussed above we need two TextBlocks, One for Label and one for Output message display. So drag and drop two Textblocks from Toolbox(you can decide the height and length manually by dragging it in corner)
    • Click on one TextBlock then it will show a property bar on right side. Go there and name the  Block as “Label” with Common Text “NAME” and  Text  Size =20.This block notifies  the user to enter a name.

  • For the next TextBlock name as “OutputBlock” with Text size=48. Remember we’re  using this block to display entered name with “Hello” message. So here leave the Content Text blank. Make Sure that this Block is large enough to display   48px  text.

2. TextBox: Used for giving input.

  • Drag A “TextBox” from Toolbox and drop it near the “Label” Block
  • Name it as “InputBox” with Text Size = 24 And leave the Common Type Blank. As we don’t require any pre-defined contents in it.

3. Button: For implementing Click Events. ie, It passes values from input section to the program.

  • Drag a Button and drop it near “TextBox
  • Name it as “Submit” with Content “Submit”. Now the designer will look like this (try to align elements in this manner)

We’ll have to define a “Click_Event” for the “Submit” button. Means, what should we get as output when we click on button while the app is running.

  • Double click on “Submit” button on designer panel. Then visual studio will automatically create a Click Event for button which will lead to a “MainPage.xaml.cs” page
  • Add the following code in between the parenthesis of   “Submit_Click” event

OutputBlock.Text = “Hello ” + InputBox.Text + ” !”;

Means, the text the we’re going to display at output is the text  Which we’ve  typed and with a Pre-Hello message. Now The MainPage.xaml.cs  code will look like

We’ve created our first windows 8 app. To Test our application, click on the “Local Machine” Button (top ; Green triangle) Or Press F5.  Now you will see a message on bottom left corner “Build Started . .Deploy Started . .Deploy Succeeded” . This shows our app has debugged successfully. Now it will show a default splash screen with a default logo and our first app is now ready to Test. Enter some random name and test your First “Hello World ” Application.

By default we’ll get a “Dark” Theme. If you want to switch to a new “Light” Theme, add the following code on header of  “App.XAML”. Add the following code


  • And after changing some style property of “OutputBlock”. ie,
  • Click on “OutputBlock” and in the property menu select “BRUSH” property and choose a color for your Output Message. Run the program again. Now your app will look like this.

This is all about creating your first Windows 8 metro app. For more metro app tutorials stay connected with Techomag.

Windows 8 Metro App Tutorial[Hello World]