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

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

• Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

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.



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



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.



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.



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.



The Addition operation code is shown below:



The entire Arithmetic operation code is:



Final design of your project is:



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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,0,0,10">
    <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="89,124,0,0" TextWrapping="Wrap" Text="Arithmatic operations" VerticalAlignment="Top" Width="165" FontWeight="Bold" />
    <TextBlock x:Name="tblNo1" HorizontalAlignment="Left" Margin="89,172,0,0" TextWrapping="Wrap" Text="Number 1 " VerticalAlignment="Top" />
    <TextBox x:Name="txtNo1" HorizontalAlignment="Left" Margin="168,168,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="32" Width="64" />
    <TextBlock x:Name="tblNo2" HorizontalAlignment="Left" Margin="89,216,0,0" TextWrapping="Wrap" Text="Number2" VerticalAlignment="Top" />
    <TextBox x:Name="txtNo2" HorizontalAlignment="Left" Margin="168,205,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
    <TextBox x:Name="txtResult" HorizontalAlignment="Left" Margin="168,254,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="30" Width="64" />
    <TextBlock x:Name="tblResult" HorizontalAlignment="Left" Margin="89,266,0,0" TextWrapping="Wrap" Text="Result" VerticalAlignment="Top" />
    <Button x:Name="btnAdd" Content="Addition" HorizontalAlignment="Left" Margin="57,336,0,0" VerticalAlignment="Top" Width="130" Click="Addition" />
    <Button x:Name="btnSub" Content="Subtraction" HorizontalAlignment="Left" Margin="192,335,0,0" VerticalAlignment="Top" Click="Subtraction" />
    <Button x:Name="btnMulti" Content="Multiplication" HorizontalAlignment="Left" Margin="57,373,0,0" VerticalAlignment="Top" Width="130" Click="Multiplcation" />
    <Button x:Name="btnDiv" Content="Division" HorizontalAlignment="Left" Margin="192,373,0,0" VerticalAlignment="Top" Width="96" Click="Division" />
    <Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left" Margin="147,429,0,0" VerticalAlignment="Top" Click="Clear" />
</Grid>

Step 9 : Deploy your app in local machine and see the output:



Summary

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.