Develop Your First Windows Store App (Hello World)

Before reading this article, please go through the following articles-

Introduction

In this article, we will start developing our first "hello world" program for the Windows Store.

After reading the articles listed above I hope it is not necessary to explain what Windows Store apps are. In this article, we will take a step-by-step look at the development of our first "hello world" Windows Store application. To develop a Windows Store app, as I mentioned in my first article, I hope you are ready with the software and hardware required to develop a Windows Store app. So let's start developing our first Windows Store app.

Step 1

First, fire up your Visual Studio 2012 and then go to File -> New Project. Then the "New Project" dialog will open. In the "New Project" dialog in the left pane expand Installed-> Templates-> choose your language (Here I'm selecting Visual C#) -> Windows Store. After selecting Windows Store app on the left pane then look at the middle pane which shows the available Application Templates to develop a Windows Store application. For this demo, I'm selecting the "Blank App" template. After selecting the template to provide a name for the application in the name textbox as shown in the following image.

Step 2

Once the new project has been created using the Blank App template, go to Solution Explorer and see what Visual Studio has done for us. It is a blank app but some default files have added which are required to develop basic Windows Store applications. See the following image to get an idea of what kind of file has been added by Visual Studio in your application.

In the above image, you can see Visual Studio has added some default files when you created the new project. We will see what those files are and how to use them.

Assets

This is the folder in your Windows Store application project which contains some default images in it. This folder contains the Logo.png, SmallLogo.png, SplashScreen.png, and StoreLogo.png image files which each have one unique purpose; they are:

Logo.png To define a default logo for our Windows Store application.
SmallLogo.png- Small logo for our Windows Store application.
SplashScreen.png- The default application Splash-Screen which first opens when we launch our app.
StoreLogo.png- To denote our application in the Windows Store.

Common

This one additional important folder is created by Visual Studio for our Windows Store application. Normally this folder contains the common resources for our application like the style and other helper related classes.

App.xaml & App.xaml.cs

As a developer, we know the importance of the application's main entry point. This App.xaml page is the main entry point for our Windows Store application. All application related settings can be put in this file. If you are from WPF, Silverlight or Silverlight for Windows Phone then you already know what this XAML page is.

MainPage.xaml & MainPage.xaml.cs

This is the default start page of our Windows Store application written using XAML. When we launch our Windows Store application then after the Splash Screen this is the default page which opens. MainPage.xaml.cs is the code file for MainPage.xaml.

Package.appxmanifest

This is one of the very important files in a Windows Store application. In this file, we have application settings stored. I already explained this file in my previous article Windows Store Application Life-Cycle.

Step 3

Next, delete the MainPage.xaml file from your application because this page contains a minimum of XAML code and the code instantiates the page. This MainPage is the one Blank page only so delete it; we will add a new page template provided by Visual Studio to take advantage of the view and state management of our Windows Store application. After deleting the MainPage from your application, add a new Basic Page from the Add New Item command of Visual Studio and provide the name as MainPage.xaml. When you add the Basic page in that manner Visual Studio displays the dialog with a message that some resources are required to add this page to your application. To add those missing resource files say yes.

Step 4

Once you have added the basic page then open it in the code editor by double-clicking on it. The page is opened in the Visual Studio IDE in split mode by default which contains one side XAML code and another side design. Next, find the following code on your MainPage.xaml and replace the text with "hello world".

<x:String x:Key="AppName">My Application</x:String>
<x:String x:Key="AppName">Hello, World!</x:String>

Step 5

Now our first hello world application is ready; just run the application by clicking F5. You will see the output as in the following image.

Conclusion

In this article, we have seen how to create the hello world Windows Store application. In the next article, we will discuss more designing and styling your Windows Store app.