Design Whatsapp Page With Grid Layout In Xamarin.Forms

Introduction

Xamarin.Forms is a mobile application framework for building User Interfaces (UI) and a cross-platform UI toolkit that allows developers to easily create native user interface layouts that can be shared across Android, iOS, and Windows Phone.

Xamarin.Forms new version has been published.

1. Stable version release: Xamarin.Forms 2.4.0.280

XAML

XAML stands for eXtensible Application Mark-Up Language. The XAML file describes the interface with all its elements, while the Code Behind handles all the events and has access to manipulate with the XAML controls.

Tools

I am using Windows operating system Windows 10 and my developing tools are Visual Studio 2017 with Xamarin installed in it. You can also develop Xamarin.Forms Applications in Visual Studio. The new Visual Studio tool 2019 has been released. Visual Studio 2019 features are focused on developer productivity and team collaboration.

C#

C# was designed by Anders Hejlsberg, and its development team is currently led by Mads Torgersen .C# has already been used for projects as diverse as dynamic Web sites, development tools, and even compilers. C# is a language created by Microsoft and submitted to the ECMA for Standardization. The most recent version is C# 7.3, which was released in 2018 alongside Visual Studio 2017 version 15.7.2.

Whatsapp page

Our page has the following components.

• Grid Layout
• Label
• Image

Grid Layout

In a Grid layout, we use different tags to design an app. The concept of grid layout rows and column is that we totally work in row and column. The next step is that we use the tag of row definition and set the height in it. After using the tag of column definition and setting the width in it, we need to use image tag and label tag, etc. In that, we use seven rows and three columns. We used the png image for icons. Then, we can design the WhatsApp call page.

Creating a Xamarin.Forms Project

Follow these steps to create a new application project.

1. Open visual studio. Go to File > New Project > Cross-platform and then select the cross-platform app (Xamarin.Forms).
   
2. On the next page, fix the settings as given below.
3. Blank app
4. Android and UWP
5. .NET Standard
6. and then, click OK.
   
7. Now, your project is created and ready for development.
   

Here, you see 3 projects created.

• Android project.
• iOS project
• Windows project

Now, open the mainpage.xaml and write some code in XAML, and design our front-end page.

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
        <RowDefinition Height="0.2*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.2*"></ColumnDefinition>
        <ColumnDefinition Width="0.6*"></ColumnDefinition>
        <ColumnDefinition Width="0.2*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Image Source="img.png" Grid.Row="0" Grid.Column="0" />
    <Label Text="Asadullah" Grid.Row="0" Grid.Column="1" />
    <Label Text="Today, 7:23 PM" TextColor="Gray" Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="au.png" Grid.Row="0" Grid.Column="2" />
    <Image Source="img.png" Grid.Row="1" Grid.Column="0" />
    <Label Text="Rehan ch" Grid.Row="1" Grid.Column="1" />
    <Label Text="Today, 5:49 PM" TextColor="Gray" Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="ui.png"  Grid.Row="1" Grid.Column="2" />
    <Image Source="img1.png" Grid.Row="2" Grid.Column="0" />
    <Label Text="Bilal" Grid.Row="2" Grid.Column="1" />
    <Label Text="Today, 6:29 AM" TextColor="gray" Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="ui.png" Grid.Row="2" Grid.Column="2" />
    <Image Source="img.png" Grid.Row="3" Grid.Column="0" />
    <Label Text="ammar" Grid.Row="3" Grid.Column="1" />
    <Label Text="Yesterday, 3:01 AM" TextColor="gray" Grid.Row="3" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="ui.png" Grid.Row="3" Grid.Column="2" />
    <Image Source="img2.png" Grid.Row="4" Grid.Column="0" />
    <Label Text="ch Usman" Grid.Row="4" Grid.Column="1" />
    <Label Text="January 3, 8:30 PM" TextColor="gray" Grid.Row="4" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="ui.png" Grid.Row="4" Grid.Column="2" />
    <Image Source="img2.png"  Grid.Row="5" Grid.Column="0" />
    <Label Text="umair mughal" Grid.Row="5" Grid.Column="1" />
    <Label Text="January 3, 8:28 PM" TextColor="gray" Grid.Row="5" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="ui.png" Grid.Row="5" Grid.Column="2" />
    <Image Source="img1.png" Grid.Row="6" Grid.Column="0" />
    <Label Text="Shabi" Grid.Row="6" Grid.Column="1" />
    <Label Text="today 9:48 PM" TextColor="gray" Grid.Row="6" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"></Label>
    <Image Source="au.png" Grid.Row="6" Grid.Column="2" />
</Grid>

Here, add the code given above to make this layout.

• Grid Layout
  The content page is used and the content page contains only one main element. Thus, we use Grid Layout in our content page.
• Grid layout
• Label With Text
• Image
  1. Label with text needs to be Name and needs to be time and day.
  2. Use an image to show the contact person.
• Refer to the screenshot given below.