Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a Windows 8 Calculator app with XAML and CSharp

In this article, we will study the process of making a Windows 8 application (Calculator) using C#/XAML.

This article will teach us to use Visual Studio 12 which 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 , Windows 8 APIs and the basic tools that are provided by them. Before starting, we need to have Visual Studio 2012 express for Windows 8 installed. The step by step approach for making the application is as follows:

The first step is to start the process by opening Visual Studio. After opening the Visual Studio, we will get a coloured theme. It may be light or dark. The colour of the theme can be changed by the following process:

  • First step is to click the Menu.
  • Then click on tools. In tools, open Options.
  • Finally click on Environment, then general and at the last click on Color theme.

The second step is to create a new blank project. The process is as follows:

  • Firstly click on File. Then click on New.
  • After clicking New, click on Project and then Templates.
  • The last step is to click on Visual C#. After this click on Windows store and then Blank App (XAML).

Let us name the file as “Calculator”.

Shows the picture of dialog box opened in Step - 2

Figure 1: Shows the picture of dialog box opened in Step – 2

After this, a working template which is nothing but working application that can be compiled and run immediately by pressing F5, though it contains nothing at the moment is created automatically. In this, there will be two files, which are located in the Solution Explorer which is located on the right. They are as follows:

  • The first is the MainPage.xaml. It is the XAML code for the interface. It works like HTML and allows the user to specify the location and properties of things such as buttons, menus, etc.
  • The second file is MainPage.xaml.cs which is the actual code for the project. It is used when the user interacts with the interface.

In order to open the editor for the interface, we need to double click on the first file.

Then the next step is to check the Toolbox which is located on the left side of the screen. This toolbox contains useful "controls", interface elements that are premade for the user.

Shows the opened MainPage.xaml file

Figure 2: Shows the opened MainPage.xaml file

As the button is selected in the interface created by the user, there will be list of properties on the right of the screen under the Solution Explorer. The properties i.e., the colour of the button, the text inside it, the size of the text and many more can be changed. The changes made are as follows:

  • The first change is made in width and height which are changes to 200 and 150 respectively.
  • The font size is also changed to 50.
  • The last change is made in the content. It is changed to ADD.

The next step is to add a control which will display the outputs of the calculations that are made in the calculator. This purpose is served by using TextBLOCK. For this, we need to drag a textblock from the centre and place it under the button. The properties of this block can also be changed and it is named as Output Text.

Shows the picture for the TextBLOCK

Figure 3: Shows the picture for the TextBLOCK

Now under the interface editor, there will be code which is added automatically. The code varies for different users depending upon the changes that are made by them in the properties.

Listing 1: Shows the code under interface editor

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

After this, the user needs to click on the button in the interface editor. Clicking the button in the control, will create a function in the code editor.

Listing 2: Shows the code created in the code editor

private void Button_Click_1(object sender, RoutedEventArgs e)
{
 
}

Finally before creating the calculator, the user needs to check the button by making the overused cliche, ‘Hello World’. The code should not be copy-paste because if the code is written by the user then the Visual Studio suggests auto completion which is quite helpful in removing little errors. This feature is called Intellisense, which, in this case, brings up all the properties of a given object - OutputText.

Listing 3: Shows the code to bring up the properties

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

The application can be tested now. To do this, the user has two options which are as follows:

  • The first and the simplest option is to click F5.
  • The second is to click on the green arrow button in the menu which is named as Local Machine.

NOTE: To exit from the application and return to the desktop, we need to terminate the application by clicking on the red square. If this is not done, then the application is still running and the user cannot make code changes.

Now, let us make the calculator from the development which we have done till now. In order to do this, the user has to enter two numbers. Then, he/she has to drag the textbox from the toolbar to the editor and name it as Input -1 and Input – 2. The properties of these text boxes can be changed if required.

Shows the picture of two text boxes in the window

Figure 4: Shows the picture of two text boxes in the window

The last and the final step is to change the code for Button_Click_1. The user need to enter text in the two textboxes. If the user wants to add numbers, so he/she will convert the input to numbers, add them, and convert it back to text again, using the build in "Convert" functions.

Listing 4: Shows the code for convert functions

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

Finally, run the applications to make calculations!

Conclusion

In this article, we studies about the process of using Visual Studio 12 and Windows 8 APIs to create a calculator. This article also teaches us the basic concept for most of the Windows 8 applications.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login