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