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>
  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">
  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">-->
  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>
  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>
  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" />
  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">
  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" />
  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">
  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>
  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" />
  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">
  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" />
  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;
  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
  26. private bool isbussy=false;
  27. public bool IsBussy
  28. {
  29. get { return isbussy; }
  30. set { isbussy = value; RaisePropertyChanged(() =>IsBussy); }
  31. }
  33. private List<string> carouselList;
  34. public List<string> CarouselList
  35. {
  36. get { return carouselList; }
  37. set { carouselList = value; RaisePropertyChanged(() => CarouselList); }
  38. }
  41. private CountryModel globalcovid;
  42. public CountryModel GlobalCovid
  43. {
  44. get { return globalcovid; }
  45. set { globalcovid = value; RaisePropertyChanged(() => GlobalCovid); }
  46. }
  48. private List<CountryModel> allcountry;
  49. public List<CountryModel> AllCountry
  50. {
  51. get { return allcountry; }
  52. set { allcountry = value; RaisePropertyChanged(() => AllCountry); }
  53. }
  55. private ObservableCollection<CountryModel> searchcountry;
  56. public ObservableCollection<CountryModel> SearchCountry
  57. {
  58. get { return searchcountry; }
  59. set { searchcountry = value; RaisePropertyChanged(() => SearchCountry); }
  60. }
  62. private List<CountryFlag> countryflags;
  63. public List<CountryFlag> CountryFlags
  64. {
  65. get { return countryflags; }
  66. set { countryflags = value;RaisePropertyChanged(()=>CountryFlags); }
  67. }
  69. #endregion
  71. #region Commands
  72. public Command GetGlobalCoronaDataCommand => new Command(async()=>await GetGlobalCoronaDataCommandExecution());
  73. #endregion
  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"));
  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*" />
  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>
  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.