Developer's Academy: Basic Calculator WP 8.1 App

Saturday, 6 September 2014

Basic Calculator WP 8.1 App

Developing Basic Calculator Using XAML & C#

This article is a basic WP 8.1 App development tutorial for beginners who do not have any prior experience with developing WP 8.1 applications. In this article, i will develop a basic Calculator application that performs addition, subtraction, multiplication and division of two numbers passed in text boxes and then displays the result in the same text box. 

Following are the steps to develop the application:

Step 1: Open Visual Studio 2013

Step 2: Click File --> New --> Project

Step 3: Under C# --> Store Apps --> Windows Phone Apps --> Blank App (Windows Phone)

Step 4: Rename the application to Simple_Calculator and click OK

Step 5: From the right pane, click on MainPage.xaml

At the moment, the contents of the MainPage.xaml file are as follows:



Step 6: From the right pane, click on MainPage.xaml.cs

At the moment, the contents of the MainPage.xaml.cs file are as follows:



Step 7: Changes in MainPage.xaml

1) First we will add a Grid and then define Row Definitions and Column Definitions. Code is given below:

<Grid>

  <Grid.RowDefinitions>
    <RowDefinition Height="130"></RowDefinition>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="100"></RowDefinition>
    </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

</Grid>

2) Then we will add a textbox:

<TextBox x:Name="TextBox1" 
                 Grid.Row="0"
                 Grid.ColumnSpan="4"
                 FontFamily="Lucida Sans Unicode" 
                 FontSize="60" 
                 FontWeight="Bold"
                 VerticalAlignment="Center" 
                 HorizontalAlignment="Right"
                 TextAlignment="Right"
                 Width="400" 
                 Height="110" />

3) After adding a textbox, we will add the buttons:

<Button Grid.Row="3"
                Grid.Column="0"
                Click="one_click" 
                Style="{StaticResource ButtonStyle1}">

            <TextBlock Text="1" />
</Button>

<Button Grid.Row="3"
                Grid.Column="1"
                Click="two_click" 
                Style="{StaticResource ButtonStyle1}">

            <TextBlock Text="2" />
</Button>

<Button Grid.Row="3"
                Grid.Column="2"
                Click="three_click" 
                Style="{StaticResource ButtonStyle1}">

            <TextBlock Text="3" />
</Button>

...... similarly we will all the buttons.

4) After adding buttons, we will apply styles to them by using the Setter Property:

<UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Height" Value="110" />
            <Setter Property="Background" Value="#FF3A5AC9" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="60" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
        </Style>
</UserControl.Resources>

Step 8: Changes in MainPage.xaml.cs

Since we have created all the buttons, and their click events; now we will write C# code in those events.

First we will initialize some string, char and double objects:

string input = string.Empty;    // store user input
string op1 = string.Empty;      // store 1st operand
string op2 = string.Empty;      // store 2nd operand   
char operation;                 // character for operation
double result = 0.0;            // calculated result   

Now we will write code for the Add, Sub, Multiply and divide events:

private void Add_Click(object sender, RoutedEventArgs e)
        {
            op1 = input;
            operation = '+';
            input = string.Empty;
        }

private void Sub_Click(object sender, RoutedEventArgs e)
        {
            op1 = input;
            operation = '-';
            input = string.Empty;
        }

.... and so on.

For every numeric button event:

private void zero_click(object sender, RoutedEventArgs e)
        {
            this.TextBox1.Text = "";
            input += "0";
            this.TextBox1.Text += input;
        }

private void one_click(object sender, RoutedEventArgs e)
        {
            this.TextBox1.Text = "";
            input += "1";
            this.TextBox1.Text += input;
        }

.... and so on.

Code for equal_click button:

private void equal_click(object sender, RoutedEventArgs e)
        {
            op2 = input;
            double num1, num2;
            double.TryParse(op1, out num1);
            double.TryParse(op2, out num2);

            if (operation == '+')
            {
                result = num1 + num2;
                TextBox1.Text = result.ToString();
            }
            else if (operation == '-')
            {
                result = num1 - num2;
                TextBox1.Text = result.ToString();
            }
            else if (operation == '*')
            {
                result = num1 * num2;
                TextBox1.Text = result.ToString();
            }
            else if (operation == '/')
            {
                if (num2 != 0)
                {
                    result = num1 / num2;
                    TextBox1.Text = result.ToString();
                }
                else
                {
                    TextBox1.Text = "DIV/Zero!";
                }

            }
        }

Step 9: Run the program on WP 8.1 Emulator:




To download the complete project, click here !!

No comments:

Post a Comment