Source code

Introduction

This is the first half of a tutorial on making Windows 8 apps. The goal is to learn how to use Visual Studio 2012, the Windows 8 APIs and the basic tools that they provides. The approach will be to make two simple apps from scratch. In doing so, we will cover some of the basic tools needed to make an interactive user interface. In the first part, we will make a simple calculator and in the second part, we will make a note-taking app.

I will be using C#/XAML in this tutorial, but note that you can use C++/XAML, C++/DirectX11 or Javascript/HTML to make Windows 8 apps also.

Prerequisites

The first part of this tutorial is meant to be accessible for people with little to no programming experience. Readers with experience with Windows Form, Windows Phone, Silverlight, WPF development, or similar technologies may prefer to skip to the second part. Knowledge of C# is not required: a good portion of the code I write will be easy to read as English and the reader can simply copy any syntax that is more complex.

Naturally, basic knowledge of C# does help. For this purpose, I recommend following the tutorial on C# Station. Lessons 1-5, 7 and 10 should be sufficient in the scope of this tutorial. This is only one of many options; there are other excellent tutorials out there.

Having Windows 8 installed is a requirement for making Windows 8 apps. Students can obtain it for free on Dreamspark. The other requirement is to have either the full Visual Studio 2012 or Visual Studio 2012 Express for Windows 8 installed. Both contain the essential features for making apps. The express version can be downloaded for free and students may have access to the full version from their school, via the Dreamspark/MSDN AA.

Creating a new project

1) Start by opening Visual Studio. Visual Studio is an integrated development environment (IDE), which will provides a convenient way to compile code and design an interface visually with drag-and-drop, as well as many other features and tools.

2) Visual Studio comes with a "light" theme and a "dark" theme. In this tutorial, I will be using the "light" theme. You can change it in Menu > Tools > Options > Environment > General > Color Theme, depending on your tastes.

4) A working template is automatically created. A template is a working application that you can compile and run immediately by pressing F5, though it contains nothing at the moment.

The two files of interest are MainPage.xaml and MainPage.xaml.cs which are located in the Solution Explorer on the right, which is where you find every file contained in the project. The former is the XAML code for your interface. It works like HTML and allows you to specify the location and properties of things such as buttons, menus, etc. The latter is the actual code for your project - code that is used when you interact with the interface. Double-click on MainPage,xaml to open the editor for your interface.

5) Take a look at the Toolbox on the left of your screen (it might be on auto-collapse by default). It contains useful "controls", interface elements that are premade for you and will make your life much easier. Try dragging a button into your editor.

Note : Click on the image to see the full size.

6) When the button that you just placed in the interface is selected, you can see a list of its Properties on the right of the screen, under Solution Explorer. You can change color of button, the text inside it, the size of that text, etc. Let's do the following :

Change the Width to 200 and the Height to 150.

Change the Fontsize to 50.

Change the Content to "ADD".

Drag the button to the center of the screen.

7) Next we need to add another control that will display the answer of your calculation. TextBLOCK serves this purpose (not to be confused with TextBOX, which we will get to later). Drag a Textblock from the toolbox and place it under your button. You can play with its properties, increase its font size, etc. Name it OutputText.

8) Notice that, under the interface editor, you can see that code has automatically been added (it may look slightly different for you, depending on the properties you've changed) :

9) Double-click on the button in the interface editor. When you double-click on a control, it will create in the code editor a function that is called when the button is clicked. The following should have been created in your code (MainPage.xaml.cs) :

privatevoid Button_Click_1(object sender, RoutedEventArgs e)
{
}

An alternative option is to click on the lightning symbol on the top-right of the properties pane, next to the tool symbol. It will list every possible interaction the control supports, called "events". You can click on the empty space next to an event for Visual Studio to create the function for you.

Note that you should rely on Visual Studio to do it for you. If you simply copy the code in your editor, it may not work, because Visual Studio needs some additional code that I won't get into in this tutorial.

10) Before we create a calculator, let's test our button by making the overused cliche, "Hello World". Don't copy-paste the code below : type it yourself. Notice that as you are typing, Visual Studio suggests possible auto-completions. This feature is called Intellisense, which, in this case, brings up all the properties of a given object - OutputText.

11) You can now test your app. To do so, either press F5 or click on the green arrow button in the menu, which should say "Local Machine" (choosing simulator will open an emulator for a tablet that supports rotation changes, but we don't need that here). To exit your app, return to the desktop via Windows-D and terminate your app by pressing on the red square. If you don't, the app is still running and you cannot make code changes.

12) Now let's make a calculator. The user will need to enter two numbers. Drag two TextBOX from the toolbox to the editor, on top of your button. Name them Input1 and Input2. Change their properties, such as font size, if desired.

13) Finally, we will change the code for Button_Click_1. The user enters text in the two textboxes. We want to add numbers. So we will convert the input to numbers, add them, and convert it back to text again, using the build in "Convert" functions.

Going further...

We would expect additional features in a calculator. Subtraction, multiplication and division follow the same concepts as addition. It would be redundant in this tutorial to repeat the same steps - however, as an exercise, I would suggest trying to implement those.

We have only using some of the properties of controls, mainly location, size and fontsize. Can you play with the controls in the editor, change their properties and try to make the calculator look better?