From 152bf58f78d4a3b4d7e6cfb13c2fd582e97946bf Mon Sep 17 00:00:00 2001
From: Brian Diego de Souza <Brian-desouza@hotmail.com>
Date: Fri, 26 Apr 2019 23:58:00 -0300
Subject: [PATCH] Try to replicate listview crunchyroll

---
 .../Resources/values/styles.xml               |  2 +-
 .../CollectionViewChallenge/AppShell.xaml     |  2 +-
 .../CollectionViewChallenge.csproj            |  5 ---
 .../CollectionViewChallenge/Models/Anime.cs   | 13 ++++++
 .../ViewModels/BaseViewModel.cs               | 36 ++++++++++++++++
 .../ViewModels/CollecionViewModel.cs          | 38 +++++++++++++++++
 .../Views/CollectionViewChallengePage.xaml    | 41 +++++++++++--------
 .../Views/CollectionViewChallengePage.xaml.cs |  1 +
 8 files changed, 115 insertions(+), 23 deletions(-)
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/Models/Anime.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollecionViewModel.cs

diff --git a/CollectionViewChallenge/CollectionViewChallenge.Android/Resources/values/styles.xml b/CollectionViewChallenge/CollectionViewChallenge.Android/Resources/values/styles.xml
index 43b0a58..0e09c55 100644
--- a/CollectionViewChallenge/CollectionViewChallenge.Android/Resources/values/styles.xml
+++ b/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>
diff --git a/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml b/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml
index 9364c60..12a604e 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml
+++ b/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" />
diff --git a/CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj b/CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj
index 3ccfc60..68a81c0 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj
+++ b/CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj
@@ -20,9 +20,4 @@
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
   </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="Models\" />
-    <Folder Include="ViewModels\" />
-  </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Models/Anime.cs b/CollectionViewChallenge/CollectionViewChallenge/Models/Anime.cs
new file mode 100644
index 0000000..06cda06
--- /dev/null
+++ b/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; }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs
new file mode 100644
index 0000000..4639548
--- /dev/null
+++ b/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));
+        }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollecionViewModel.cs b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollecionViewModel.cs
new file mode 100644
index 0000000..f3a908c
--- /dev/null
+++ b/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}
+            };
+        }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
index f2da7f7..9b62184 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
+++ b/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>
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
index 701124f..b7e46cf 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
+++ b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
@@ -15,6 +15,7 @@ public partial class CollectionViewChallengePage : ContentPage
         public CollectionViewChallengePage()
         {
             InitializeComponent();
+            BindingContext = new ViewModels.CollecionViewModel(); 
         }
     }
 }
\ No newline at end of file