Post
Ask Question

Covid-19 App In Xamarin Forms - Part Two

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>    
  42.     
  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>    
  48.     
  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}" />    
  121.     
  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" />    
  168.     
  169.                                                 <!--  Employee name  -->    
  170.                                                 <Label    
  171.                                                     FontFamily="OpenSansBold"    
  172.                                                     HorizontalOptions="Center"    
  173.                                                     Style="{StaticResource DescriptionLabelStyle}"    
  174.                                                     Text="{Binding FirstName}"    
  175.                                                     TextColor="{DynamicResource Gray-900}" />    
  176.     
  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}" />    
  190.     
  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}" />    
  300.     
  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.             };  
  45.   
  46.                 MobIfo = new DeviceInformation();  
  47.             }  
  48.             catch (Exception ex)  
  49.             {   
  50.             }   
  51.         }  
  52.   
  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.         }  
  63.   
  64.   
  65.         private DeviceInformation mobinfo ;  
  66.         public DeviceInformation MobIfo  
  67.         {  
  68.             get { return mobinfo; }  
  69.             set { mobinfo = value; RaisePropertyChanged(() => MobIfo); }  
  70.         }  
  71.   
  72.         private AboutTeamModel aboutteammodel;   
  73.         public AboutTeamModel AboutTeamModel  
  74.         {  
  75.             get { return aboutteammodel; }  
  76.             set   
  77.             {  
  78.                 aboutteammodel = value;  
  79.                 RaisePropertyChanged(() => AboutTeamModel);   
  80.             }  
  81.         }  
  82.            
  83.         public ICommand SocialCommand  
  84.         {  
  85.             get  
  86.             {  
  87.                 return new Command<string>((x) => SocialCommandExecution(x));  
  88.             }  
  89.         }  
  90.   
  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.   }  
  6.   
  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.   }  
  17.   
  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}" />      
  21.          
  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.


Similar Articles