First Windows Store App for Beginners

Hi.

If you are passionate about technology & working under the great worldwide hood Microsoft, then you are at the right place to start with.

In this blog, you are going to get introduced to the Windows App Development. There are two types of App Development - one is Windows Store App Development & another is Windows Phone Store App Development. In this blog, Windows Store App Development will be our main concern.

Now first question will arise to your mind, what are the pre-requisites for developing & deploying store apps? You will need:

1. Windows 8 or Windows 8.1 operating system

2. Visual Studio 2012 or Visual Studio 2013

3. Microsoft Account

4. Windows Developer Account

Windows 8 users should use Visual Studio 2012 & Windows 8.1 users should use Visual Studio 2013. The vice-versa will not be working. But try to prefer Windows 8.1 operating system along with Visual Studio 2013. Now about the programming language required here. If you are accustomed with basic programming languages like C or C++ or Java or Visual Basic or HTML, JavaScript & CSS, etc., then it will be more helpful for you but even if you don't, there's nothing to worry. Visual Studio has been designed in such a way that anyone can start developing apps in a matter of time, even without basic knowledge. Here, we will work with Visual C#. There's nothing to be afraid about it. It's very simple, much similar to Java & C++.

Now let’s get to work.

At first, install the Visual Studio 2013 Professional Update 3 & run it. It will ask you for registering this product. Click the “Get Key Online”. Login to your Microsoft account & you will get your key. If you don’t have one, then sign up for new account. Paste the key & click OK. Now go to File->New->Project.

 

Now select Visual C# template from the left pane & select Windows Apps. Then click Blank App (Windows) & give name to the project in the Name field like MyFirstApp & click OK. It will ask you for the Developer’s License & click I Agree. Make sure you are connected to internet. Then login to your Microsoft account. Once you login, you will get your Developer’s License for some period (may be 30 days or more). When the Developer’s License expires, make sure you renew it.

Then you will see something like this:

 

The window you are seeing here contain many things. To understand it, first close the tab App.xaml.cs. Then double-click MainPage.xaml file in the right pane named as Solution Explorer.



 

You might be thinking what is going on here? Let me explain it to you slowly & clearly. The upper right pane Solution Explorer is the window which shows all your components contained in your solution. Now what is solution? Solution is a module which encapsulates your app at one place. Here, “Solution ‘MyFirstApp’ (1 project)” is your solution with file extension “.sln”. “MyFirstApp (Windows 8.1)” is your project. Your project contains all the files that your app requires to execute. Solution is the top most & biggest module. A solution can contain multiple projects but not vice versa. Now coming to the MainPage.xaml, it is the page where your app design goes. XAML is the file extension of the design page. It stands for Extensively Advanced Markup Language. It is similar to XML, only more advanced. MainPage.xaml contains all your controls used to design the app. MainPage.xaml.cs is the page where you write your C# codes. The left pane is the Toolbox where all the controls are present. Just drag the controls from there to Design view of MainPage.xaml & drop. The middle upper pane shows the Design view of the MainPage.xaml & the lower pane shows the XAML code view of MainPage.xaml. You can design the MainPage from either or both views. The bottom right pane is the Properties Windows where you can view & edit the properties of each control used in your MainPage. The changes made in this window will also reflect in the XAML code view of that control. There’s another window Document Outline on the very left side of Toolbox which is minimized by default that you will need frequently for use. Click it & then click the Pin symbol beside the close symbol. You will see it will be docked in the bottom left pane. This window shows the controls used in the Page. That’s enough for you right now.

Now let’s head towards the coding part. You must have noticed that there are already some codes written in the code view of MainPage.xaml. These are the namespaces included by the Visual Studio itself to ease your work. These are similar to header files or packages or anything like that. You can see the same thing in the MainPage.xaml.cs by double-clicking it from the Solution Explorer. You don’t need to take stress on these matter at this moment. Find TextBlock control from the Toolbox & drag n drop it in the design view of MainPage.xaml. Right after this, you will see that a rectangular box has been added to your page written TextBlock. TextBlock is a control that helps you to display some text. It can’t take any input at the runtime. It is used only for display purpose. You will also observe that a code inside the Grid tag has been added to your code view of MainPage.xaml. Grid is another control which organises your design view. Whatever control you insert in the page, it will insert inside the Grid tag as it is the main control where all your work will go. You’ll be able to see it in the Document Outline window. Now see the Properties window. Change the Text property in the Common header to “Enter Your Name”.

Now go to Text Header & set the text size to 36 px.

Now go to the Toolbox & again drag n drop TextBox control just below the TextBlock.

Now go to the Properties window again & type textBox1 in the Name field. This represents that you’re naming the control. In the Text property inside the Common header, click the small square box & select Reset.

Change the text size to 24 px. Now add a Button control & name it clickButton. Set the Content property to “Click” inside the Common header.

Now click the Thunder symbol in the Properties window of the clickButton control. This symbol signifies the event handlers. Event handlers are those events which are fired when accomplishing any specific activity. For example, here you want that whenever click the Click button, the app will show you a greeting message. This Click event of clickButton is an event handler which is fired when the button is clicked. So after clicking the Thunder symbol, double click in the blank field next to Click event.

Now it will open the MainPage.xaml.cs file. Here you will see that a method named clickButton_Click has been automatically created. It has private access specifier, void return type & some parameters are passed as argument. You don’t need to bother about those things right now.

Now, inside the method, type MessageDialog. MessageDialog is special class which helps to show a message. You will see, it is underlined in red colour along with a small blue coloured rectangle. What is happening here??

 MessageDialog is class which belongs to some other namespace that is not included in your current working file. So, how to include that namespace? Just put your cursor (not the mouse pointer) in the middle of MessageDialog & press “ Ctrl + . ”. It will show you two option to add the namespace. Just click Enter & you will observe that MessageDialog turns into Sky Blue colour.

 

 

Now type in the following code:

MessageDialog msg = new MessageDialog("Hello " + textBox1.Text);

await msg.ShowAsync();

And add “async” just after private access specifier.

Now click the double floppy button i.e. Save All button just below the Project Menu. Click the Green Play Button.

 

 

Congratulations!! You have successfully created your first Windows Store App.
Keep practicing more & become master of developing apps.
Till then enjoy coding. Stay Tuned for more!!