Category: Windows 8 Metro

Your first Windows Store App

It is been a while Windows 8 is out, and being a techie, I was more than excited to use Windows 8. Yes, there are so many exciting features which include the Tiles, the Metro Interface! By the way I don’t think I am the only one who had a hard time getting used to the Start button as well as Settings button which is at the right pane or “Charm Bar!” 🙂

When overall UI is explored and observed, it was time to get into the actual Windows 8 App Development. Maybe it is my early days of development in Windows 8, but still, I found it interestingly amazing!

So, if the excitement is triggered above the limits, let us get started with your first app in Windows 8!

Prerequisites:

  • Microsoft Windows 8 (obviously!)
  • Microsoft Visual Studio 2012 with Developer License
    • Particularly, developer license is required to get the things going with Windows Store. It won’t allow you to develop any app unless you have the developer license.

So, when the prerequisites are finalized, let us develop the first “Hello World” app.

Steps to create your first Windows Store app:

  • Open Visual Studio 2012
  • Goto File Menu -> New -> Project..

You will be presented with the following screen

app1

Select Windows Store from Visual C#.

Out here, you have so many options for an app, for now, we will go for a Blank App (XAML)

  • Give a name for your app. Click Ok. You will be able to see a screen where App.xaml.cs is opened for you. This file, particularly, controls the whole operation of your app.
  • From the solution explorer, open the MainPage.xaml file. The following screen is displayed.

app2

As we have selected the blank app, you are able to see this blank “Slate”. You are able to design whatever you want from here.

  • Let us do some designing!From the toolbox, which is at the left pane, select a “Text Block”. If you’re an asp.net developer this is “label” for your understanding!  Drag and drop TextBlock.I always like to use the split view in Visual Studio, as you can see, if you’ve added the TextBlock, immediately changes in xaml code are also reflected. In quick succession, I assign the fontsize property to my TextBlock for making it appear a little big!

app3

  • So, in quick Succession, insert a button, which will be displaying a “Hello World” when clicked on it. The current TextBlock will be “My First Store App”.
  • Insert another TextBlock  and make it invisible.  So, finally you will be having the following screen.
    app4
  • Lets do some simple code.
    I just generate a click event for the button by double clicking on it, make another TextBlock visible to show our message, in the following code.
    One of the most crucial steps, which we often forget is to assign a TextBlock with “Name” property. Particularly, in Windows Store Apps, this particular step should not be missed.
    app5
  • The code:
    app6
    Note how the visibility property is used.
  • To see the result, click on the drop down arrow besides debug.
    app7
  • You can have a selection between a Simulator, Local Machine and Remote Machine.I prefer simulator. So, click on simulator to run your first app!It will build deploy and present you the app.First Screen:
    app8
    When clicked on “Click Me” button, you get presented with the following Screen
    app9

That’s the very first Hello World App you created for Windows Store!

Hope you liked it! 🙂

Advertisements