Creating Arithmetic Operation In Universal Windows Apps Development With XAML And Visual C#

Before reading this article, please go through the following article.

In this article, you will learn how to use Button Control, TextBlock control, and TextBox Control in Visual C# environment. Also, you will be able to develop a simple arithmetic calculation app in Universal Windows Apps development, using XAML and Visual C#.

The following important tools are required for developing a UWP application

  1. Windows 10 (Recommended).
  2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss the step by step App development.

Step 1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give it a suitable name (e.g., ArithmaticOper) ->OK.

Blank App

Step 2 : Choose the target and minimum platform version that your Windows Universal Application will support. App.xaml and MainPage.xaml files are created.

platform version

Step 3: Open (double click) the file MainPage.xaml in the Solution Explorer and choose design mode in the bottom of the page. Select the device and its scale as per your requirement. And, set the zoom size for your View.

zoom size

Step 4 : Click on the Toolbox tab in the left pane, to open the list of common XAML controls. Expand Common XAML Controls, and drag the required control to the middle of the design canvas based on your arithmetic operation.

arithmetic operation

Find below the table and controls required for this Arithmetic Operation App.

Control Name Name Property Text /Content Property Click Event Method
TextBlock tblTitle Arithmatic Operation -
TextBlock tblNo1 Number 1 -
TextBlock tblNo2 Number 2 -
TextBlock tblResult Result -
TextBox txtNo1 <empty> -
TextBox txtNo2 <empty> -
TextBox txtResult <empty> -
Button btnAdd Addition Addition
Button btnSub Subtraction Subtraction
Button btnMulti Multiplication Multiplication
Button btnDiv Division Division
Button btnClear Clear Clear

After dragging and dropping the TextBlock and TextBox control, you have to change their names and text properties.


Same process goes with Button control.


While adding an Event method in button control, ex., Click event for Addition operation,


Automatically, the Addition method is generated and we have to write the code here.

Addition operation

The Addition operation code is shown below:


The entire Arithmetic operation code is:


Final design of your project is:

Final Design

Note: Automatically, the following code will be generated in XAML code View while we are done in the design View.

  1. <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,10">  
  2.     <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="89,124,0,0" TextWrapping="Wrap" Text="Arithmatic operations" VerticalAlignment="Top" Width="165" FontWeight="Bold" />  
  3.     <TextBlock x:Name="tblNo1" HorizontalAlignment="Left" Margin="89,172,0,0" TextWrapping="Wrap" Text="Number 1 " VerticalAlignment="Top" />  
  4.     <TextBox x:Name="txtNo1" HorizontalAlignment="Left" Margin="168,168,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="32" Width="64" />  
  5.     <TextBlock x:Name="tblNo2" HorizontalAlignment="Left" Margin="89,216,0,0" TextWrapping="Wrap" Text="Number2" VerticalAlignment="Top" />  
  6.     <TextBox x:Name="txtNo2" HorizontalAlignment="Left" Margin="168,205,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />  
  7.     <TextBox x:Name="txtResult" HorizontalAlignment="Left" Margin="168,254,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="30" Width="64" />  
  8.     <TextBlock x:Name="tblResult" HorizontalAlignment="Left" Margin="89,266,0,0" TextWrapping="Wrap" Text="Result" VerticalAlignment="Top" />  
  9.     <Button x:Name="btnAdd" Content="Addition" HorizontalAlignment="Left" Margin="57,336,0,0" VerticalAlignment="Top" Width="130" Click="Addition" />  
  10.     <Button x:Name="btnSub" Content="Subtraction" HorizontalAlignment="Left" Margin="192,335,0,0" VerticalAlignment="Top" Click="Subtraction" />  
  11.     <Button x:Name="btnMulti" Content="Multiplication" HorizontalAlignment="Left" Margin="57,373,0,0" VerticalAlignment="Top" Width="130" Click="Multiplcation" />  
  12.     <Button x:Name="btnDiv" Content="Division" HorizontalAlignment="Left" Margin="192,373,0,0" VerticalAlignment="Top" Width="96" Click="Division" />  
  13.     <Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left" Margin="147,429,0,0" VerticalAlignment="Top" Click="Clear" />   
  14. </Grid>  
Step 9 : Deploy your app in local machine and see the output:



Now, you have successfully created and tested your ArithmaticOper App. Also, you have learned the use of Button Control, TextBlock control, TextBox control in Visual C# environment.