Arithmetic Operations In Xamarin Forms Application For Android And UWP

Before reading this article, please go through this article on How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform.

By reading this article, you can learn how to perform arithmetic operations in the Xamarin Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development. Also, you will be able to learn Button control, Label control and Entry control in the Xamarin Forms environment.

The important tools given below are required to develop UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (it is a free software available online).
3. Using Visual Studio 2015 Installer, enable Xamarin (Cross Platform Mobile development and C#/.NET while installing/modifying Visual Studio 2015.

Now, we can discuss step-by-step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamForArith) -> OK.



Step 2

Now, create project “XamForArith_Droid” …



Step 3

Choose the Target and minimum platform version for your Universal Windows Project and create project “XamForArith_UWP” ….



Step 4

Afterwards, Visual Studio creates 6 projects and displays getting started with XamarinPage. Now, we have to update the Xamarin Forms Reference for Portable Project and XamForArith_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 5

Add Xaml page for Arithmetic operations demo. Right click on XamForArith (Portable) project, select ADD-> NewItem and select ->CrossPlatform-> FormXamlPage-> give the relevant name.



Step 6

To perform arithmetic operations, add 2 Entries, 4 Buttons and 2 Labels in ArithOper.xaml.

<StackLayout>
    <Label x:Name="lblTitle" Text="Arithmetic Operation in Xamarin Forms " Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
    <Entry x:Name="entNo1" Placeholder="Enter the First Number " />
    <Entry x:Name="entNo2" Placeholder="Enter the Second Number " />
    <Label x:Name="lblResult" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
    <Button x:Name="btnAdd" Text="Addition" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnbtnAdd" />
    <Button x:Name="btnSub" Text="Subtraction" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnbtnSub" />
    <Button x:Name="btnMul" Text="Multiplication" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnbtnMul" />
    <Button x:Name="btnDiv" Text="Division" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnbtnDiv" />
</StackLayout>

Step 7

In ArithOper.xaml.cs, add the code, mentioned below, for the arithmetic operation,

void OnbtnAdd(object sender, EventArgs args) {
    lblResult.Text = "The added Value is: " + (int.Parse(entNo1.Text) + int.Parse(entNo2.Text));
}
void OnbtnSub(object sender, EventArgs args) {
    lblResult.Text = "The Subtracted Value is: " + (int.Parse(entNo1.Text) - int.Parse(entNo2.Text));
}
void OnbtnMul(object sender, EventArgs args) {
    lblResult.Text = "The Multiplied Value is: " + (int.Parse(entNo1.Text) * int.Parse(entNo2.Text));
}

void OnbtnDiv(object sender, EventArgs args) {
        lblResult.Text = "The Divided Value is: " + (int.Parse(entNo1.Text) / int.Parse(entNo2.Text));
    } // This is just a sample script. Paste your real code (javascript or HTML) here.

if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

Step 8

Open (double click) the file App.cs in the Solution Explorer-> XamForArith(portable) and set the Root page.



Step 9

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamForArith.Droid and XamForArith.UWP (universal Windows).



Step 10

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck all the Build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP.



Step 11

Deploy your app in the local machine.



The output of the XamForArith app is given below.



Summary

Now, you have successfully created and tested your arithmetic operations in Xamarin Forms Application in Cross Platform Application, using Visual C# and Xamarin.