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?

About the Author

Comments and Discussions

It is certainly not the hardest piece of work, but it is a start.
What would I add?
Mentioning the differences for Win 8 / RT would be niece, and an exlpanation on how one can create an App running on both Windows 8 and Windows RT platforms, maybe even on Windows Phone 8.

The red wiggly lines indicate errors that you can view in the Error List pane at the bottom of Visual Studio (click View > Error List if you can't see it). In this case, similar to what you're saying, the function to convert integer to strings is different in C++. This link might help http://www.cplusplus.com/forum/beginner/7777/[^]

As I have stated in the beginning of the tutorial, it is meant for complete beginners. I certainly agree with you that creating a new project with Visual Studio is extremely obvious, but any written text needs some form of introduction. Furthermore, without being precise, a beginner may be confused as to what type of project to create.

I did not explain that line of code because it was an example of something automatically generated by Visual Studio. I could certainly elaborate on why VS generates that code and what a StaticResource is, but I believe that it would overload a beginner with unnecessary semantics. It is unfortunate that the nature of an writing an app involves a lot of boring verbose code (as opposed to some nice algorithm in say, Haskell or Scheme) but I thought it would be best to skip such details and focus on the overall idea (in this tutorial, how to create an interface via drag and drop).

If you have different approaches on teaching, I'd would appreciate hearing more about your opinions. Just keep in mind that something useful to you (an experienced programmer, according to your profile) will not be the same as something useful to a teenager with no prior experience, my target audience.

I have some questions about your post.
So, the first is, it is very good tutorial.
I would like to ask that, how to create the above plans.
So, i use your project (A Simple Calculator).
There are 2 textbox,
my plan is the next: if i write a number, example the 4 in the first textbox, it will appear the second textbox so that it is multiplied by a number, example 3, so the next number will be appear automatically in the second textbox: 12
How can i implement this method(s)?

There's a simple way to do this. First go to the properties pane, where you set the fontsize of the textbox. On the top-right corner, there's a lightning symbol. If you click on that, you get a list of "events" associated with that textbox. One of them is TextChanged. If you double-click on that, it will automatically create a function that will be called whenever the text in that textbox is changed, so you can put your calculations in there.

I understand you must be a busy person, but I'd really appreciate if you could be more specific. I'm sure you want the quality of Codeproject articles to be of high standard, but your initial comment won't help achieve that. Could I ask for a little bit more of your time?

Again, this article has the purpose of helping people with no knowledge of Visual Studio learn how to drag controls and use control properties. I'm not wasting people's time by implementing every calculator function and I believe it's best if they do it as an exercise anyway. If I really failed that badly at that specific goal, I need to know.

As for the source code, it's right there at the end. Perhaps I should make it more visible?

you are right. My comment was not constructive. I will try to correct this now. I read that you were trying to write for absolute beginners and I appreciate it. Still there are a couple of things that can make a difference between a good article and a poor one. On CP there is a guideline for structuring and writing articles Code Project Article FAQ[^]. I saw your other articles and they are quite different than this one. Some of the things I didn't like particularly about it is missing information. At example, you wrote: "The other requirement is to have either the full Visual Studio 2012 or Visual Studio 2012 Express for Windows 8 installed." Is it for really VS for Win 8? Can also be on W7. A link on where VS2012E can be downloded, some more infomation on this thing is what I expected.
Again you didn't followed the guidelines of CP. The source code download link should be on the top of the article.
But what I disliked most is the following:

There's many ways people learn. Some prefer learning all the theory about a technology and other prefer watching how the technology is used and figure out the theory on their own. I'm trying to cater to the later here : get the general idea first, then google stuff out and read msdn documentation.

Thank you for taking the time to comment. If it's not too much trouble, I'd appreciate more detailed feedback on what type of information you would recommend adding to this tutorial so that it can be more helpful. There's still plenty of time to edit this article.

" other prefer watching how the technology is used " That is the whole point I guess... Your article does not tell us about windows 8 technology.

Your article explains how to create a project in visual studio, drag a button control on the design surface and handle its click event... I suppose any .net developer knows how to do this : the procedure was the same with vs 2003 (the slight difference here is xaml vs winforms).

If you want to improve your article then you should focus on the specifics of developing for Win 8: the best practices, the challenges to face when coming from vs2010 and Win7, the traps to avoid, etc...

This tutorial, as stated in the beginning, is aimed at total beginners who have never used Visual Studio before (not beyond making a console program in C#). It would be confusing to them if I started with discussion about Windows 8 specifics. Part II of the tutorial uses more Windows 8 specific technologies, though it is still aimed at beginners.

In my daily life, I mainly deal with such beginners (students are university, especially freshmans). I was initially going to keep it on my personal blog - then I figured that I could help people outside of my university by posting it on Codeproject where it would come up more often on google searches.

So my understanding so far from these downvoting is that Codeproject is mainly for non-beginners and therefore, my article does not belong here? It's not like my article pretends to be useful for experienced programmers (does it?).

It is not that CP is not for beginners. I guess CP is for everyone...
To me your article content is not in-line with its title. Change the name to something like : "Develop your first application ever: part 1, create a solution with Visual Studio"

Then you could explain a bit about :
what is VS
where to download a trial version of VS
what (and what for) is a solution, a project, a main file, etc...

If your target audience is absolute beginners (ie: non-developers )then you have to explained them more about why they have to do such and such things.

If your target is so called 'developers' then your article will help nobody. Every 'developer' knows how to do that stuff.

Good suggestions. I can certainly make a revision with additional explanations for beginners. And make the declaration of target audience bold and easily visible - that way we'll avoid wasting anyone's time. Thanks for your time!

I agree with Guirec Le Bars. This is probably only badly chosen Title of the article.

Still, there are plenty of good or bad tutorials on how to become a .NET developer, how to use tools and how to start. You just mixed up things. Tell freshmen they need VS, learn C#/VB.NET syntax, XAML basics and let them google existing tutorials and then, they are ready to get some useful information about making Win 8 apps, their specifics and differences.

Therefore, I highly recommend revising your second article before I read it and get dissapointed once again. Win 8 apps designing is my interest of lately, so I want to read only good arcitles about them here on CP. Even if target audience are beginners.

I also recommend reading new MSDN about designing and developing Win 8 apps in case you are not completely familiar with this topic.