How To Create A Simple Calculator Using Grid Layout In Xamarin.Forms

Introduction

In this article, we will discuss how to create a simple calculator app using Grid Layout in Xamarin.Forms. So, let us dive into the article. The layout is the style of representing the elements in the applications. The different types of layouts available are,

• Stack Layout
• Grid Layout
• Relative Layout
• Absolute Layout and more.
  

In Grid Layout, elements are arranged in the form of rows (horizontal) and columns (vertical). One row can have any number of columns in it. Grid Layout is somewhat similar to Relative Layout. Now, let us see how to create a simple calculator using Grid Layout. The count of rows and columns starts from 0.

Prerequisites

• Windows10
• Visual Studio 2017 Community/ Professional/ Enterprise Edition (Anyone should be installed)
• Xamarin Package

Step 1. Open your Visual Studio 2017 Community Edition.

Step 2. Go to File -> New -> Project. Then, a new window will appear. Then, under Installed, select Visual C# -> Cross-Platform.

Step 3. On the right side of the window, select Mobile App (Xamarin. Forms). Then, give the name of the project and save it in your required location.

Click OK.

Step 4. Now, a new window will appear on your screen. Under the template, select Blank App.

Step 5. Select all platforms or your required platforms for executing your application. Then, select .NET Standard and click OK.

Step 6. Now, open Solution Explorer and select your project then, set your portable file as a startup project.

Step 7. Now, write the following XAML Code in your MainPage.xaml file.

XAML Code

<Grid Padding="20">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Label x:Name="Labelnum1" Text="Num1:" Grid.Row="0" Grid.Column="0" />
    <Entry x:Name="num1" Placeholder="Enter num1:" Grid.Row="0" Grid.Column="1" />
    <Label x:Name="Labelnum2" Text="num2:" Grid.Row="1" Grid.Column="0" />
    <Entry x:Name="num2" Placeholder="Enter num:" Grid.Row="1" Grid.Column="1" />
    <Label x:Name="Labelres" Text="Result is:" Grid.Row="2" Grid.Column="0" />
    <Label x:Name="res" Grid.Row="2" Grid.Column="1" />
    <Button x:Name="BtnAdd" Text="Addition" Grid.Row="3" Grid.Column="0" Clicked="BtnAdd_Clicked" />
    <Button x:Name="BtnSub" Text="Substraction" Grid.Row="3" Grid.Column="1" Clicked="BtnSub_Clicked" />
    <Button x:Name="BtnMul" Text="Multiplication" Grid.Row="4" Grid.Column="0" Clicked="BtnMul_Clicked" />
    <Button x:Name="BtnDiv" Text="Division" Grid.Row="4" Grid.Column="1" Clicked="BtnDiv_Clicked" />
    <Button x:Name="BtnRem" Text="Remainder" Grid.Row="5" Grid.Column="0" Clicked="BtnRem_Clicked" />
    <Button x:Name="BtnClr" Text="Clear" Grid.Row="5" Grid.Column="1" Clicked="BtnClr_Clicked" />
</Grid>

private void BtnAdd_Clicked(object sender, EventArgs e) {
    double a = Double.Parse(num1.Text);
    double b = Double.Parse(num2.Text);
    res.Text = (a + b).ToString();
}

private void BtnSub_Clicked(object sender, EventArgs e) {
    double a = Double.Parse(num1.Text);
    double b = Double.Parse(num2.Text);
    res.Text = (a - b).ToString();
}

private void BtnMul_Clicked(object sender, EventArgs e) {
    double a = Double.Parse(num1.Text);
    double b = Double.Parse(num2.Text);
    res.Text = (a * b).ToString();
}

private void BtnDiv_Clicked(object sender, EventArgs e) {
    double a = Double.Parse(num1.Text);
    double b = Double.Parse(num2.Text);
    res.Text = (a / b).ToString();
}

private void BtnRem_Clicked(object sender, EventArgs e) {
    double a = Double.Parse(num1.Text);
    double b = Double.Parse(num2.Text);
    res.Text = (a % b).ToString();
}

private void BtnClr_Clicked(object sender, EventArgs e) {
    num1.Text = String.Empty;
    num2.Text = String.Empty;
    res.Text = String.Empty;
}