Covid-19 App In Xamarin Forms

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.
  1. Global
  2. Home
  3. Covid-19 Search Countries
  4. About us
  5. 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
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage    
  3.     x:Class="Covid19.Views.GlobalReport"    
  4.     xmlns="http://xamarin.com/schemas/2014/forms"    
  5.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  6.     xmlns:customcontrols="clr-namespace:Covid19.CustomControls"    
  7.     xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  8.     xmlns:helper="clr-namespace:Covid19.Helper"    
  9.     xmlns:local="clr-namespace:Covid19"    
  10.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  11.     xmlns:pancakeview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"    
  12.     xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows"    
  13.     rainbows:DebugRainbow.ShowColors="False"    
  14.     BackgroundColor="White"    
  15.     Visual="Material"    
  16.     mc:Ignorable="d">    
  17.     <ContentPage.Content>    
  18.     
  19.         <Grid>    
  20.             <Grid.RowDefinitions>    
  21.                 <RowDefinition Height="25" />    
  22.                 <RowDefinition Height="25" />    
  23.                 <RowDefinition Height="*" />    
  24.             </Grid.RowDefinitions>    
  25.             <Grid.ColumnDefinitions>    
  26.                 <ColumnDefinition Width="*" />    
  27.             </Grid.ColumnDefinitions>    
  28.             <Label    
  29.                 Grid.Row="1"    
  30.                 Grid.Column="0"    
  31.                 Margin="10,0,0,0"    
  32.                 FontFamily="OpenSansBold"    
  33.                 FontSize="20"    
  34.                 Text="Covid-19" />     
  35.             <Grid Grid.Row="2" Grid.Column="0">    
  36.                 <Grid.RowDefinitions>    
  37.                     <RowDefinition Height="0.35*" />    
  38.                     <RowDefinition Height="*" />    
  39.                 </Grid.RowDefinitions>    
  40.                 <Grid.ColumnDefinitions>    
  41.                     <ColumnDefinition Width="*" />    
  42.                 </Grid.ColumnDefinitions>    
  43.                 <StackLayout    
  44.                     Grid.Row="0"    
  45.                     Grid.Column="0"    
  46.                     HorizontalOptions="CenterAndExpand"    
  47.                     VerticalOptions="CenterAndExpand">    
  48.                     <CarouselView    
  49.                         HorizontalOptions="FillAndExpand"    
  50.                         IndicatorView="indicatorView"    
  51.                         ItemsSource="{Binding CarouselList}"    
  52.                         VerticalOptions="CenterAndExpand">    
  53.                         <CarouselView.ItemTemplate>    
  54.                             <DataTemplate>    
  55.                                 <StackLayout    
  56.                                     Padding="0"    
  57.                                     HorizontalOptions="Center"    
  58.                                     Spacing="0"    
  59.                                     VerticalOptions="Center">    
  60.                                     <Frame    
  61.                                         Margin="20"    
  62.                                         Padding="0"    
  63.                                         BackgroundColor="Red"    
  64.                                         BorderColor="White"    
  65.                                         CornerRadius="25"    
  66.                                         HasShadow="true"    
  67.                                         HeightRequest="120"    
  68.                                         Visual="Material">    
  69.     
  70.                                         <Image Aspect="AspectFill" Source="{Binding .}" />    
  71.                                     </Frame>    
  72.                                 </StackLayout>    
  73.                             </DataTemplate>    
  74.                         </CarouselView.ItemTemplate>    
  75.                     </CarouselView>    
  76.                     <!--<Frame    
  77.                         Padding="3"    
  78.                         BackgroundColor="#999FBF"    
  79.                         CornerRadius="15"    
  80.                         HorizontalOptions="Center"    
  81.                         VerticalOptions="Center">-->    
  82.     
  83.                     <IndicatorView    
  84.                         x:Name="indicatorView"    
  85.                         HorizontalOptions="Center"    
  86.                         IndicatorColor="#999FBF"    
  87.                         IndicatorsShape="Circle"    
  88.                         SelectedIndicatorColor="#4C79FF"    
  89.                         VerticalOptions="Start" />    
  90.                     <!--</Frame>-->    
  91.                 </StackLayout>    
  92.     
  93.                 <ScrollView Grid.Row="1" Grid.Column="0">    
  94.                     <Grid Padding="10" RowSpacing="15">    
  95.                         <Grid.RowDefinitions>    
  96.                             <RowDefinition Height="{OnPlatform Android=85, iOS=100}" />    
  97.                             <RowDefinition Height="{OnPlatform Android=85, iOS=100}" />    
  98.                             <RowDefinition Height="{OnPlatform Android=85, iOS=100}" />    
  99.                             <RowDefinition Height="{OnPlatform Android=85, iOS=100}" />    
  100.                         </Grid.RowDefinitions>    
  101.                         <Grid.ColumnDefinitions>    
  102.                             <ColumnDefinition Width="*" />    
  103.                         </Grid.ColumnDefinitions>    
  104.                         <Frame    
  105.                             Grid.Row="0"    
  106.                             Grid.Column="0"    
  107.                             Padding="10,0"    
  108.                             BackgroundColor="White"    
  109.                             BorderColor="LightGray"    
  110.                             CornerRadius="10"    
  111.                             Visual="Material">    
  112.                             <Grid Padding="10" RowSpacing="5">    
  113.                                 <Grid.RowDefinitions>    
  114.                                     <RowDefinition Height="4*" />    
  115.                                     <RowDefinition Height="6*" />    
  116.                                 </Grid.RowDefinitions>    
  117.                                 <Grid.ColumnDefinitions>    
  118.                                     <ColumnDefinition Width="*" />    
  119.                                     <ColumnDefinition Width="Auto" />    
  120.                                 </Grid.ColumnDefinitions>    
  121.     
  122.                                 <Label    
  123.                                     Grid.Row="0"    
  124.                                     Grid.Column="0"    
  125.                                     Style="{StaticResource SmallLabelStyle}"    
  126.                                     Text="Total Cases"    
  127.                                     TextColor="#EEA445" />    
  128.                                 <ActivityIndicator    
  129.                                     Grid.Row="1"    
  130.                                     Grid.Column="0"    
  131.                                     Margin="0,5"    
  132.                                     HorizontalOptions="Start"    
  133.                                     IsRunning="{Binding IsBussy}"    
  134.                                     IsVisible="{Binding IsBussy}"    
  135.                                     Color="#EEA445" />    
  136.                                 <Label    
  137.                                     Grid.Row="1"    
  138.                                     Grid.Column="0"    
  139.                                     Style="{StaticResource MediumLabelStyle}"    
  140.                                     Text="{Binding GlobalCovid.cases, StringFormat='{0:N0}'}"    
  141.                                     TextColor="#EEA445" />    
  142.                                 <ImageButton    
  143.                                     Grid.Row="0"    
  144.                                     Grid.RowSpan="2"    
  145.                                     Grid.Column="1"    
  146.                                     Padding="10"    
  147.                                     Aspect="AspectFit"    
  148.                                     BackgroundColor="#FEDADC"    
  149.                                     BorderColor="#EEA445"    
  150.                                     BorderWidth="1"    
  151.                                     CornerRadius="25"    
  152.                                     HeightRequest="50"    
  153.                                     HorizontalOptions="CenterAndExpand"    
  154.                                     IsEnabled="False"    
  155.                                     Source="{local:ImageResource Covid19.Resources.covid19.png}"    
  156.                                     VerticalOptions="CenterAndExpand"    
  157.                                     WidthRequest="50" />    
  158.     
  159.                             </Grid>    
  160.                         </Frame>    
  161.                         <Frame    
  162.                             Grid.Row="1"    
  163.                             Grid.Column="0"    
  164.                             Padding="10,0"    
  165.                             BackgroundColor="White"    
  166.                             BorderColor="LightGray"    
  167.                             CornerRadius="10"    
  168.                             Visual="Material">    
  169.     
  170.                             <Grid Padding="10">    
  171.                                 <Grid.RowDefinitions>    
  172.                                     <RowDefinition Height="4*" />    
  173.                                     <RowDefinition Height="6*" />    
  174.                                 </Grid.RowDefinitions>    
  175.                                 <Grid.ColumnDefinitions>    
  176.                                     <ColumnDefinition Width="*" />    
  177.                                     <ColumnDefinition Width="Auto" />    
  178.                                 </Grid.ColumnDefinitions>    
  179.                                 <Label    
  180.                                     Grid.Row="0"    
  181.                                     Grid.Column="0"    
  182.                                     Style="{StaticResource SmallLabelStyle}"    
  183.                                     Text="Total Recovery"    
  184.                                     TextColor="#1FD34E" />    
  185.                                 <ActivityIndicator    
  186.                                     Grid.Row="1"    
  187.                                     Grid.Column="0"    
  188.                                     Margin="0,5"    
  189.                                     HorizontalOptions="Start"    
  190.                                     IsRunning="{Binding IsBussy}"    
  191.                                     IsVisible="{Binding IsBussy}"    
  192.                                     Color="#1FD34E" />    
  193.                                 <Label    
  194.                                     Grid.Row="1"    
  195.                                     Grid.Column="0"    
  196.                                     Style="{StaticResource MediumLabelStyle}"    
  197.                                     Text="{Binding GlobalCovid.recovered, StringFormat='{0:N0}'}"    
  198.                                     TextColor="#1FD34E" />    
  199.                                 <ImageButton    
  200.                                     Grid.Row="0"    
  201.                                     Grid.RowSpan="2"    
  202.                                     Grid.Column="1"    
  203.                                     Padding="10"    
  204.                                     Aspect="AspectFit"    
  205.                                     BackgroundColor="#D6F4DC"    
  206.                                     BorderColor="#1FD34E"    
  207.                                     BorderWidth="1"    
  208.                                     CornerRadius="25"    
  209.                                     HeightRequest="50"    
  210.                                     HorizontalOptions="CenterAndExpand"    
  211.                                     IsEnabled="False"    
  212.                                     Source="{FontImage FontFamily=FontAwesome,    
  213.                                                        Glyph={x:Static helper:IconFont.Heart},    
  214.                                                        Size=40,    
  215.                                                        Color='#21CF55'}"    
  216.                                     VerticalOptions="CenterAndExpand"    
  217.                                     WidthRequest="50" />    
  218.     
  219.                             </Grid>    
  220.                         </Frame>    
  221.                         <Frame    
  222.                             Grid.Row="2"    
  223.                             Grid.Column="0"    
  224.                             Padding="10,0"    
  225.                             BackgroundColor="White"    
  226.                             BorderColor="LightGray"    
  227.                             CornerRadius="10"    
  228.                             Visual="Material">    
  229.     
  230.                             <Grid Padding="10">    
  231.                                 <Grid.RowDefinitions>    
  232.                                     <RowDefinition Height="4*" />    
  233.                                     <RowDefinition Height="6*" />    
  234.                                 </Grid.RowDefinitions>    
  235.                                 <Grid.ColumnDefinitions>    
  236.                                     <ColumnDefinition Width="*" />    
  237.                                     <ColumnDefinition Width="Auto" />    
  238.                                 </Grid.ColumnDefinitions>    
  239.     
  240.     
  241.                                 <Label    
  242.                                     Grid.Row="0"    
  243.                                     Grid.Column="0"    
  244.                                     Style="{StaticResource SmallLabelStyle}"    
  245.                                     Text="Total Deaths"    
  246.                                     TextColor="#EF3936" />    
  247.                                 <ActivityIndicator    
  248.                                     Grid.Row="1"    
  249.                                     Grid.Column="0"    
  250.                                     Margin="0,5"    
  251.                                     HorizontalOptions="Start"    
  252.                                     IsRunning="{Binding IsBussy}"    
  253.                                     IsVisible="{Binding IsBussy}"    
  254.                                     Color="#EF3936" />    
  255.                                 <Label    
  256.                                     Grid.Row="1"    
  257.                                     Grid.Column="0"    
  258.                                     Style="{StaticResource MediumLabelStyle}"    
  259.                                     Text="{Binding GlobalCovid.deaths, StringFormat='{0:N0}'}"    
  260.                                     TextColor="#EF3936" />    
  261.     
  262.                                 <ImageButton    
  263.                                     Grid.Row="0"    
  264.                                     Grid.RowSpan="2"    
  265.                                     Grid.Column="1"    
  266.                                     Padding="15"    
  267.                                     Aspect="AspectFit"    
  268.                                     BackgroundColor="#FADEDA"    
  269.                                     BorderColor="#EF3936"    
  270.                                     BorderWidth="1"    
  271.                                     CornerRadius="25"    
  272.                                     HeightRequest="50"    
  273.                                     HorizontalOptions="CenterAndExpand"    
  274.                                     IsEnabled="False"    
  275.                                     Source="{FontImage FontFamily=FontAwesome,    
  276.                                                        Glyph={x:Static helper:IconFont.Close},    
  277.                                                        Size=40,    
  278.                                                        Color=Red}"    
  279.                                     VerticalOptions="CenterAndExpand"    
  280.                                     WidthRequest="50" />    
  281.                             </Grid>    
  282.                         </Frame>    
  283.                         <Frame    
  284.                             Grid.Row="3"    
  285.                             Grid.Column="0"    
  286.                             Padding="10,0"    
  287.                             BackgroundColor="White"    
  288.                             BorderColor="LightGray"    
  289.                             CornerRadius="10"    
  290.                             Visual="Material">    
  291.     
  292.                             <Grid Padding="10">    
  293.                                 <Grid.RowDefinitions>    
  294.                                     <RowDefinition Height="4*" />    
  295.                                     <RowDefinition Height="6*" />    
  296.                                 </Grid.RowDefinitions>    
  297.                                 <Grid.ColumnDefinitions>    
  298.                                     <ColumnDefinition Width="*" />    
  299.                                     <ColumnDefinition Width="Auto" />    
  300.                                 </Grid.ColumnDefinitions>    
  301.                                 <Label    
  302.                                     Grid.Row="0"    
  303.                                     Grid.Column="0"    
  304.                                     Style="{StaticResource SmallLabelStyle}"    
  305.                                     Text="Total Active"    
  306.                                     TextColor="#0A7FF3" />    
  307.                                 <ActivityIndicator    
  308.                                     Grid.Row="1"    
  309.                                     Grid.Column="0"    
  310.                                     Margin="0,5"    
  311.                                     HorizontalOptions="Start"    
  312.                                     IsRunning="{Binding IsBussy}"    
  313.                                     IsVisible="{Binding IsBussy}"    
  314.                                     Color="#0A7FF3" />    
  315.                                 <Label    
  316.                                     Grid.Row="1"    
  317.                                     Grid.Column="0"    
  318.                                     Style="{StaticResource MediumLabelStyle}"    
  319.                                     Text="{Binding GlobalCovid.active, StringFormat='{0:N0}'}"    
  320.                                     TextColor="#0A7FF3" />    
  321.                                 <ImageButton    
  322.                                     Grid.Row="0"    
  323.                                     Grid.RowSpan="2"    
  324.                                     Grid.Column="1"    
  325.                                     Padding="10"    
  326.                                     Aspect="AspectFit"    
  327.                                     BackgroundColor="#CFE3FC"    
  328.                                     BorderColor="#0A7FF3"    
  329.                                     BorderWidth="1"    
  330.                                     CornerRadius="25"    
  331.                                     HeightRequest="50"    
  332.                                     HorizontalOptions="CenterAndExpand"    
  333.                                     IsEnabled="False"    
  334.                                     Source="{local:ImageResource Covid19.Resources.active.png}"    
  335.                                     VerticalOptions="CenterAndExpand"    
  336.                                     WidthRequest="50" />    
  337.     
  338.     
  339.                             </Grid>    
  340.                         </Frame>    
  341.                     </Grid>    
  342.                 </ScrollView>    
  343.             </Grid>    
  344.         </Grid>    
  345.     </ContentPage.Content>    
  346. </ContentPage>       
Now we are creating the ViewModel for the binding the data with a view.
 
GloalViewModel.cs 
  1. using Covid19.Models;    
  2. using Newtonsoft.Json;    
  3. using System;    
  4. using System.Collections.Generic;    
  5. using System.Collections.ObjectModel;    
  6. using System.Diagnostics;    
  7. using System.IO;    
  8. using System.Linq;    
  9. using System.Net.Http;    
  10. using System.Net.Http.Headers;    
  11. using System.Text;    
  12. using System.Threading.Tasks;    
  13. using Xamarin.Forms;    
  14.     
  15. namespace Covid19.ViewModel    
  16. {    
  17.    public class GloalViewModel:BaseViewModel    
  18.     {    
  19.         public GloalViewModel()     
  20.         {    
  21.          GetGlobalCoronaDataCommand.Execute(null);     
  22.          CarouselList = new List<string>() { "darkcar01.png""darkcar02.png""darkcar03.png" };    
  23.         }    
  24.         #region Properties     
  25.     
  26.         private bool isbussy=false;     
  27.         public bool IsBussy     
  28.         {    
  29.             get { return isbussy; }    
  30.             set { isbussy = value; RaisePropertyChanged(() =>IsBussy); }    
  31.         }    
  32.      
  33.         private List<string> carouselList;    
  34.         public List<string> CarouselList    
  35.         {    
  36.             get { return carouselList; }    
  37.             set { carouselList = value; RaisePropertyChanged(() => CarouselList); }    
  38.         }    
  39.     
  40.               
  41.         private CountryModel globalcovid;    
  42.         public CountryModel GlobalCovid    
  43.         {    
  44.             get { return globalcovid; }    
  45.             set { globalcovid = value; RaisePropertyChanged(() => GlobalCovid); }    
  46.         }     
  47.     
  48.         private List<CountryModel> allcountry;    
  49.         public List<CountryModel> AllCountry    
  50.         {    
  51.             get { return allcountry; }    
  52.             set { allcountry = value; RaisePropertyChanged(() => AllCountry); }    
  53.         }    
  54.             
  55.         private ObservableCollection<CountryModel> searchcountry;    
  56.         public ObservableCollection<CountryModel> SearchCountry    
  57.         {    
  58.             get { return searchcountry; }    
  59.             set { searchcountry = value; RaisePropertyChanged(() => SearchCountry); }    
  60.         }    
  61.     
  62.         private List<CountryFlag> countryflags;     
  63.         public List<CountryFlag> CountryFlags    
  64.         {    
  65.             get { return countryflags; }    
  66.             set { countryflags = value;RaisePropertyChanged(()=>CountryFlags); }    
  67.         }    
  68.    
  69.         #endregion    
  70.    
  71.         #region Commands    
  72.         public Command GetGlobalCoronaDataCommand => new Command(async()=>await GetGlobalCoronaDataCommandExecution());     
  73.         #endregion    
  74.    
  75.         #region CommandExecution    
  76.         private async Task GetGlobalCoronaDataCommandExecution()    
  77.         {    
  78.             var current = Xamarin.Essentials.Connectivity.NetworkAccess;    
  79.             if (current != Xamarin.Essentials.NetworkAccess.Internet)    
  80.                 UserDialogs.Instance.Alert("Please Check the internet connection""Network Error""OK");    
  81.             else    
  82.             {    
  83.                 IsBussy = true;    
  84.                // UserDialogs.Instance.ShowLoading();    
  85.                 await Task.Delay(1000);    
  86.                 using (var client = new HttpClient())    
  87.                 {    
  88.                     try    
  89.                     {     
  90.                     client.BaseAddress = new Uri("https://coronavirus-19-api.herokuapp.com/");    
  91.                     client.DefaultRequestHeaders.Accept.Clear();    
  92.                     client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));     
  93.     
  94.                     //GET Method    
  95.                     HttpResponseMessage result = await client.GetAsync("countries");    
  96.                     if (result.IsSuccessStatusCode)    
  97.                     {    
  98.                         var rawResult = result.Content.ReadAsStringAsync().Result;    
  99.                         AllCountry = JsonConvert.DeserializeObject<List<CountryModel>>(rawResult);    
  100.                         SearchCountry = new ObservableCollection<CountryModel>(AllCountry);    
  101.                         GlobalCovid = AllCountry.Where(e => e.country == "World").SingleOrDefault();    
  102.                         App.AppSetup.HomeViewModel.Country = AllCountry.Where(e => e.country == "India").SingleOrDefault();    
  103.                         IsBussy = false;     
  104.                     }    
  105.                     else    
  106.                     {    
  107.                         IsBussy = false;    
  108.                         UserDialogs.Instance.Alert("Internal server Error""Server Error""OK");    
  109.                         }    
  110.                     }    
  111.                     catch (Exception ex)    
  112.                     {     
  113.                  //UserDialogs.Instance.Alert("Internal Error", $"Internal Error {ex.Message}", "OK");    
  114.                     }    
  115.                 }    
  116.             }    
  117.         }    
  118.         #endregion     
  119.     }    
  120. }    
Covid-19 App In Xamarin Forms
 
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
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage    
  3.     x:Class="Covid19.Views.HomeReport"    
  4.     xmlns="http://xamarin.com/schemas/2014/forms"    
  5.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  6.     xmlns:customcontrols="clr-namespace:Covid19.CustomControls"    
  7.     xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  8.     xmlns:helper="clr-namespace:Covid19.Helper"    
  9.     xmlns:local="clr-namespace:Covid19"    
  10.     xmlns:local1="clr-namespace:Covid19.CustomCells"    
  11.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  12.     xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows"    
  13.     rainbows:DebugRainbow.ShowColors="False"    
  14.     BackgroundColor="White"    
  15.     Visual="Material"    
  16.     mc:Ignorable="d">     
  17.     <ContentPage.Content>    
  18.         <ScrollView>    
  19.             <Grid Padding="0,0,0,10">    
  20.                 <Grid.RowDefinitions>    
  21.                     <RowDefinition Height="0.45*" />    
  22.                     <RowDefinition Height="0.55*" />    
  23.                 </Grid.RowDefinitions>    
  24.                 <Grid.ColumnDefinitions>    
  25.                     <ColumnDefinition Width="Auto" />    
  26.                 </Grid.ColumnDefinitions>    
  27.                 <Grid    
  28.                     Grid.Row="0"    
  29.                     Grid.Column="0"    
  30.                     Padding="35,15"    
  31.                     BackgroundColor="#473F97">    
  32.                     <Grid.RowDefinitions>    
  33.                         <RowDefinition Height="25" />    
  34.                         <RowDefinition Height="1.5*" />    
  35.                         <RowDefinition Height="6.5*" />    
  36.                         <RowDefinition Height="2*" />    
  37.                     </Grid.RowDefinitions>    
  38.                     <Grid Grid.Row="1" Grid.Column="0">    
  39.                         <Grid.ColumnDefinitions>    
  40.                             <ColumnDefinition Width="*" />    
  41.                             <ColumnDefinition Width="*" />    
  42.                         </Grid.ColumnDefinitions>    
  43.                         <Label    
  44.                             Grid.Row="0"    
  45.                             Grid.Column="0"    
  46.                             FontFamily="OpenSansBold"    
  47.                             FontSize="25"    
  48.                             HorizontalOptions="StartAndExpand"    
  49.                             Text="Covid-19"    
  50.                             TextColor="White"    
  51.                             VerticalOptions="Center" />    
  52.                         <Button    
  53.                             Grid.Row="0"    
  54.                             Grid.Column="1"    
  55.                             BackgroundColor="White"    
  56.                             CornerRadius="25"    
  57.                             HorizontalOptions="EndAndExpand" ImageSource="https://www.countryflags.io/in/flat/64.png"    
  58.                             Text=" India "    
  59.                             TextColor="#473F97" />    
  60.                     </Grid>    
  61.                     <Grid    
  62.                         Grid.Row="2"    
  63.                         Grid.Column="0"    
  64.                         RowSpacing="0">    
  65.                         <Grid.RowDefinitions>     
  66.                             <RowDefinition Height="Auto" />    
  67.                             <RowDefinition Height="*" />     
  68.                         </Grid.RowDefinitions>    
  69.                         <Label    
  70.                             Grid.Row="0"    
  71.                             Grid.Column="0"    
  72.                             FontFamily="OpenSansBold"    
  73.                             FontSize="25"    
  74.                             Text="What is Covid-19?"    
  75.                             TextColor="White" />    
  76.                         <Label    
  77.                             Grid.Row="1"    
  78.                             Grid.Column="0"    
  79.                             FontFamily="OpenSansRegular"    
  80.                             FontSize="15"    
  81.                             HorizontalOptions="StartAndExpand"    
  82.                             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."    
  83.                             TextColor="White"    
  84.                             VerticalOptions="Center" />    
  85.                     </Grid>    
  86.                     <Grid    
  87.                         Grid.Row="3"    
  88.                         Grid.Column="0"    
  89.                         ColumnSpacing="20">    
  90.                         <Grid.ColumnDefinitions>    
  91.                             <ColumnDefinition Width="0.2*" />    
  92.                             <ColumnDefinition Width="0.2*" />    
  93.                             <ColumnDefinition Width="0.2*" />    
  94.                             <ColumnDefinition Width="0.2*" />    
  95.                             <ColumnDefinition Width="0.2*" />    
  96.                         </Grid.ColumnDefinitions>    
  97.                         <Grid.RowDefinitions>    
  98.                             <RowDefinition Height="52" />    
  99.                         </Grid.RowDefinitions>    
  100.                         <Button    
  101.                             Grid.Row="0"    
  102.                             Grid.Column="0"    
  103.                             BackgroundColor="White"    
  104.                             Command="{Binding WhatsAppCommand}"    
  105.                             CornerRadius="{OnPlatform Android=25,    
  106.                                                       iOS=25}"    
  107.                             HorizontalOptions="EndAndExpand"    
  108.                             ImageSource="{FontImage FontFamily=FontAwesome,    
  109.                                                     Glyph={x:Static helper:IconFont.Whatsapp},    
  110.                                                     Size=30,    
  111.                                                     Color='#4FCE5D'}" />    
  112.                         <Button    
  113.                             Grid.Row="0"    
  114.                             Grid.Column="1"    
  115.                             BackgroundColor="White"    
  116.                             Command="{Binding MessengerCommand}"    
  117.                             CornerRadius="25"    
  118.                             HorizontalOptions="EndAndExpand"    
  119.                             ImageSource="{FontImage FontFamily=FontAwesome,    
  120.                                                     Glyph={x:Static helper:IconFont.FacebookMessenger},    
  121.                                                     Size=30,    
  122.                                                     Color='#1B7ACD'}" />    
  123.                         <Button    
  124.                             Grid.Row="0"    
  125.                             Grid.Column="2"    
  126.                             BackgroundColor="White"    
  127.                             Command="{Binding TelegramCommand}"    
  128.                             CornerRadius="25"    
  129.                             HorizontalOptions="EndAndExpand"    
  130.                             ImageSource="{FontImage FontFamily=FontAwesome,    
  131.                                                     Glyph={x:Static helper:IconFont.Telegram},    
  132.                                                     Size=30,    
  133.                                                     Color='#64B5F6'}" />    
  134.                         <Button    
  135.                             Grid.Row="0"    
  136.                             Grid.Column="3"    
  137.                             BackgroundColor="White"    
  138.                             Command="{Binding InstagramCommand}"    
  139.                             CornerRadius="25"    
  140.                             HorizontalOptions="EndAndExpand"    
  141.                             ImageSource="{FontImage FontFamily=FontAwesome,    
  142.                                                     Glyph={x:Static helper:IconFont.Instagram},    
  143.                                                     Size=30,    
  144.                                                     Color='#E74265'}" />    
  145.                         <Button    
  146.                             Grid.Row="0"    
  147.                             Grid.Column="4"    
  148.                             BackgroundColor="White"    
  149.                             Command="{Binding FBCommand}"    
  150.                             CornerRadius="25"    
  151.                             HorizontalOptions="EndAndExpand"    
  152.                             ImageSource="{FontImage FontFamily=FontAwesome,    
  153.                                                     Glyph={x:Static helper:IconFont.Facebook},    
  154.                                                     Size=30,    
  155.                                                     Color='#2E4780'}" />    
  156.                     </Grid>     
  157.                 </Grid>     
  158.                 <Grid    
  159.                     Grid.Row="1"    
  160.                     Grid.Column="0"    
  161.                     Padding="20"    
  162.                     ColumnSpacing="10"    
  163.                     HorizontalOptions="FillAndExpand"    
  164.                     RowSpacing="10"    
  165.                     VerticalOptions="FillAndExpand">    
  166.                     <Grid.ColumnDefinitions>    
  167.                         <ColumnDefinition Width="5*" />    
  168.                         <ColumnDefinition Width="5*" />    
  169.     
  170.                     </Grid.ColumnDefinitions>    
  171.                     <Grid.RowDefinitions>    
  172.                         <RowDefinition Height="5*" />    
  173.                         <RowDefinition Height="5*" />    
  174.                     </Grid.RowDefinitions>    
  175.                     <Frame    
  176.                         Grid.Row="0"    
  177.                         Grid.Column="0"    
  178.                         Padding="10"    
  179.                         BackgroundColor="White"    
  180.                         BorderColor="LightGray"    
  181.                         CornerRadius="10">    
  182.                         <StackLayout Padding="10" Spacing="0">    
  183.                             <Grid RowSpacing="5">    
  184.                                 <Grid.RowDefinitions>    
  185.                                     <RowDefinition Height="Auto" />    
  186.                                     <RowDefinition Height="Auto" />    
  187.                                 </Grid.RowDefinitions>    
  188.                                 <Label    
  189.                                     Grid.Row="0"    
  190.                                     Grid.Column="0"    
  191.                                     Style="{StaticResource SmallLabelStyle}"    
  192.                                     Text="Total Cases"    
  193.                                     TextColor="#EEA445" />    
  194.                                 <Label    
  195.                                     Grid.Row="1"    
  196.                                     Grid.Column="0"    
  197.                                     Style="{StaticResource MediumLabelStyle}"    
  198.                                     Text="{Binding Country.cases, StringFormat='{0:N0}'}"    
  199.                                     TextColor="#EEA445" />    
  200.                             </Grid>    
  201.                             <ImageButton    
  202.                                 Padding="10"    
  203.                                 Aspect="AspectFit"    
  204.                                 BackgroundColor="#FEDADC"    
  205.                                 BorderColor="#EEA445"    
  206.                                 BorderWidth="1"    
  207.                                 CornerRadius="{OnPlatform Android=25,    
  208.                                                           iOS=18}"    
  209.                                 HeightRequest="35"    
  210.                                 HorizontalOptions="End"    
  211.                                 IsEnabled="False"    
  212.                                 Source="{local:ImageResource Covid19.Resources.covid19.png}"    
  213.                                 VerticalOptions="EndAndExpand"    
  214.                                 WidthRequest="35" />    
  215.                         </StackLayout>    
  216.                     </Frame>    
  217.     
  218.     
  219.                     <Frame    
  220.                         Grid.Row="0"    
  221.                         Grid.Column="1"    
  222.                         Padding="10"    
  223.                         BackgroundColor="White"    
  224.                         BorderColor="LightGray"    
  225.                         CornerRadius="10">    
  226.                         <StackLayout Padding="5" Spacing="0">    
  227.                             <Grid RowSpacing="5">    
  228.                                 <Grid.RowDefinitions>    
  229.                                     <RowDefinition Height="Auto" />    
  230.                                     <RowDefinition Height="Auto" />    
  231.                                 </Grid.RowDefinitions>    
  232.                                 <Label    
  233.                                     Grid.Row="0"    
  234.                                     Grid.Column="0"    
  235.                                     Style="{StaticResource SmallLabelStyle}"    
  236.                                     Text="Total Recover"    
  237.                                     TextColor="#1FD34E" />    
  238.                                 <Label    
  239.                                     Grid.Row="1"    
  240.                                     Grid.Column="0"    
  241.                                     Style="{StaticResource MediumLabelStyle}"    
  242.                                     Text="{Binding Country.recovered, StringFormat='{0:N0}'}"    
  243.                                     TextColor="#1FD34E" />    
  244.                             </Grid>    
  245.                             <ImageButton    
  246.                                 Padding="10"    
  247.                                 Aspect="AspectFit"    
  248.                                 BackgroundColor="#D6F4DC"    
  249.                                 BorderColor="#1FD34E"    
  250.                                 BorderWidth="1"    
  251.                                 CornerRadius="{OnPlatform Android=25,    
  252.                                                           iOS=18}"    
  253.                                 HeightRequest="35"    
  254.                                 HorizontalOptions="End"    
  255.                                 IsEnabled="False"    
  256.                                 Source="{FontImage FontFamily=FontAwesome,    
  257.                                                    Glyph={x:Static helper:IconFont.Heart},    
  258.                                                    Size=40,    
  259.                                                    Color='#21CF55'}"    
  260.                                 VerticalOptions="EndAndExpand"    
  261.                                 WidthRequest="35" />    
  262.                         </StackLayout>    
  263.                     </Frame>    
  264.                     <Frame    
  265.                         Grid.Row="1"    
  266.                         Grid.Column="0"    
  267.                         Padding="10"    
  268.                         BackgroundColor="White"    
  269.                         BorderColor="LightGray"    
  270.                         CornerRadius="10">    
  271.                         <StackLayout Padding="10" Spacing="0">    
  272.                             <Grid RowSpacing="5">    
  273.                                 <Grid.RowDefinitions>    
  274.                                     <RowDefinition Height="Auto" />    
  275.                                     <RowDefinition Height="Auto" />    
  276.                                 </Grid.RowDefinitions>    
  277.                                 <Label    
  278.                                     Grid.Row="0"    
  279.                                     Grid.Column="0"    
  280.                                     Style="{StaticResource SmallLabelStyle}"    
  281.                                     Text="Total Deaths"    
  282.                                     TextColor="#EF3936" />    
  283.                                 <Label    
  284.                                     Grid.Row="1"    
  285.                                     Grid.Column="0"    
  286.                                     Style="{StaticResource MediumLabelStyle}"    
  287.                                     Text="{Binding Country.deaths, StringFormat='{0:N0}'}"    
  288.                                     TextColor="#EF3936" />    
  289.                             </Grid>    
  290.                             <ImageButton    
  291.                                 Padding="10"    
  292.                                 Aspect="AspectFit"    
  293.                                 BackgroundColor="#FADEDA"    
  294.                                 BorderColor="#EF3936"    
  295.                                 BorderWidth="1"    
  296.                                 CornerRadius="{OnPlatform Android=25,    
  297.                                                           iOS=18}"    
  298.                                 HeightRequest="35"    
  299.                                 HorizontalOptions="End"    
  300.                                 IsEnabled="False"    
  301.                                 Source="{FontImage FontFamily=FontAwesome,    
  302.                                                    Glyph={x:Static helper:IconFont.Close},    
  303.                                                    Size=40,    
  304.                                                    Color=Red}"    
  305.                                 VerticalOptions="EndAndExpand"    
  306.                                 WidthRequest="35" />    
  307.                         </StackLayout>    
  308.                     </Frame>    
  309.                     <Frame    
  310.                         Grid.Row="1"    
  311.                         Grid.Column="1"    
  312.                         Padding="10"    
  313.                         BackgroundColor="White"    
  314.                         BorderColor="LightGray"    
  315.                         CornerRadius="10">    
  316.                         <StackLayout Padding="10" Spacing="0">    
  317.                             <Grid RowSpacing="5">    
  318.                                 <Grid.RowDefinitions>    
  319.                                     <RowDefinition Height="Auto" />    
  320.                                     <RowDefinition Height="Auto" />    
  321.                                 </Grid.RowDefinitions>    
  322.                                 <Label    
  323.                                     Grid.Row="0"    
  324.                                     Grid.Column="0"    
  325.                                     Style="{StaticResource SmallLabelStyle}"    
  326.                                     Text="Active Cases"    
  327.                                     TextColor="#0A7FF3" />    
  328.                                 <Label    
  329.                                     Grid.Row="1"    
  330.                                     Grid.Column="0"    
  331.                                     Style="{StaticResource MediumLabelStyle}"    
  332.                                     Text="{Binding Country.active, StringFormat='{0:N0}'}"    
  333.                                     TextColor="#0A7FF3" />    
  334.                             </Grid>    
  335.                             <ImageButton    
  336.                                 Padding="10"    
  337.                                 Aspect="AspectFit"    
  338.                                 BackgroundColor="#CFE3FC"    
  339.                                 BorderColor="#0A7FF3"    
  340.                                 BorderWidth="1"    
  341.                                 CornerRadius="{OnPlatform Android=25,    
  342.                                                           iOS=18}"    
  343.                                 HeightRequest="35"    
  344.                                 HorizontalOptions="End"    
  345.                                 IsEnabled="False"    
  346.                                 Source="{local:ImageResource Covid19.Resources.active.png}"    
  347.                                 VerticalOptions="EndAndExpand"    
  348.                                 WidthRequest="35" />    
  349.                         </StackLayout>    
  350.                     </Frame>     
  351.                 </Grid>     
  352.             </Grid>    
  353.         </ScrollView>    
  354.     </ContentPage.Content>    
  355. </ContentPage>    
Now we are creating the ViewModel(HomeViewModel) and binding the data with a view.
 
HomeViewModel.cs
  1. public class HomeViewModel:BaseViewModel    
  2.     {    
  3.         public HomeViewModel { }    
  4.         #region Properties      
  5.         private CountryModel country;    
  6.         public CountryModel Country    
  7.         {    
  8.             get { return country; }    
  9.             set {country = value; RaisePropertyChanged(() => Country); }    
  10.         }     
  11.         #endregion     
  12.         #region Commands     
  13.         public Command WhatsAppCommand => new Command(() => Device.OpenUri(new Uri("https://api.whatsapp.com/send?phone=919013353535")));    
  14.         public Command TelegramCommand => new Command(() => Device.OpenUri(new Uri("tg://resolve?domain=MyGovCoronaNewsdesk")));    
  15.         public Command InstagramCommand => new Command(() => Device.OpenUri(new Uri("instagram://user?username=mygovindia")));    
  16.         public Command FBCommand => new Command(() =>  Device.OpenUri(new Uri("fb://group/224193992332793")));    
  17.         public Command MessengerCommand => new Command(() => Device.OpenUri(new Uri("http://m.me/MyGovIndia")));     
  18.         #endregion      
  19.     }   
Covid-19 App In Xamarin Forms
 
That's it for this article, we will cover more in the next article.
 
If you want to see part 2 click here.