Introduction

Hello guys, this is my second part of the COVID-19 app. In this article, I have continued to the COVID – 19 App, in this app we create the remaining pages.
  1. Covid-19 Search Countries
  2. About us
  3. CovidTabbedPage
In this article, we design a Covid-19 Search Countries, About Us and a CovidTabbedPage.

Covid-19 Search Countries

In this Covid19 Search Countries page, we add one ListView and show the all the country COVID cases data Like INDIA and USA, and UAE.
CountryReport.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage
  3. x:Class="Covid19.Views.CountryReport"
  4. xmlns="http://xamarin.com/schemas/2014/forms"
  5. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  6. xmlns:control="clr-namespace:Covid19.CustomControls"
  7. xmlns:d="http://xamarin.com/schemas/2014/forms/design"
  8. xmlns:local="clr-namespace:Covid19"
  9. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  10. BackgroundColor="White"
  11. mc:Ignorable="d">
  12. <ContentPage.Resources>
  13. <ContentView x:Key="BasicTemplate">
  14. <StackLayout>
  15. <Label
  16. Margin="10,25,10,10"
  17. FontAttributes="Bold"
  18. FontSize="18"
  19. HorizontalOptions="Fill"
  20. HorizontalTextAlignment="Center"
  21. Text="No items to display." />
  22. </StackLayout>
  23. </ContentView>
  24. <ContentView x:Key="AdvancedTemplate">
  25. <StackLayout>
  26. <Label
  27. Margin="10,25,10,10"
  28. FontFamily="OpenSansBold"
  29. FontSize="18"
  30. HorizontalOptions="Fill"
  31. HorizontalTextAlignment="Center"
  32. Text="No results matched your filter." />
  33. <Label
  34. FontAttributes="Italic"
  35. FontFamily="OpenSansRegular"
  36. FontSize="12"
  37. HorizontalOptions="Fill"
  38. HorizontalTextAlignment="Center"
  39. Text="Try a broader filter?" />
  40. </StackLayout>
  41. </ContentView>
  43. </ContentPage.Resources>
  44. <ContentPage.Content>
  45. <ScrollView>
  46. <Grid Padding="0">
  47. <Grid.RowDefinitions>
  48. <RowDefinition Height="25" />
  49. <RowDefinition Height="Auto" />
  50. <RowDefinition Height="Auto" />
  51. <RowDefinition Height="Auto" />
  52. <RowDefinition Height="*" />
  53. </Grid.RowDefinitions>
  54. <Grid.ColumnDefinitions>
  55. <ColumnDefinition Width="*" />
  56. </Grid.ColumnDefinitions>
  57. <Label
  58. Grid.Row="1"
  59. Grid.Column="0"
  60. Padding="20,5"
  61. FontFamily="OpenSansBold"
  62. FontSize="20"
  63. HorizontalOptions="StartAndExpand"
  64. Text="Covid-19 Search..."
  65. VerticalOptions="CenterAndExpand" />
  66. <StackLayout
  67. Grid.Row="2"
  68. Grid.Column="0"
  69. Padding="0"
  70. HorizontalOptions="FillAndExpand"
  71. Spacing="0"
  72. VerticalOptions="Center">
  73. <control:CustomShadowFrame
  74. Margin="{OnPlatform Android='20,0',
  75. iOS='0,0'}"
  76. Padding="0"
  77. BorderColor="White"
  78. CornerRadius="25"
  79. HasShadow="true"
  80. HeightRequest="150">
  81. <Image Aspect="AspectFill" Source="{local:ImageResource Covid19.Resources.lightstayhome.jpg}" />
  82. </control:CustomShadowFrame>
  83. </StackLayout>
  84. <Grid
  85. Grid.Row="3"
  86. Grid.Column="0"
  87. Padding="20,0"
  88. HorizontalOptions="FillAndExpand"
  89. VerticalOptions="FillAndExpand">
  90. <Grid.RowDefinitions>
  91. <RowDefinition Height="*" />
  92. <RowDefinition Height="1" />
  93. </Grid.RowDefinitions>
  94. <Grid.ColumnDefinitions>
  95. <ColumnDefinition Width="*" />
  96. </Grid.ColumnDefinitions>
  97. <Entry
  98. x:Name="searchBar"
  99. Grid.Row="0"
  100. Grid.Column="0"
  101. Margin="45,0,0,0"
  102. FontFamily="OpenSansRegular"
  103. FontSize="Small"
  104. HeightRequest="35"
  105. HorizontalOptions="FillAndExpand"
  106. Placeholder="Search Country"
  107. PlaceholderColor="#2A73BF"
  108. TextChanged="Entry_TextChanged"
  109. TextColor="#2A73BF" />
  110. <Image
  111. Grid.Row="0"
  112. Grid.Column="0"
  113. Aspect="AspectFit"
  114. HeightRequest="24"
  115. HorizontalOptions="Start"
  116. Source="{local:ImageResource Covid19.Resources.search.png}"
  117. VerticalOptions="Center"
  118. WidthRequest="24" />
  119. <BoxView
  120. Grid.Row="1"
  121. Grid.Column="0"
  122. HorizontalOptions="FillAndExpand"
  123. Color="LightGray" />
  124. </Grid>
  125. <CollectionView
  126. x:Name="collectionView"
  127. Grid.Row="4"
  128. Grid.Column="0"
  129. EmptyView="{StaticResource AdvancedTemplate}"
  130. HorizontalOptions="FillAndExpand"
  131. ItemsSource="{Binding SearchCountry}"
  132. VerticalOptions="FillAndExpand">
  133. <CollectionView.ItemTemplate>
  134. <DataTemplate>
  135. <StackLayout Padding="20,10">
  136. <Frame
  137. Padding="5"
  138. BorderColor="LightGray"
  139. CornerRadius="10"
  140. HasShadow="True">
  141. <Grid
  142. Grid.Row="0"
  143. Grid.RowSpan="2"
  144. Grid.Column="1"
  145. Padding="10,10"
  146. HorizontalOptions="FillAndExpand"
  147. RowSpacing="0"
  148. VerticalOptions="FillAndExpand">
  149. <Grid.RowDefinitions>
  150. <RowDefinition Height="0.5*" />
  151. <RowDefinition Height="0.5*" />
  152. <!--<RowDefinition Height="0.3*" />-->
  153. </Grid.RowDefinitions>
  154. <Grid.ColumnDefinitions>
  155. <ColumnDefinition Width="0.8*" />
  156. <ColumnDefinition Width="0.2*" />
  157. </Grid.ColumnDefinitions>
  158. <Label
  159. Grid.Row="0"
  160. Grid.Column="0"
  161. FontFamily="OpenSansRegular"
  162. FontSize="20"
  163. Text="{Binding country}"
  164. TextColor="Black"
  165. VerticalTextAlignment="End" />
  166. <Label
  167. Grid.Row="1"
  168. Grid.Column="0"
  169. FontFamily="OpenSansBold"
  170. FontSize="20"
  171. Text="{Binding cases, StringFormat='{0:N0}'}"
  172. TextColor="Black"
  173. VerticalOptions="Start"
  174. VerticalTextAlignment="Start" />
  175. <ImageButton
  176. Grid.Row="0"
  177. Grid.RowSpan="2"
  178. Grid.Column="1"
  179. Aspect="Fill"
  180. BackgroundColor="White"
  181. HeightRequest="42"
  182. HorizontalOptions="CenterAndExpand"
  183. IsEnabled="False"
  184. Source="{Binding country, Converter={StaticResource Flagconvertor}}"
  185. VerticalOptions="CenterAndExpand"
  186. WidthRequest="42" />
  187. </Grid>
  188. </Frame>
  189. </StackLayout>
  190. </DataTemplate>
  191. </CollectionView.ItemTemplate>
  192. </CollectionView>
  193. </Grid>
  194. </ScrollView>
  195. </ContentPage.Content>
  196. </ContentPage>
Now we add the Entry_TextChanged event for the searching a country according the text characters. Also.,the Binding viewmodel, which is defined in previous article.
  1. private void Entry_TextChanged(object sender, TextChangedEventArgs e)
  2. {
  3. if (string.IsNullOrEmpty(e.NewTextValue))
  4. collectionView.ItemsSource = App.AppSetup.GloalViewModel.AllCountry;
  5. else
  6. collectionView.ItemsSource = App.AppSetup.GloalViewModel.AllCountry.Where(x => x.country.ToLower().Contains(e.NewTextValue.ToLower())).ToList();
  7. }

About Us

This is the about page and in this, we include the team member of the creating of the app.
AboutReport.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage
  3. x:Class="Covid19.Views.AboutReport"
  4. xmlns="http://xamarin.com/schemas/2014/forms"
  5. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  6. xmlns:control="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:parallax="clr-namespace:Covid19.CustomCells"
  12. xmlns:viewmodel="clr-namespace:Covid19.ViewModel"
  13. BackgroundColor="{DynamicResource Gray-White}"
  14. NavigationPage.HasNavigationBar="False"
  15. mc:Ignorable="d">
  16. <ContentPage.Resources>
  17. <ResourceDictionary>
  18. <Style x:Key="VersionLabelStyle" TargetType="Label">
  19. <Setter Property="TextColor" Value="{DynamicResource Gray-700}" />
  20. <Setter Property="FontFamily" Value="OpenSansRegular" />
  21. <Setter Property="FontSize" Value="12" />
  22. <Setter Property="LineHeight" Value="{OnPlatform Default=1.25, iOS=-1}" />
  23. </Style>
  24. <!-- Style for header label -->
  25. <Style x:Key="HeaderLabelStyle" TargetType="Label">
  26. <Setter Property="TextColor" Value="LightGray" />
  27. <Setter Property="FontFamily" Value="{DynamicResource Gray-900}" />
  28. <Setter Property="FontSize" Value="16" />
  29. <Setter Property="HorizontalTextAlignment" Value="Center" />
  30. <Setter Property="LineHeight" Value="1.25" />
  31. <Setter Property="Margin" Value="0,16,0,8" />
  32. </Style>
  33. <!-- Style for description label -->
  34. <Style x:Key="DescriptionLabelStyle" TargetType="Label">
  35. <Setter Property="TextColor" Value="{DynamicResource Gray-700}" />
  36. <Setter Property="FontFamily" Value="OpenSansRegular" />
  37. <Setter Property="FontSize" Value="14" />
  38. <Setter Property="HorizontalTextAlignment" Value="Start" />
  39. <Setter Property="LineHeight" Value="{OnPlatform Default=1.25}" />
  40. </Style>
  41. <!-- Style for Images -->
  42. <Style x:Key="AboutUsImageStyle" TargetType="Image">
  43. <Setter Property="HeightRequest" Value="64" />
  44. <Setter Property="WidthRequest" Value="64" />
  45. </Style>
  46. </ResourceDictionary>
  47. </ContentPage.Resources>
  49. <ContentPage.BindingContext>
  50. <viewmodel:AboutViewModel />
  51. </ContentPage.BindingContext>
  52. <ContentPage.Content>
  53. <parallax:ParallaxView
  54. x:Name="MainParallax"
  55. BodyMargin="0,150,0,0"
  56. HeaderScrollSpeed="2">
  57. <parallax:ParallaxView.HeaderContent>
  58. <ContentView HeightRequest="253">
  59. <Image
  60. Aspect="Fill"
  61. BackgroundColor="{DynamicResource Gray-200}"
  62. HorizontalOptions="FillAndExpand"
  63. VerticalOptions="StartAndExpand">
  64. <Image.Source>
  65. <UriImageSource
  66. CacheValidity="14"
  67. CachingEnabled="true"
  68. Uri="{Binding AboutTeamModel.CardsTopImage}" />
  69. </Image.Source>
  70. </Image>
  71. </ContentView>
  72. </parallax:ParallaxView.HeaderContent>
  73. <parallax:ParallaxView.BodyContent>
  74. <Frame
  75. Margin="0,0,0,-25"
  76. BackgroundColor="#ffffff"
  77. CornerRadius="25"
  78. HorizontalOptions="FillAndExpand"
  79. VerticalOptions="FillAndExpand">
  80. <Grid
  81. Padding="0"
  82. HorizontalOptions="FillAndExpand"
  83. VerticalOptions="FillAndExpand">
  84. <CollectionView
  85. x:Name="aboutlistview"
  86. Margin="10"
  87. HorizontalOptions="CenterAndExpand"
  88. ItemsSource="{Binding AboutTeamModel.AboutteamData}"
  89. SelectedItem="{Binding ItemSelectedCommand}">
  90. <!-- Header -->
  91. <CollectionView.Header>
  92. <Grid HorizontalOptions="Center" VerticalOptions="Center">
  93. <Grid.ColumnDefinitions>
  94. <ColumnDefinition Width="*" />
  95. </Grid.ColumnDefinitions>
  96. <Grid.RowDefinitions>
  97. <RowDefinition Height="15" />
  98. <RowDefinition Height="Auto" />
  99. </Grid.RowDefinitions>
  100. <Label
  101. Grid.Row="0"
  102. Grid.Column="0"
  103. FontFamily="OpenSansBold"
  104. HorizontalOptions="Center"
  105. Style="{StaticResource DescriptionLabelStyle}"
  106. Text="About Us"
  107. TextColor="{DynamicResource Gray-900}"
  108. VerticalOptions="End" />
  109. <!--<Label
  110. Grid.Row="1"
  111. Grid.Column="0"
  112. HorizontalOptions="Center"
  113. Style="{StaticResource VersionLabelStyle}"
  114. Text="Version 1.0" />-->
  115. <Label
  116. Grid.Row="1"
  117. Grid.Column="0"
  118. HorizontalOptions="Center"
  119. Style="{StaticResource VersionLabelStyle}"
  120. Text="{Binding About}" />
  122. </Grid>
  123. </CollectionView.Header>
  124. <!-- List -->
  125. <CollectionView.ItemsLayout>
  126. <GridItemsLayout
  127. HorizontalItemSpacing="10"
  128. Orientation="Vertical"
  129. Span="{OnIdiom Desktop=2,
  130. Phone=1,
  131. Tablet=2}"
  132. VerticalItemSpacing="10" />
  133. </CollectionView.ItemsLayout>
  134. <CollectionView.ItemTemplate>
  135. <DataTemplate>
  136. <Frame
  137. BackgroundColor="White"
  138. BorderColor="#CCD5F0"
  139. CornerRadius="25"
  140. HasShadow="true"
  141. Visual="Material">
  142. <Grid>
  143. <Grid.ColumnDefinitions>
  144. <ColumnDefinition Width="*" />
  145. </Grid.ColumnDefinitions>
  146. <Grid.RowDefinitions>
  147. <RowDefinition Height="*" />
  148. <RowDefinition Height="1" />
  149. <RowDefinition Height="Auto" />
  150. </Grid.RowDefinitions>
  151. <StackLayout
  152. Grid.Row="0"
  153. Grid.Column="0"
  154. Padding="0"
  155. HorizontalOptions="Fill"
  156. Spacing="0"
  157. VerticalOptions="CenterAndExpand">
  158. <!-- Profile image -->
  159. <ImageButton
  160. BackgroundColor="LightGray"
  161. BorderWidth="0"
  162. CornerRadius="32"
  163. HorizontalOptions="Center"
  164. IsEnabled="False"
  165. Source="{Binding ImageUrl}"
  166. Style="{StaticResource AboutUsImageStyle}"
  167. VerticalOptions="Center" />
  169. <!-- Employee name -->
  170. <Label
  171. FontFamily="OpenSansBold"
  172. HorizontalOptions="Center"
  173. Style="{StaticResource DescriptionLabelStyle}"
  174. Text="{Binding FirstName}"
  175. TextColor="{DynamicResource Gray-900}" />
  177. <!-- Designation -->
  178. <Label
  179. FontFamily="OpenSansBold"
  180. HorizontalOptions="Center"
  181. HorizontalTextAlignment="Center"
  182. Style="{StaticResource VersionLabelStyle}"
  183. Text="{Binding Designation}" />
  184. <!-- Description -->
  185. <Label
  186. HorizontalOptions="Center"
  187. HorizontalTextAlignment="Center"
  188. Style="{StaticResource VersionLabelStyle}"
  189. Text="{Binding Description}" />
  191. </StackLayout>
  192. <BoxView
  193. Grid.Row="1"
  194. Grid.Column="0"
  195. VerticalOptions="FillAndExpand"
  196. Color="LightGray" />
  197. <Grid
  198. Grid.Row="2"
  199. Grid.Column="0"
  200. Padding="0"
  201. HorizontalOptions="CenterAndExpand"
  202. VerticalOptions="CenterAndExpand">
  203. <Grid.ColumnDefinitions>
  204. <ColumnDefinition Width="45" />
  205. <ColumnDefinition Width="45" />
  206. <ColumnDefinition Width="45" />
  207. <ColumnDefinition Width="45" />
  208. <ColumnDefinition Width="45" />
  209. </Grid.ColumnDefinitions>
  210. <Grid.RowDefinitions>
  211. <RowDefinition Height="*" />
  212. </Grid.RowDefinitions>
  213. <Button
  214. Grid.Row="0"
  215. Grid.Column="0"
  216. BackgroundColor="White"
  217. Command="{Binding Path=BindingContext.SocialCommand, Source={x:Reference aboutlistview}}"
  218. CommandParameter="{Binding linkSocial[0].InstaLink}"
  219. CornerRadius="25"
  220. HorizontalOptions="EndAndExpand"
  221. ImageSource="{FontImage FontFamily=FontAwesome,
  222. Glyph={x:Static helper:IconFont.Instagram},
  223. Size=30,
  224. Color='#E74265'}" />
  225. <Button
  226. Grid.Row="0"
  227. Grid.Column="1"
  228. BackgroundColor="White"
  229. Command="{Binding Path=BindingContext.SocialCommand, Source={x:Reference aboutlistview}}"
  230. CommandParameter="{Binding linkSocial[0].BloggerLink}"
  231. CornerRadius="25"
  232. ImageSource="{FontImage FontFamily=FontAwesome,
  233. Glyph={x:Static helper:IconFont.Blogger},
  234. Size=30,
  235. Color=Orange}" />
  236. <Button
  237. Grid.Row="0"
  238. Grid.Column="2"
  239. BackgroundColor="White"
  240. Command="{Binding Path=BindingContext.SocialCommand, Source={x:Reference aboutlistview}}"
  241. CommandParameter="{Binding linkSocial[0].LinkedLink}"
  242. CornerRadius="25"
  243. ImageSource="{FontImage FontFamily=FontAwesome,
  244. Glyph={x:Static helper:IconFont.Linkedin},
  245. Size=30,
  246. Color='#007BB6'}" />
  247. <Button
  248. Grid.Row="0"
  249. Grid.Column="3"
  250. BackgroundColor="White"
  251. Command="{Binding Path=BindingContext.SocialCommand, Source={x:Reference aboutlistview}}"
  252. CommandParameter="{Binding linkSocial[0].YtLink}"
  253. CornerRadius="25"
  254. ImageSource="{FontImage FontFamily=FontAwesome,
  255. Glyph={x:Static helper:IconFont.Youtube},
  256. Size=30,
  257. Color='#C51614'}" />
  258. <Button
  259. Grid.Row="0"
  260. Grid.Column="4"
  261. BackgroundColor="White"
  262. Command="{Binding Path=BindingContext.SocialCommand, Source={x:Reference aboutlistview}}"
  263. CommandParameter="{Binding linkSocial[0].Csharpcorner}"
  264. CornerRadius="25"
  265. ImageSource="{FontImage FontFamily=FontAwesome,
  266. Glyph={x:Static helper:IconFont.LanguageCsharp},
  267. Size=30,
  268. Color='#9A4993'}" />
  269. </Grid>
  270. </Grid>
  271. </Frame>
  272. </DataTemplate>
  273. </CollectionView.ItemTemplate>
  274. <CollectionView.Footer>
  275. <Grid
  276. HorizontalOptions="Center"
  277. IsVisible="false"
  278. VerticalOptions="Center">
  279. <Grid.ColumnDefinitions>
  280. <ColumnDefinition Width="100" />
  281. <ColumnDefinition Width="100" />
  282. <ColumnDefinition Width="100" />
  283. </Grid.ColumnDefinitions>
  284. <Grid.RowDefinitions>
  285. <RowDefinition Height="Auto" />
  286. <RowDefinition Height="Auto" />
  287. </Grid.RowDefinitions>
  288. <Button
  289. Grid.Row="0"
  290. Grid.Column="0"
  291. BackgroundColor="White"
  292. CornerRadius="25"
  293. FontSize="10"
  294. ImageSource="{FontImage FontFamily=FontAwesome,
  295. Glyph={x:Static helper:IconFont.Cellphone},
  296. Size=30,
  297. Color='#4C79FF'}"
  298. Text="{Binding MobIfo.DeviceModel}"
  299. TextColor="{DynamicResource Gray-700}" />
  301. <Button
  302. Grid.Row="0"
  303. Grid.Column="1"
  304. BackgroundColor="White"
  305. CornerRadius="25"
  306. FontSize="10"
  307. ImageSource="{FontImage FontFamily=FontAwesome,
  308. Glyph={x:Static helper:IconFont.Android},
  309. Size=30,
  310. Color='#4C79FF'}"
  311. Text="{Binding MobIfo.DevicePlatform}" />
  312. <Button
  313. Grid.Row="0"
  314. Grid.Column="2"
  315. BackgroundColor="White"
  316. CornerRadius="25"
  317. FontSize="10"
  318. ImageSource="{FontImage FontFamily=FontAwesome,
  319. Glyph={x:Static helper:IconFont.CellphoneAndroid},
  320. Size=30,
  321. Color='#4C79FF'}"
  322. Text="{Binding MobIfo.DeviceType}" />
  323. </Grid>
  324. </CollectionView.Footer>
  325. </CollectionView>
  326. </Grid>
  327. </Frame>
  328. </parallax:ParallaxView.BodyContent>
  329. </parallax:ParallaxView>
  330. </ContentPage.Content>
  331. </ContentPage>
Now we are creating a model(AboutTeamModel) and ViewModel(AboutViewModel)
AboutViewModel.cs
  1. public class AboutViewModel:BaseViewModel
  2. {
  3. public AboutViewModel() {
  4. try
  5. {
  6. AboutTeamModel = new AboutTeamModel() {
  7. CardsTopImage = App.BaseImageUrl + "Mask.png",
  8. AboutteamData =new List<Aboutteam>() {
  9. new Aboutteam() {
  10. linkSocial = new List<Sociallinktask>() {
  11. new Sociallinktask() {
  12. Csharpcorner = "https://www.c-sharpcorner.com/members/xamarin-skills",
  13. YtLink = "https://www.youtube.com/channel/UCmcWO6GbETogq_ULHf1PX2A",
  14. LinkedLink = "linkedin://profile/company/sumit-sisodia-5a5868a4/",
  15. BloggerLink= "https://xamarinskills.blogspot.com/" ,
  16. InstaLink = "instagram://user?username=sumit_sisodia77",
  17. }
  18. },
  19. City = "Indore",
  20. FirstName = "Sumit",
  21. LastName = "Sisodia",
  22. Designation = "Xamarin Developer",
  23. Description="I have 3+ year of experience in hybrid mobile development using xamarin.forms with C#. He is enthusiastic and take an interest in developing new things. He above in watching movies, He a good blogger, generally wrote blogs on xamarin forms.",
  24. ImageUrl="https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/AuthorImage/9cd3bf20200522093419.jpg"
  25. },
  26. new Aboutteam() {
  27. linkSocial = new List<Sociallinktask>() {
  28. new Sociallinktask() {
  29. InstaLink = "instagram://user?username=sagziie",
  30. BloggerLink= "https://www.behance.net/sagzie",
  31. YtLink = "",
  32. Csharpcorner = "",
  33. LinkedLink = "" ,
  34. }
  35. },
  36. City = "Ahemdabad",
  37. FirstName = "Sagar",
  38. LastName = "Panchal",
  39. Designation = "UI/XD Designer" ,
  40. Description = "I have 5+ year of experience in UI/UX development using xamarin.forms with C#. He is enthusiastic and take an interest in developing new things. He above in watching movies.",
  41. ImageUrl="https://mir-s3-cdn-cf.behance.net/user/115/b6478f18287823.5676855c9a3df.jpg"
  42. }
  43. }
  44. };
  46. MobIfo = new DeviceInformation();
  47. }
  48. catch (Exception ex)
  49. {
  50. }
  51. }
  53. private string about= "During the COVID pandemic situation all over the world, we get an idea to develop an app which has tracking record of the cases by counties and also show safety measures aims.";
  54. public string About
  55. {
  56. get { return about; }
  57. set
  58. {
  59. about = value;
  60. RaisePropertyChanged(() =>About);
  61. }
  62. }
  65. private DeviceInformation mobinfo ;
  66. public DeviceInformation MobIfo
  67. {
  68. get { return mobinfo; }
  69. set { mobinfo = value; RaisePropertyChanged(() => MobIfo); }
  70. }
  72. private AboutTeamModel aboutteammodel;
  73. public AboutTeamModel AboutTeamModel
  74. {
  75. get { return aboutteammodel; }
  76. set
  77. {
  78. aboutteammodel = value;
  79. RaisePropertyChanged(() => AboutTeamModel);
  80. }
  81. }
  83. public ICommand SocialCommand
  84. {
  85. get
  86. {
  87. return new Command<string>((x) => SocialCommandExecution(x));
  88. }
  89. }
  91. public void SocialCommandExecution(string x)
  92. {
  93. if (string.IsNullOrEmpty(x))
  94. UserDialogs.Instance.Alert("We have no url", "Alert", "OK");
  95. else
  96. try
  97. {
  98. Device.OpenUri(new Uri(x));
  99. }
  100. catch (Exception ex)
  101. { }
  102. }
  103. }
  104. }
AboutTeamModel.cs
  1. public partial class AboutTeamModel
  2. {
  3. public string CardsTopImage { get; set; }
  4. public List<Aboutteam> AboutteamData { get; set; }
  5. }
  7. public partial class Aboutteam
  8. {
  9. public string FirstName { get; set; }
  10. public string LastName { get; set; }
  11. public string City { get; set; }
  12. public string Designation { get; set; }
  13. public string ImageUrl { get; set; }
  14. public string Description { get; set; }
  15. public List<Sociallinktask> linkSocial { get; set; }
  16. }
  18. public partial class Sociallinktask
  19. {
  20. public string LinkedLink { get; set; }
  21. public string YtLink { get; set; }
  22. public string InstaLink { get; set; }
  23. public string Csharpcorner { get; set; }
  24. public string BloggerLink { get; set; }
  25. }

CovidTabbedPage

In this CovidTabbedPage, we have to add the following pages Like COVID Global, COVID Home, COVID-19 Country search, and an About Us Page. Below, I have written the CovidTabbedPage.
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <TabbedPage
  3. x:Class="Covid19.Views.CovidTabbedPage"
  4. xmlns="http://xamarin.com/schemas/2014/forms"
  5. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  6. xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
  7. xmlns:d="http://xamarin.com/schemas/2014/forms/design"
  8. xmlns:helper="clr-namespace:Covid19.Helper"
  9. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  10. xmlns:views="clr-namespace:Covid19.Views"
  11. android:TabbedPage.ToolbarPlacement="Bottom"
  12. BarBackgroundColor="White"
  13. BarTextColor="#4C79FF"
  14. SelectedTabColor="#4C79FF"
  15. UnselectedTabColor="#999FBF"
  16. mc:Ignorable="d">
  17. <views:GlobalReport IconImageSource="{FontImage FontFamily=FontAwesome, Glyph={x:Static helper:IconFont.Earth}, Size=30, Color=Orange}" />
  18. <views:HomeReport IconImageSource="{FontImage FontFamily=FontAwesome, Glyph={x:Static helper:IconFont.Home}, Size=30, Color=Orange}" />
  19. <views:CountryReport IconImageSource="{FontImage FontFamily=FontAwesome, Glyph={x:Static helper:IconFont.Flag}, Size=30, Color=Orange}" />
  20. <views:AboutReport IconImageSource="{FontImage FontFamily=FontAwesome, Glyph={x:Static helper:IconFont.Face}, Size=30, Color=Orange}" />
  22. </TabbedPage>
If you want to check the git click here.
If you want to check apk click here.
For adding awesome font in Xamarin forms click here.