How to make a Simple Calculator in Windows Phone App.

In this Tutorial I am showing you how make a simple calculator. If you are new in windows/windows phone app development then it's specially for you.

If you don't make any app for Windows Phone then see my First Tutorial
So, let's start now.

Step 1:
   Open Microsoft Visual Studio 2013 and you will see this screen. Your may use different theme/color but the other things/contents are same.

Step 2:

Now Click on  File >> New >> Project

Now, You will see the Project Templates page. 
Here you can find different templates for the project you want to make..
We will use Visual C# template to make our app.

Step 3:
Now 
** select Template >> Visual C# >> Store Apps >> Windows Phone Apps
** Select Blank App (Windows Phone)
** change your project name as you want. I am giving my project name as "MyCalculator".
Now, Click on OK.

Step 4:
Now you will see almost like this view.
Here you will see a lot of coding in App.xaml.cs page. But don't worry about this. These are some built in code for you.

Now, we need to do something to go to the next step.
Click View >> Solution Explorer  
or press  Ctrl + Alt + L

Now, you can see the Solution Explorer 

Now, Doubble Click on - "MainPage.xaml"
You will see a virtual design Plate for Windows Phone app, XAML codes, and the ToolBox.
You can increase/decrease zoom level of the design plate as you want. I often use 50% zoom level.
If you don't see ToolBox then Click  -   View >> ToolBox.

Step 5:
Now,
Inside ToolBox you can see a lot of functions called Controls.
For this app we just need three controls Button , TextBlock and TextBox.

Now click on the Design Plate (Grid) and go to its Properties

If you do not find the layout named Properties then Click  WINDOW >> Reset Window Layout 

You can see the Properties layout here

Now click on the Design Plate (Grid) and go to its Properties

Go to Properties >> Brush 

and Design your App Background as you want.

Step 6:
Now, select TextBox from Toolbox and Drag it to the design plate and drop it.
Re-size it by dragging from its corner.

Now go to it's Properties.
Give a name to this controller. I give the name as "firstNumber".
Remove the text from Properties >> Common >> Text
Increase the font size from Properties >> Text . I increased it as 20 px.

Now, select TextBlock from Toolbox and Drag it to the design plate and drop it.
Re-size it by dragging from its corner.
Now go to it's Properties.
Edit the text from Properties >> Common >> Text  and save it as "Enter First Number"
 Increase the font size from Properties >> Text . I increased it as 24 px.

Similarly,
Add another TextBlock and a TextBox from Toolbox.
Give the Second TextBox controller name as "secondNumber".

Now add another TextBlock at the bottom of the Design plate (Grid).
Give its name as "resultBox".
Remove the text from Properties >> Common >> Text.
Increase the font size to 22 px - 24 px from Properties >> Text.

Step 7:
Now Click on the Button and drag it to Design Plate and drop it.
You can see there is a Button created on the Design Plate.
Now go to its Properties and change the button controller name as "addButton".
Design your Button from Properties >> Brush.
Change the content name as "+" from Properties >> Common >> Content.
Increase your Content font size from Properties >> Text .  

Now, Double Click on the Button that you created.

You can see " MainPage.xaml.cs* " page and some codes here.
You can see a Private function like-
private void addButton_Click(object sender, RoutedEventArgs e)
        {


        }

Here, addButton is the Button Controller name as we give it before.

Now, write down some code inside the function.

private void addButton_Click(object sender, RoutedEventArgs e)
        {
                double a = double.Parse(firstNumber.Text);
                double b = double.Parse(secondNumber.Text);
                double c = a + b;
                resultBox.Text = "Summation Result : \n  " + c.ToString();               
        }

Step 8:
Now Build your solution from BUILD >> Build Solution .
You can see the Build Result succeed if there is everything ok.

Now,   select your Emulator as you want.

Click on  DEBUG >> Start Debugging.    or press F5 from keyboard.

Wait for some moment. Because, a Virtual Emulator is creating and it needs a few time.

After starting the Emulator you have to input two numbers and then press on the "+" Button and then you can see the Result. 

You just made a Calculator to find the summation of two numbers.
But, if you enter something and that is not a number, then your app will be crashed.
So, we need to handle this exceptions.

Please, write down the code again with this formula - 

 private void addButton_Click(object sender, RoutedEventArgs e)
        {
           try
            {
                double a = double.Parse(firstNumber.Text);
                double b = double.Parse(secondNumber.Text);
                double c = a + b;
                resultBox.Text = "Summation Result : \n  " + c.ToString();               
             }
            catch
            {
                resultBox.Text = "There is Something Wrong in Input. ";
            }
 }

This is called Exception Handling.
Now,
Build again and Run your app.
If you enter string or something that is not number, then you can see "There is Something Wrong in Input. " as your output result.

Step 9:
Now, go to the " MainPage.xaml* " page.
Add another button as you do before.
Now go to its Properties and change the button controller name as "subButton".
Design your Button from Properties >> Brush.
Change the content name as "+" from Properties >> Common >> Content.
Increase your Content font size from Properties >> Text .

Now, Double Click on the Button that you created.
You can see " MainPage.xaml.cs* " page again.
You will see the subButton function here.

Now, copy this code and paste it inside the subButton function.

 try
            {
                double a = double.Parse(firstNumber.Text);
                double b = double.Parse(secondNumber.Text);
                double c = a - b;
                resultBox.Text = "Subtraction Result : \n  " + c.ToString();               
             }
            catch
            {
                resultBox.Text = "There is Something Wrong in Input. ";
            }

Step 10:
Again, go to the " MainPage.xaml* " page.
Add another button as you do before.
Now go to its Properties and change the button controller name as "multiButton".
Design your Button from Properties >> Brush.
Change the content name as " * " from Properties >> Common >> Content.
Increase your Content font size from Properties >> Text .

Now, Double Click on the Button that you created.
You can see " MainPage.xaml.cs* " page again.
You will see the multiButton function here.

Now, copy this code and paste it inside the multiButton function.

 try
            {
                double a = double.Parse(firstNumber.Text);
                double b = double.Parse(secondNumber.Text);
                double c = a * b;
                resultBox.Text = "Multiplication Result : \n  " + c.ToString();               
             }
            catch
            {
                resultBox.Text = "There is Something Wrong in Input. ";
            }

Step 11:
Again, go to the " MainPage.xaml* " page.
Add another button as you do before.
Now go to its Properties and change the button controller name as "divButton".
Design your Button from Properties >> Brush.
Change the content name as " / " from Properties >> Common >> Content.
Increase your Content font size from Properties >> Text .

Now, Double Click on the Button that you created.
You can see " MainPage.xaml.cs* " page again.
You will see the divButton function here.

Now, copy this code and paste it inside the divButton function.

try
            {
                double a = double.Parse(firstNumber.Text);
                double b = double.Parse(secondNumber.Text);
                double c = a / b;
                resultBox.Text = "Division Result : \n  " + c.ToString();               
             }
            catch
            {
                resultBox.Text = "There is Something Wrong in Input. ";
            }

Step 11:
Now, you've just finished your app.
Build again and Run your app.

You've just made a Calculator for Windows Phone. 
Now, try to bring some difference on it.

*** Thank You ***

*** ** ***

Read More