Click here to Skip to main content
Click here to Skip to main content

Making apps for Windows 8 Part I : A Simple Calculator

, 26 Nov 2012
Rate this:
Please Sign up or sign in to vote.
Tutorial on developing apps for windows 8

Source code  

Download Calculator.zip 

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. 

3) Create a new, blank project in File > New > Project ... > Templates > Visual C# > Windows Store > Blank App (XAML). Let's name it "Calculator". 

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) : 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="ADD" HorizontalAlignment="Left" Margin="590,302,0,0" VerticalAlignment="Top" Width="200" Height="150" FontSize="50"/>
    <TextBlock x:Name="OutputText" HorizontalAlignment="Left" Margin="590,478,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="43" Width="200" FontSize="30"/>
</Grid>   

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) :  

private void 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.

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    OutputText.Text = "Hello World!";
}   


 

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. 

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    OutputText.Text = Convert.ToString(Convert.ToInt32(Input1.Text) +
                Convert.ToInt32(Input2.Text));
}   


14) Run your app and watch the magic happen.  

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? 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Advecticity
Student
Canada Canada
Microsoft Student Partner at University of Waterloo

Comments and Discussions

 
GeneralMy vote of 4 PinprofessionalMarco Bertschi31-Jan-14 3:53 
QuestionGreat article PinmemberMember 964346928-Aug-13 16:09 
QuestionC++ implementation PinmemberKoen86613-Feb-13 13:01 
AnswerRe: C++ implementation PinmemberAdvecticity13-Feb-13 13:15 
GeneralMy vote of 1 PinmemberProgramFOX22-Dec-12 7:11 
GeneralRe: My vote of 1 [modified] PinmemberAdvecticity22-Dec-12 10:30 
QuestionDynamically change the content of textbox Pinmemberpvt.peter2-Nov-12 9:47 
AnswerRe: Dynamically change the content of textbox PinmemberAdvecticity2-Nov-12 10:00 
GeneralRe: Dynamically change the content of textbox Pinmemberpvt.peter2-Nov-12 21:39 
GeneralMy vote of 1 PinmemberMario Majčica29-Oct-12 1:17 
GeneralRe: My vote of 1 PinmemberAdvecticity29-Oct-12 2:41 
Hi Mario,
 
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?
SuggestionRe: My vote of 1 PinmemberMario Majčica29-Oct-12 4:08 
GeneralRe: My vote of 1 PinmemberAdvecticity29-Oct-12 6:06 
GeneralMy vote of 1 PinmemberGuirec Le Bars28-Oct-12 14:56 
GeneralMy vote of 1 PinmemberFaithcz28-Oct-12 11:36 
GeneralRe: My vote of 1 PinmemberAdvecticity28-Oct-12 11:46 
GeneralRe: My vote of 1 PinmemberGuirec Le Bars28-Oct-12 14:55 
GeneralRe: My vote of 1 PinmemberAdvecticity28-Oct-12 15:21 
GeneralRe: My vote of 1 PinmemberGuirec Le Bars28-Oct-12 16:47 
GeneralRe: My vote of 1 PinmemberAdvecticity28-Oct-12 17:00 
GeneralRe: My vote of 1 PinmemberGuirec Le Bars28-Oct-12 17:09 
GeneralRe: My vote of 1 PinmemberFaithcz28-Oct-12 22:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 27 Nov 2012
Article Copyright 2012 by Advecticity
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid