Try to replicate listview crunchyroll

CollectionViewChallenge/CollectionViewChallenge.Android/Resources/values/styles.xml

@@ -13,7 +13,7 @@
     <!-- colorPrimary is used for the default action bar background -->
     <item name="colorPrimary">#2196F3</item>
     <!-- colorPrimaryDark is used for the status bar -->
-    <item name="colorPrimaryDark">#1976D2</item>
+    <item name="colorPrimaryDark">#d07325</item>
     <!-- colorAccent is used as the default value for colorControlActivated
          which is used to tint widgets -->
     <item name="colorAccent">#FF4081</item>

CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml

@@ -52,7 +52,7 @@
     -->
     <Shell.Resources>
         <ResourceDictionary>
-            <Color x:Key="NavigationPrimary">#2196F3</Color>
+            <Color x:Key="NavigationPrimary">#f78c24</Color>
             <Style x:Key="BaseStyle" TargetType="Element">
                 <Setter Property="Shell.ShellBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                 <Setter Property="Shell.ShellForegroundColor" Value="White" />

CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj

@@ -20,9 +20,4 @@
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
   </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="Models\" />
-    <Folder Include="ViewModels\" />
-  </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge/Models/Anime.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace CollectionViewChallenge.Models
+{
+    public class Anime
+    {
+        public Uri Imagem { get; set; }
+        public string Nome { get; set; }
+        public int NumeroVideos { get; set; }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs

@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using System.Text;
+
+namespace CollectionViewChallenge.ViewModels
+{
+    public class BaseViewModel : INotifyPropertyChanged
+    {
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+
+        public BaseViewModel()
+        {
+        }
+
+        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName]string propertyName = null)
+        {
+            if (EqualityComparer<T>.Default.Equals(storage, value))
+            {
+                return false;
+            }
+            storage = value;
+            OnPropertyChanged(propertyName);
+
+            return true;
+        }
+
+        protected virtual void OnPropertyChanged([CallerMemberName]string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollecionViewModel.cs

@@ -0,0 +1,38 @@
+using CollectionViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Text;
+
+namespace CollectionViewChallenge.ViewModels
+{
+    public class CollecionViewModel : BaseViewModel
+    {
+        private ObservableCollection<Anime> _listaAnimes;
+
+        public ObservableCollection<Anime> ListaAnimes
+        {
+            get { return _listaAnimes; }
+            set
+            {
+                SetProperty(ref _listaAnimes, value);
+            }
+        }
+
+        public CollecionViewModel()
+        {
+            ListaAnimes = new ObservableCollection<Anime>()
+            {
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire3/defc9dc5865e0be33eb3b0326abf28361547765748_full.jpg"),Nome = "Sword Art Online" , NumeroVideos = 150},
+                new Anime{  Imagem = new Uri("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFEpxqYtVt28N364gASnJD-Er9QIPAr1uPwQTo23Jgon4w_R_r"),Nome = "Naruto	" , NumeroVideos = 900},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire1/281089c6a9e64236a10e3b4232474e411532451975_full.jpg"),Nome = "My hero academy" , NumeroVideos = 100},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire3/cbb55a6382682bf71e91f685c6473c5a1487736090_full.jpg"),Nome = "Hunter X Hunter" , NumeroVideos = 200},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire3/f1fe5c7a43cb2f38f4152a58f89479821554508873_full.jpg"),Nome = "Demon Slayer" , NumeroVideos = 3},
+                new Anime{  Imagem = new Uri("https://cdn.animeultima.tv/cover-photo/1034/y3nb92t2npzi9trviVbOrreBfZu0Jts0EiMRW4yr.jpeg"),Nome = "The Rising of Shield" , NumeroVideos = 33},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire1/c0d08a06dae2ed2877cd15e303df87491533959656_full.jpg"),Nome = "Black Clover" , NumeroVideos = 70},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire2/c33592b4651e7cccf7ec66244e0f8ee81555537663_full.jpg"),Nome = "Bungo stray dogs" , NumeroVideos = 36},
+                new Anime{  Imagem = new Uri("https://img1.ak.crunchyroll.com/i/spire2/9adde4f9cc8b426d323003388462d70b1551299649_full.jpg"),Nome = "Boruto" , NumeroVideos = 50}
+            };
+        }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml

@@ -4,26 +4,35 @@
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d"
-             x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage">
+             x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage"
+             BackgroundColor="LightGray">
     <ContentPage.Content>
         <StackLayout>
-            <!-- Use your own layout and functionality here! -->
-            <CollectionView>
-                <CollectionView.ItemsSource>
-                    <x:Array Type="{x:Type x:String}">
-                        <x:String>This is a CollectionView!</x:String>
-                        <x:String>Your feedback on the experience of converting a ListView to a CollectionView is incredibly appreciated.</x:String>
-                        <x:String>Here are three general questions:</x:String>
-                        <x:String>1. How was the experience of converting your existing ListView to a CollectionView?</x:String>
-                        <x:String>2. How is the performance compared to the ListView?</x:String>
-                        <x:String>3. Is there a specific piece of functionality that you'd like to see?</x:String>
-                    </x:Array>
-                </CollectionView.ItemsSource>
+            <Label TextColor="Black" Text="POPULAR" Margin="10" FontAttributes="Bold"></Label>
+            <CollectionView
+                ItemsSource="{Binding ListaAnimes}"
+                BackgroundColor="LightGray">
+                <CollectionView.ItemsLayout>
+                    <GridItemsLayout Orientation="Horizontal" Span="3"></GridItemsLayout>
+                </CollectionView.ItemsLayout>
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
-                        <StackLayout Padding="5">
-                            <Label Text="{Binding .}" d:Text="Design Time Data" FontSize="10"/>
-                        </StackLayout>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"></ColumnDefinition>
+                                <ColumnDefinition Width="Auto"></ColumnDefinition>
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="195"></RowDefinition>
+                            </Grid.RowDefinitions>
+                            <Frame  HasShadow="True" >
+                                <StackLayout Grid.Column="0" HorizontalOptions="Center" Spacing="0">
+                                    <Image Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="80" HeightRequest="120" HorizontalOptions="Start"></Image>
+                                    <Label Text="{Binding Nome}" FontSize="Small" TextColor="Black" HorizontalTextAlignment="Start"/>
+                                    <Label Text="{Binding NumeroVideos,StringFormat=' {0} Videos.'}" FontSize="Micro" TextColor="Gray"  HorizontalTextAlignment="Start" Margin="0,0,0,5"/>
+                                </StackLayout>
+                            </Frame>
+                        </Grid>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
             </CollectionView>

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs

@@ -15,6 +15,7 @@ public partial class CollectionViewChallengePage : ContentPage
         public CollectionViewChallengePage()
         {
             InitializeComponent();
+            BindingContext = new ViewModels.CollecionViewModel(); 
         }
     }
 }