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>

In the above XAML code, we create a Grid Layout by writing Grid in tags. Then, we apply padding on the layout for 20; i.e., when we create any element in the grid layout the text of those elements are moved to 20 value to the element of it; i.e., if we create a button and enter any text then, that text will be placed after 20 values from each side of the button. We then create Rows and Columns in the layout.

Grid.RowDefinitions is used to declare that we want to create a row and similarly, Grid.ColumnDefinitions is used to create columns in the layout. Now, we use RowDefinition for creating a row i.e., if we want to create 4 rows then we declare RowDefinition 4 times. Similarly, if we want to create 10 columns then, we declare ColumnDefinition 10 times. We can adjust the height of the rows and the width of the columns.

After declaring the required rows and columns we declare our required elements for the application. Now, we want to place those elements in the required rows and columns then we define the required row and column with Grid. The row is used to display the Row and Grid. Column is used to display the Column.

Step 8. Now, open your MainPage.xaml.cs for writing the C# code of your application.

C# Code

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;
}

Step 9. Then, on your portable file click on the build option to build your app.

Step 10. Then, select the type of platform you want to run your application.

Conclusion

Now, we have created a simple calculator application using Xamarin.Forms with Grid Layout.