Creating a simple calculator in Expression Blend

Creating a simple calculator in Expression Blend

Hi Guys, in this article you will learn how to create a simple calculator in Expression Blend. It is as simple in designing as complex in logical coding. While designing a calculator the only thing to b e kept in mind is the general logic behind every button click and all the possibilities that arise to perform the actions of adding, multiplying, dividing and subtracting.

A few things that is to be kept in mind while coding for the calculations is :

1. Text is able to hold the value respective to the button clicked.
2. When a number of more than single digit is being used for calculation the text box should be capable of receiving the complete pack of all the digits of a single number i.e. if "1234" is to be entered the text box should hold all digits of 1234 rather than a single digit at a time.
3. When operator buttons( +,-,*,/) are pressed the text box should turn empty to hold next number.

That's pretty much enough to let the application run well. So lets start with the application. Follow the steps below.

Step 1 : Create a new WPF project and name it as "Creating a simple Calculator".

 

Step 2 : Now In order to give the calculator a better look select the window form the object and timeline palette then go to the appearance property and select the Window Style property to None. This removes the default tools and look of window to a simple one.

 

Step 3 : Now add buttons to the layout, for this go to the toolbox or assets and select button and drag it on the artboard. After adding the button go to the selection tool and re size the button according to your wish.

 

Step 4 : After resizing the button hold the alt button and drag the button to add more button to the artboard, this actually is the short way of copying the control. You can also select many buttons and hold alt button and copy all of them. Bring out the below arrangement of the buttons in your artboard to make it appear more like a calculator.

 

Step 5 : After adding the buttons you have to name the buttons for ease in reference. For this select the button and in the property window type the name of the button at the top of the property window in front of name keyword.

 

After naming the buttons give the look and feel to the buttons by editing the color, Gradient, Style, etc property of the buttons. I have set the properties to make the buttons look up like this :

 

Step 6 : Add text on all the buttons by double clicking on the buttons and typing in it the respective number on each button from 1 - 9 and 0. Also One more important thing is to add an Exit button to close the application as the window will now not contain any button to close the application so we have to manually create an exit button. For this add a button and name it as "Exit", then go to the Event property of the button and on the Click event type the name (whatever you like to) of the event and press Enter. The below Figure makes it more clear.

 

After you press Enter the code behind screen appears and cursor rests on a method which has the same name as that you typed in the click event. In this method write this lines, Here the method is Exitcalculator()  :

using System;

using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace creating_simple_calculator_in_blend
{
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        int i, j;
        double sum = 0.0;
        char sign;
        public MainWindow()
        {
            this.InitializeComponent();
            // Insert code required on object creation below this point.
        }
        private void Exitcalculator(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            this.Close();
        } 

    }

}

Step 7 : Now next task to add a textbox to hold the values for calculation. For this go to to toolbox or assets library and select a textbox and drag it on the artboard.

 

Step 8 :  Now We have to set some properties of the text box to make it behave properly as calculator. Go to the Layout property of the text box after selecting it, in the horizontalcontent alignment select Left button and in veticalcontent alignment select Center button. This sets the text in the text box to appear from the left and at the center of the text box space.

 

Step 9 : Now the important work start, that of adding functionality to the buttons. For this select button displaying "1" ( here I Have named it as bt1) and name the click event property name it as "bt1clicked"( since I have named the button as bt1 so bt1clicked and similarly for bt2 it is bt2clicked) or directly press enter in the click property, the code behind shows the click method of the button. In this method type the following line:

        private void btn1click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            tb.Text = tb.Text + System.Convert.ToString(1);
        }

Do the same for all the buttons displaying numbers from 0-9. Just change the number in the line " tb.Text = tb.Text + System.Convert.ToString(1);
" by the button number for example on the button 2 click type the code as

 tb.Text = tb.Text + System.Convert.ToString(2);

On button 3 click it is written as:

 tb.Text = tb.Text + System.Convert.ToString(3);

After adding the button click events to all the buttons You have to declare variables to hold the values for operation declare these variable at the top and within the class.

 

The variables :

           i   --------> It is an integer variable that holds the value of the text before the "+ , - , * , /" buttons are pressed.

           j  -------->  It is also an integer variable which holds the value after the "+ , - , * , /" buttons are pressed.

           sum ------> It is a Double type variable that holds the calculated value of operation and displays this calculated value on click of "="
                             button.

           sign ------> It is a char type variable and stores a special character on click of every "+ , - , * , /" button to know which operation is to

                             be performed on the calculator.

Step 10 : Now adding operator functionality. For this select the "+" button and on the click event method type the following lines. Do same for other operation button clicked :

 

Step 11 : The final task is to display the operation performed on the text box. For this on the "=" button click do the following code.

        private void btequal_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            //TODO: Add event handler implementation here.
            j = System.Convert.ToInt32(tb.Text);
            switch(sign)
                {
                   case 'p' : sum = i+j;
                              tb.Text = System.Convert.ToString(sum);
                              break;
                   case 'm' : sum = i-j;
                              tb.Text = System.Convert.ToString(sum);
                              break;
                   case 'k' : sum = i*j;
                              tb.Text = System.Convert.ToString(sum);
                              break;
                   case 'd' : sum = System.Convert.ToDouble(i)/System.Convert.ToDouble(j);
                              tb.Text = System.Convert.ToString(sum);
                              break;
                }
        }

Also add a clear button  and on its event set the text box value to null.

 

Output : The output of the coding and designing above is as follows :

On addition : Enter the First No.

Enter the Second Number

Press the + Operator button to perform addition

On Clear button click: The textbox value is cleared

Hope you would have learned how to make a simple calculator in Expression Blend.