Windows Store App Development Tutorial - Part 3 : Developing your first Windows Store App in C# and XAML

Here we are going to see on how to develop your first Windows Store Application in XAML (Extensible Application Mark Up Language)  and Visual C# as the code base with a Blank Application template.

How to start developing your First Windows Store Application?

Open Visual Studio 2012 and create a New Windows Store project with Visual C# template and provide a valid Application Name as shown in the screen below. 

 

We can see the project is created now with the default files in the project solution as shown in the screen below. The default file and usage of the files are

• A manifest file (package.appxmanifest) that describes your app (its name, description, tile, start page, and so on) and lists the files that your app contains.
• A set of large and small logo images (logo.png and smalllogo.png)to display in the start screen.
• An image (storelogo.png) to represent your app in the Windows Store.
• A splash screen (splashscreen.png) to show when your app starts.
• XAML and code files for the app (App.xaml and App.xaml.cs/.vb) .
• A start page (MainPage.xaml) and an accompanying code file (MainPage.xaml.cs/.vb) that run when your app starts.

 

This is how the MainPage.xaml looks :

Let us modify the XAML code by changing the Title, some textbox and labels which are used to get the input and display some user result to the end user who are going to use this application as shown in the screen below.

Let us proceed to the next step to add the event handler that should be triggered on the Register button click event, to do so just double click on the button or go to the properties windows and select the event handler (Button Click Event). We can see the event assigned as shown in the screen below.

Write our output code to the button event, which basically gets the user entered mail address and gives the success result as shown in the screen above.

Let us run the application now by pressing the Run button at the top ribbon menu, where we need to select where we want to run the application. Run it on Local machine or remote machine or to the emulator. Let us run it locally and test it as shown in the screen below.

We can see the application loaded to the Metro Screen and the application will be opened as shown in the screen below.

So we are done with our first Metro Application and got the expected output as well. Now let us check how it appears in the Metro list by going to the Metro UI of the Windows 8 platform and we can see the application is listed as metro block as shown in the screen below.

Alternatively we can check with the simulator which is installed by default with the SDK, by selecting the Simulator option before executing the application as shown in the screen below.

We can now see the application is loaded in the simulator which basically triggers the local development environment with the application loaded as shown in the screen below.

.

Hope this tutorial will be useful to you, thank you