Covid-19 App In Xamarin Forms

Hello guys.

In this article, we are creating an app, and this is the first part of the Covid-19 App. In this app we have the following pages.

Global
Home
Covid-19 Search Countries
About us
CovidTabbedPage

Idea: During the COVID pandemic situation all over the world, I got an idea to develop an app which tracks records of the cases by counties and also show safety measures.

In this article, we have a COVID-19 App Global Page and Home Page, In the home page, we add a carousel view and cell view for showing the COVID-19 global data.

I am not going to describe the basic project setup steps here.

So let's design......

Global

In this Global page, we add one carousel and show the global data of COVID-19 like Total Cases, Total Recovery, Total Deaths and Total Active.

GlobalReport.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Covid19.Views.GlobalReport"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:customcontrols="clr-namespace:Covid19.CustomControls"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:helper="clr-namespace:Covid19.Helper"
xmlns:local="clr-namespace:Covid19"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pancakeview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows"
rainbows:DebugRainbow.ShowColors="False"
BackgroundColor="White"
Visual="Material"
mc:Ignorable="d">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="1"
Grid.Column="0"
Margin="10,0,0,0"
FontFamily="OpenSansBold"
FontSize="20"
Text="Covid-19" />
<Grid Grid.Row="2" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="0.35*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<CarouselView
HorizontalOptions="FillAndExpand"
IndicatorView="indicatorView"
ItemsSource="{Binding CarouselList}"
VerticalOptions="CenterAndExpand">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout
Padding="0"
HorizontalOptions="Center"
Spacing="0"
VerticalOptions="Center">
<Frame
Margin="20"
Padding="0"
BackgroundColor="Red"
BorderColor="White"
CornerRadius="25"
HasShadow="true"
HeightRequest="120"
Visual="Material">
<Image Aspect="AspectFill" Source="{Binding .}" />
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<!--<Frame
Padding="3"
BackgroundColor="#999FBF"
CornerRadius="15"
HorizontalOptions="Center"
VerticalOptions="Center">-->
<IndicatorView
x:Name="indicatorView"
HorizontalOptions="Center"
IndicatorColor="#999FBF"
IndicatorsShape="Circle"
SelectedIndicatorColor="#4C79FF"
VerticalOptions="Start" />
</StackLayout>
<ScrollView Grid.Row="1" Grid.Column="0">
<Grid Padding="10" RowSpacing="15">
<Grid.RowDefinitions>
<RowDefinition Height="{OnPlatform Android=85, iOS=100}" />
<RowDefinition Height="{OnPlatform Android=85, iOS=100}" />
<RowDefinition Height="{OnPlatform Android=85, iOS=100}" />
<RowDefinition Height="{OnPlatform Android=85, iOS=100}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame
Grid.Row="0"
Grid.Column="0"
Padding="10,0"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10"
Visual="Material">
<Grid Padding="10" RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="6*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Cases"
TextColor="#EEA445" />
<ActivityIndicator
Grid.Row="1"
Grid.Column="0"
Margin="0,5"
HorizontalOptions="Start"
IsRunning="{Binding IsBussy}"
IsVisible="{Binding IsBussy}"
Color="#EEA445" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding GlobalCovid.cases, StringFormat='{0:N0}'}"
TextColor="#EEA445" />
<ImageButton
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Padding="10"
Aspect="AspectFit"
BackgroundColor="#FEDADC"
BorderColor="#EEA445"
BorderWidth="1"
CornerRadius="25"
HeightRequest="50"
HorizontalOptions="CenterAndExpand"
IsEnabled="False"
Source="{local:ImageResource Covid19.Resources.covid19.png}"
VerticalOptions="CenterAndExpand"
WidthRequest="50" />
</Grid>
</Frame>
<Frame
Grid.Row="1"
Grid.Column="0"
Padding="10,0"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10"
Visual="Material">
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="6*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Recovery"
TextColor="#1FD34E" />
<ActivityIndicator
Grid.Row="1"
Grid.Column="0"
Margin="0,5"
HorizontalOptions="Start"
IsRunning="{Binding IsBussy}"
IsVisible="{Binding IsBussy}"
Color="#1FD34E" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding GlobalCovid.recovered, StringFormat='{0:N0}'}"
TextColor="#1FD34E" />
<ImageButton
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Padding="10"
Aspect="AspectFit"
BackgroundColor="#D6F4DC"
BorderColor="#1FD34E"
BorderWidth="1"
CornerRadius="25"
HeightRequest="50"
HorizontalOptions="CenterAndExpand"
IsEnabled="False"
Source="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Heart},
Size=40,
Color='#21CF55'}"
VerticalOptions="CenterAndExpand"
WidthRequest="50" />
</Grid>
</Frame>
<Frame
Grid.Row="2"
Grid.Column="0"
Padding="10,0"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10"
Visual="Material">
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="6*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Deaths"
TextColor="#EF3936" />
<ActivityIndicator
Grid.Row="1"
Grid.Column="0"
Margin="0,5"
HorizontalOptions="Start"
IsRunning="{Binding IsBussy}"
IsVisible="{Binding IsBussy}"
Color="#EF3936" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding GlobalCovid.deaths, StringFormat='{0:N0}'}"
TextColor="#EF3936" />
<ImageButton
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Padding="15"
Aspect="AspectFit"
BackgroundColor="#FADEDA"
BorderColor="#EF3936"
BorderWidth="1"
CornerRadius="25"
HeightRequest="50"
HorizontalOptions="CenterAndExpand"
IsEnabled="False"
Source="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Close},
Size=40,
Color=Red}"
VerticalOptions="CenterAndExpand"
WidthRequest="50" />
</Grid>
</Frame>
<Frame
Grid.Row="3"
Grid.Column="0"
Padding="10,0"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10"
Visual="Material">
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="6*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Active"
TextColor="#0A7FF3" />
<ActivityIndicator
Grid.Row="1"
Grid.Column="0"
Margin="0,5"
HorizontalOptions="Start"
IsRunning="{Binding IsBussy}"
IsVisible="{Binding IsBussy}"
Color="#0A7FF3" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding GlobalCovid.active, StringFormat='{0:N0}'}"
TextColor="#0A7FF3" />
<ImageButton
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1"
Padding="10"
Aspect="AspectFit"
BackgroundColor="#CFE3FC"
BorderColor="#0A7FF3"
BorderWidth="1"
CornerRadius="25"
HeightRequest="50"
HorizontalOptions="CenterAndExpand"
IsEnabled="False"
Source="{local:ImageResource Covid19.Resources.active.png}"
VerticalOptions="CenterAndExpand"
WidthRequest="50" />
</Grid>
</Frame>
</Grid>
</ScrollView>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>

Now we are creating the ViewModel for the binding the data with a view.

GloalViewModel.cs

using Covid19.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Covid19.ViewModel
{
public class GloalViewModel:BaseViewModel
{
public GloalViewModel()
{
GetGlobalCoronaDataCommand.Execute(null);
CarouselList = new List<string>() { "darkcar01.png", "darkcar02.png", "darkcar03.png" };
}
#region Properties
private bool isbussy=false;
public bool IsBussy
{
get { return isbussy; }
set { isbussy = value; RaisePropertyChanged(() =>IsBussy); }
}
private List<string> carouselList;
public List<string> CarouselList
{
get { return carouselList; }
set { carouselList = value; RaisePropertyChanged(() => CarouselList); }
}
private CountryModel globalcovid;
public CountryModel GlobalCovid
{
get { return globalcovid; }
set { globalcovid = value; RaisePropertyChanged(() => GlobalCovid); }
}
private List<CountryModel> allcountry;
public List<CountryModel> AllCountry
{
get { return allcountry; }
set { allcountry = value; RaisePropertyChanged(() => AllCountry); }
}
private ObservableCollection<CountryModel> searchcountry;
public ObservableCollection<CountryModel> SearchCountry
{
get { return searchcountry; }
set { searchcountry = value; RaisePropertyChanged(() => SearchCountry); }
}
private List<CountryFlag> countryflags;
public List<CountryFlag> CountryFlags
{
get { return countryflags; }
set { countryflags = value;RaisePropertyChanged(()=>CountryFlags); }
}
#endregion
#region Commands
public Command GetGlobalCoronaDataCommand => new Command(async()=>await GetGlobalCoronaDataCommandExecution());
#endregion
#region CommandExecution
private async Task GetGlobalCoronaDataCommandExecution()
{
var current = Xamarin.Essentials.Connectivity.NetworkAccess;
if (current != Xamarin.Essentials.NetworkAccess.Internet)
UserDialogs.Instance.Alert("Please Check the internet connection", "Network Error", "OK");
else
{
IsBussy = true;
// UserDialogs.Instance.ShowLoading();
await Task.Delay(1000);
using (var client = new HttpClient())
{
try
{
client.BaseAddress = new Uri("https://coronavirus-19-api.herokuapp.com/");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
//GET Method
HttpResponseMessage result = await client.GetAsync("countries");
if (result.IsSuccessStatusCode)
{
var rawResult = result.Content.ReadAsStringAsync().Result;
AllCountry = JsonConvert.DeserializeObject<List<CountryModel>>(rawResult);
SearchCountry = new ObservableCollection<CountryModel>(AllCountry);
GlobalCovid = AllCountry.Where(e => e.country == "World").SingleOrDefault();
App.AppSetup.HomeViewModel.Country = AllCountry.Where(e => e.country == "India").SingleOrDefault();
IsBussy = false;
}
else
{
IsBussy = false;
UserDialogs.Instance.Alert("Internal server Error", "Server Error", "OK");
}
}
catch (Exception ex)
{
//UserDialogs.Instance.Alert("Internal Error", $"Internal Error {ex.Message}", "OK");
}
}
}
}
#endregion
}
}

Home Report

In this Home page, we add the redirecting button for the social app (MyGov Corona) and show the home country (India) data of COVID-19 like Total Cases, Total Recovery, Total Deaths and Total Active.

HomeReport.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Covid19.Views.HomeReport"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:customcontrols="clr-namespace:Covid19.CustomControls"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:helper="clr-namespace:Covid19.Helper"
xmlns:local="clr-namespace:Covid19"
xmlns:local1="clr-namespace:Covid19.CustomCells"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows"
rainbows:DebugRainbow.ShowColors="False"
BackgroundColor="White"
Visual="Material"
mc:Ignorable="d">
<ContentPage.Content>
<ScrollView>
<Grid Padding="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="0.45*" />
<RowDefinition Height="0.55*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="0"
Grid.Column="0"
Padding="35,15"
BackgroundColor="#473F97">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="6.5*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
FontFamily="OpenSansBold"
FontSize="25"
HorizontalOptions="StartAndExpand"
Text="Covid-19"
TextColor="White"
VerticalOptions="Center" />
<Button
Grid.Row="0"
Grid.Column="1"
BackgroundColor="White"
CornerRadius="25"
HorizontalOptions="EndAndExpand" ImageSource="https://www.countryflags.io/in/flat/64.png"
Text=" India "
TextColor="#473F97" />
</Grid>
<Grid
Grid.Row="2"
Grid.Column="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
FontFamily="OpenSansBold"
FontSize="25"
Text="What is Covid-19?"
TextColor="White" />
<Label
Grid.Row="1"
Grid.Column="0"
FontFamily="OpenSansRegular"
FontSize="15"
HorizontalOptions="StartAndExpand"
Text="COVID-19 is the infectious disease caused by the most recently discovered corona virus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019."
TextColor="White"
VerticalOptions="Center" />
</Grid>
<Grid
Grid.Row="3"
Grid.Column="0"
ColumnSpacing="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="52" />
</Grid.RowDefinitions>
<Button
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
Command="{Binding WhatsAppCommand}"
CornerRadius="{OnPlatform Android=25,
iOS=25}"
HorizontalOptions="EndAndExpand"
ImageSource="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Whatsapp},
Size=30,
Color='#4FCE5D'}" />
<Button
Grid.Row="0"
Grid.Column="1"
BackgroundColor="White"
Command="{Binding MessengerCommand}"
CornerRadius="25"
HorizontalOptions="EndAndExpand"
ImageSource="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.FacebookMessenger},
Size=30,
Color='#1B7ACD'}" />
<Button
Grid.Row="0"
Grid.Column="2"
BackgroundColor="White"
Command="{Binding TelegramCommand}"
CornerRadius="25"
HorizontalOptions="EndAndExpand"
ImageSource="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Telegram},
Size=30,
Color='#64B5F6'}" />
<Button
Grid.Row="0"
Grid.Column="3"
BackgroundColor="White"
Command="{Binding InstagramCommand}"
CornerRadius="25"
HorizontalOptions="EndAndExpand"
ImageSource="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Instagram},
Size=30,
Color='#E74265'}" />
<Button
Grid.Row="0"
Grid.Column="4"
BackgroundColor="White"
Command="{Binding FBCommand}"
CornerRadius="25"
HorizontalOptions="EndAndExpand"
ImageSource="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Facebook},
Size=30,
Color='#2E4780'}" />
</Grid>
</Grid>
<Grid
Grid.Row="1"
Grid.Column="0"
Padding="20"
ColumnSpacing="10"
HorizontalOptions="FillAndExpand"
RowSpacing="10"
VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<Frame
Grid.Row="0"
Grid.Column="0"
Padding="10"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10">
<StackLayout Padding="10" Spacing="0">
<Grid RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Cases"
TextColor="#EEA445" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding Country.cases, StringFormat='{0:N0}'}"
TextColor="#EEA445" />
</Grid>
<ImageButton
Padding="10"
Aspect="AspectFit"
BackgroundColor="#FEDADC"
BorderColor="#EEA445"
BorderWidth="1"
CornerRadius="{OnPlatform Android=25,
iOS=18}"
HeightRequest="35"
HorizontalOptions="End"
IsEnabled="False"
Source="{local:ImageResource Covid19.Resources.covid19.png}"
VerticalOptions="EndAndExpand"
WidthRequest="35" />
</StackLayout>
</Frame>
<Frame
Grid.Row="0"
Grid.Column="1"
Padding="10"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10">
<StackLayout Padding="5" Spacing="0">
<Grid RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Recover"
TextColor="#1FD34E" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding Country.recovered, StringFormat='{0:N0}'}"
TextColor="#1FD34E" />
</Grid>
<ImageButton
Padding="10"
Aspect="AspectFit"
BackgroundColor="#D6F4DC"
BorderColor="#1FD34E"
BorderWidth="1"
CornerRadius="{OnPlatform Android=25,
iOS=18}"
HeightRequest="35"
HorizontalOptions="End"
IsEnabled="False"
Source="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Heart},
Size=40,
Color='#21CF55'}"
VerticalOptions="EndAndExpand"
WidthRequest="35" />
</StackLayout>
</Frame>
<Frame
Grid.Row="1"
Grid.Column="0"
Padding="10"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10">
<StackLayout Padding="10" Spacing="0">
<Grid RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Total Deaths"
TextColor="#EF3936" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding Country.deaths, StringFormat='{0:N0}'}"
TextColor="#EF3936" />
</Grid>
<ImageButton
Padding="10"
Aspect="AspectFit"
BackgroundColor="#FADEDA"
BorderColor="#EF3936"
BorderWidth="1"
CornerRadius="{OnPlatform Android=25,
iOS=18}"
HeightRequest="35"
HorizontalOptions="End"
IsEnabled="False"
Source="{FontImage FontFamily=FontAwesome,
Glyph={x:Static helper:IconFont.Close},
Size=40,
Color=Red}"
VerticalOptions="EndAndExpand"
WidthRequest="35" />
</StackLayout>
</Frame>
<Frame
Grid.Row="1"
Grid.Column="1"
Padding="10"
BackgroundColor="White"
BorderColor="LightGray"
CornerRadius="10">
<StackLayout Padding="10" Spacing="0">
<Grid RowSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource SmallLabelStyle}"
Text="Active Cases"
TextColor="#0A7FF3" />
<Label
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource MediumLabelStyle}"
Text="{Binding Country.active, StringFormat='{0:N0}'}"
TextColor="#0A7FF3" />
</Grid>
<ImageButton
Padding="10"
Aspect="AspectFit"
BackgroundColor="#CFE3FC"
BorderColor="#0A7FF3"
BorderWidth="1"
CornerRadius="{OnPlatform Android=25,
iOS=18}"
HeightRequest="35"
HorizontalOptions="End"
IsEnabled="False"
Source="{local:ImageResource Covid19.Resources.active.png}"
VerticalOptions="EndAndExpand"
WidthRequest="35" />
</StackLayout>
</Frame>
</Grid>
</Grid>
</ScrollView>
</ContentPage.Content>
</ContentPage>

Now we are creating the ViewModel(HomeViewModel) and binding the data with a view.

HomeViewModel.cs

public class HomeViewModel:BaseViewModel
{
public HomeViewModel { }
#region Properties
private CountryModel country;
public CountryModel Country
{
get { return country; }
set {country = value; RaisePropertyChanged(() => Country); }
}
#endregion
#region Commands
public Command WhatsAppCommand => new Command(() => Device.OpenUri(new Uri("https://api.whatsapp.com/send?phone=919013353535")));
public Command TelegramCommand => new Command(() => Device.OpenUri(new Uri("tg://resolve?domain=MyGovCoronaNewsdesk")));
public Command InstagramCommand => new Command(() => Device.OpenUri(new Uri("instagram://user?username=mygovindia")));
public Command FBCommand => new Command(() => Device.OpenUri(new Uri("fb://group/224193992332793")));
public Command MessengerCommand => new Command(() => Device.OpenUri(new Uri("http://m.me/MyGovIndia")));
#endregion
}

That's it for this article, we will cover more in the next article.

If you want to see part 2 click here.