From 7adb89a7df4036a10587bf550dcc5ea24db5811a Mon Sep 17 00:00:00 2001
From: Cleiton Felipe de Moraes <omehe.cleiton@hotmail.com>
Date: Thu, 25 Apr 2019 15:46:35 -0300
Subject: [PATCH 1/2] First version

---
 .../CollectionViewChallenge.csproj            |  5 --
 .../Models/Character.cs                       | 15 ++++++
 .../Services/IMarvelService.cs                | 13 +++++
 .../Services/MarvelService.cs                 | 49 +++++++++++++++++
 .../ViewModels/BaseViewModel.cs               | 54 +++++++++++++++++++
 .../CollectionViewChallengeViewModel.cs       | 48 +++++++++++++++++
 .../Views/CollectionViewChallengePage.xaml    | 47 ++++++++++++++--
 .../Views/CollectionViewChallengePage.xaml.cs | 17 +++++-
 8 files changed, 238 insertions(+), 10 deletions(-)
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/Models/Character.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/Services/IMarvelService.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs
 create mode 100644 CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs

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/Character.cs b/CollectionViewChallenge/CollectionViewChallenge/Models/Character.cs
new file mode 100644
index 0000000..090b8a5
--- /dev/null
+++ b/CollectionViewChallenge/CollectionViewChallenge/Models/Character.cs
@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace CollectionViewChallenge.Models
+{
+    public class Character
+    {
+        public string Id { get; set; }
+        public string Name { get; set; }
+        public string Description { get; set; }
+        public string UrlImage { get; set; }
+        public string UrlWiki { get; set; }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Services/IMarvelService.cs b/CollectionViewChallenge/CollectionViewChallenge/Services/IMarvelService.cs
new file mode 100644
index 0000000..fb46550
--- /dev/null
+++ b/CollectionViewChallenge/CollectionViewChallenge/Services/IMarvelService.cs
@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CollectionViewChallenge.Services
+{
+    public interface IMarvelService<T>
+    {
+        Task<T> GetCharacterAsync(string id);
+        Task<IEnumerable<T>> GetCharactersAsync(bool forceRefresh = false);
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs b/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
new file mode 100644
index 0000000..b4c21e9
--- /dev/null
+++ b/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
@@ -0,0 +1,49 @@
+using CollectionViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CollectionViewChallenge.Services
+{
+    public class MarvelService : IMarvelService<Character>
+    {
+        private List<Character> characters;
+
+        public MarvelService()
+        {
+            characters = new List<Character>();
+            var mockItems = new List<Character>
+            {
+                new Character {
+                    Id = "1009220",
+                    Name = "Captain America",
+                    Description ="Vowing to serve his country any way he could, young Steve Rogers took the super soldier serum to become America's one-man army. Fighting for the red, white and blue for over 60 years, Captain America is the living, breathing symbol of freedom and liberty.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/3/50/537ba56d31087.jpg"
+                },
+
+                new Character {
+                    Id = "1009368",
+                    Name = "Iron Man",
+                    Description ="Wounded, captured and forced to build a weapon by his enemies, billionaire industrialist Tony Stark instead created an advanced suit of armor to save his life and escape captivity. Now with a new outlook on life, Tony uses his money and intelligence to make the world a safer, better place as Iron Man.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/9/c0/527bb7b37ff55.jpg"
+                },
+            };
+
+            foreach (var item in mockItems)
+            {
+                characters.Add(item);
+            }
+        }
+        public async Task<Character> GetCharacterAsync(string id)
+        {
+            return await Task.FromResult(characters.FirstOrDefault(s => s.Id == id));
+        }
+
+        public async Task<IEnumerable<Character>> GetCharactersAsync(bool forceRefresh = false)
+        {
+            return await Task.FromResult(characters);
+        }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs
new file mode 100644
index 0000000..1f225d0
--- /dev/null
+++ b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/BaseViewModel.cs
@@ -0,0 +1,54 @@
+using CollectionViewChallenge.Models;
+using CollectionViewChallenge.Services;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using Xamarin.Forms;
+
+namespace CollectionViewChallenge.ViewModels
+{
+    public class BaseViewModel : INotifyPropertyChanged
+    {
+        public IMarvelService<Character> MarvelServices => DependencyService.Get<IMarvelService<Character>>() ?? new MarvelService();
+
+        bool isBusy = false;
+        public bool IsBusy
+        {
+            get { return isBusy; }
+            set { SetProperty(ref isBusy, value); }
+        }
+
+        string title = string.Empty;
+        public string Title
+        {
+            get { return title; }
+            set { SetProperty(ref title, value); }
+        }
+
+        protected bool SetProperty<T>(ref T backingStore, T value,
+            [CallerMemberName]string propertyName = "",
+            Action onChanged = null)
+        {
+            if (EqualityComparer<T>.Default.Equals(backingStore, value))
+                return false;
+
+            backingStore = value;
+            onChanged?.Invoke();
+            OnPropertyChanged(propertyName);
+            return true;
+        }
+
+        #region INotifyPropertyChanged
+        public event PropertyChangedEventHandler PropertyChanged;
+        protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
+        {
+            var changed = PropertyChanged;
+            if (changed == null)
+                return;
+
+            changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+        #endregion
+    }
+}
\ No newline at end of file
diff --git a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs
new file mode 100644
index 0000000..e79478b
--- /dev/null
+++ b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs
@@ -0,0 +1,48 @@
+using CollectionViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Text;
+using System.Threading.Tasks;
+using Xamarin.Forms;
+
+namespace CollectionViewChallenge.ViewModels
+{
+    public class CollectionViewChallengeViewModel : BaseViewModel
+    {
+        public ObservableCollection<Character> Characters { get; set; }
+        public Command LoadCharactersCommand { get; set; }
+
+        public CollectionViewChallengeViewModel()
+        {
+            Title = "Marvel's Super Heros";
+            Characters = new ObservableCollection<Character>();
+            LoadCharactersCommand = new Command(async () => await ExecuteLoadCharactersCommand());
+        }
+        async Task ExecuteLoadCharactersCommand()
+        {
+            if (IsBusy)
+                return;
+
+            IsBusy = true;
+
+            try
+            {
+                Characters.Clear();
+                var items = await MarvelServices.GetCharactersAsync(true);
+                foreach (var item in items)
+                {
+                    Characters.Add(item);
+                }
+            }
+            catch (Exception ex)
+            {
+                //Debug.WriteLine(ex);
+            }
+            finally
+            {
+                IsBusy = false;
+            }
+        }
+    }
+}
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
index f2da7f7..c766b5c 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
+++ b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
@@ -8,8 +8,8 @@
     <ContentPage.Content>
         <StackLayout>
             <!-- Use your own layout and functionality here! -->
-            <CollectionView>
-                <CollectionView.ItemsSource>
+            <CollectionView x:Name="collectionViewSource">
+                <!--<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>
@@ -18,11 +18,50 @@
                         <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>
+                </CollectionView.ItemsSource>-->
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
                         <StackLayout Padding="5">
-                            <Label Text="{Binding .}" d:Text="Design Time Data" FontSize="10"/>
+                            <!--<Image Source="{Binding UrlImage}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit"/>
+                            <Label Text="{Binding Name}" />
+                            <Label Text="{Binding Description}" />-->
+                            <Grid>
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" />
+                                </Grid.RowDefinitions>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <!--<controls:CircleImage Source="{Binding UrlImage}" 
+                                                      Aspect="AspectFit"
+                                                      Grid.Row="0"
+                                                      Grid.Column="0"
+                                                      Grid.RowSpan="2">
+                                    <controls:CircleImage.WidthRequest>
+                                        <OnPlatform x:TypeArguments="x:Double">
+                                            <On Platform="Android, iOS">55</On>
+                                            <On Platform="WinPhone">75</On>
+                                        </OnPlatform>
+                                    </controls:CircleImage.WidthRequest>
+                                    <controls:CircleImage.HeightRequest>
+                                        <OnPlatform x:TypeArguments="x:Double">
+                                            <On Platform="Android, iOS">55</On>
+                                            <On Platform="WinPhone">75</On>
+                                        </OnPlatform>
+                                    </controls:CircleImage.HeightRequest>
+                                </controls:CircleImage>-->
+                                <Image Source="{Binding UrlImage}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit"/>
+                                <Label Text="{Binding Name}" 
+                                       LineBreakMode="NoWrap"                                         
+                                       FontSize="16" 
+                                       Grid.Row="0" 
+                                       Grid.Column="1"/>
+                                <Label Text="{Binding Description}" 
+                                       LineBreakMode="NoWrap"
+                                       FontSize="13"                                        
+                                       Grid.Row="1" 
+                                       Grid.Column="1"/>
+                            </Grid>
                         </StackLayout>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
index 701124f..bf33324 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
+++ b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
@@ -1,4 +1,5 @@
-using System;
+using CollectionViewChallenge.ViewModels;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -12,9 +13,23 @@ namespace CollectionViewChallenge.Views
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class CollectionViewChallengePage : ContentPage
     {
+        public CollectionViewChallengeViewModel viewModel;
         public CollectionViewChallengePage()
         {
             InitializeComponent();
+            BindingContext = viewModel = new CollectionViewChallengeViewModel();
+            if (viewModel.Characters.Count == 0)
+            {
+                viewModel.LoadCharactersCommand.Execute(null);
+                collectionViewSource.ItemsSource = viewModel.Characters;
+            }
         }
+        //protected override void OnAppearing()
+        //{
+        //    base.OnAppearing();
+
+        //    //if (viewModel.Characters.Count == 0)
+        //    //    viewModel.LoadCharactersCommand.Execute(null);
+        //}
     }
 }
\ No newline at end of file

From e61183f92608b428ceee92846e34d69b839baaf0 Mon Sep 17 00:00:00 2001
From: Cleiton Felipe de Moraes <omehe.cleiton@hotmail.com>
Date: Thu, 25 Apr 2019 23:41:01 -0300
Subject: [PATCH 2/2] CollectionView Final

---
 .../CollectionViewChallenge/AppShell.xaml     |  6 +-
 .../Services/MarvelService.cs                 | 77 ++++++++++++++++
 .../CollectionViewChallengeViewModel.cs       |  2 +-
 .../Views/CollectionViewChallengePage.xaml    | 91 ++++++-------------
 .../Views/CollectionViewChallengePage.xaml.cs |  7 --
 5 files changed, 111 insertions(+), 72 deletions(-)

diff --git a/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml b/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml
index 9364c60..c8da2dd 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml
+++ b/CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml
@@ -70,9 +70,9 @@
 
     <!-- Your Pages -->
     <ShellItem>
-        <ShellSection Title="CollectionView" Icon="tab_feed.png">
-            <ShellContent Title="CollectionView">
-                <local:CollectionViewChallengePage Title="CollectionView"/>
+        <ShellSection Title="{Binding Title}" Icon="tab_feed.png">
+            <ShellContent Title="{Binding Title}">
+                <local:CollectionViewChallengePage Title="{Binding Title}"/>
             </ShellContent>
         </ShellSection>
     </ShellItem>
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs b/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
index b4c21e9..13248b9 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
+++ b/CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs
@@ -29,6 +29,83 @@ public MarvelService()
                     Description ="Wounded, captured and forced to build a weapon by his enemies, billionaire industrialist Tony Stark instead created an advanced suit of armor to save his life and escape captivity. Now with a new outlook on life, Tony uses his money and intelligence to make the world a safer, better place as Iron Man.",
                     UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/9/c0/527bb7b37ff55.jpg"
                 },
+
+                new Character {
+                    Id = "1009189",
+                    Name = "Black Widow",
+                    Description ="",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/f/30/50fecad1f395b.jpg"
+                },
+
+                new Character {
+                    Id = "1009351",
+                    Name = "Hulk",
+                    Description ="Caught in a gamma bomb explosion while trying to save the life of a teenager, Dr. Bruce Banner was transformed into the incredibly powerful creature called the Hulk. An all too often misunderstood hero, the angrier the Hulk gets, the stronger the Hulk gets.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/5/a0/538615ca33ab0.jpg"
+                },
+
+                new Character {
+                    Id = "1009368",
+                    Name = "Spider-Man",
+                    Description ="Bitten by a radioactive spider, high school student Peter Parker gained the speed, strength and powers of a spider. Adopting the name Spider-Man, Peter hoped to start a career using his new abilities. Taught that with great power comes great responsibility, Spidey has vowed to use his powers to help people.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/3/50/526548a343e4b.jpg"
+                },
+
+                new Character {
+                    Id = "1009282",
+                    Name = "Doctor Strange",
+                    Description ="",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/5/f0/5261a85a501fe.jpg"
+                },
+
+                new Character {
+                    Id = "1009338",
+                    Name = "Hawkeye",
+                    Description ="",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/e/90/50fecaf4f101b.jpg"
+                },
+
+                new Character {
+                    Id = "1009652",
+                    Name = "Thanos",
+                    Description ="The Mad Titan Thanos, a melancholy, brooding individual, consumed with the concept of death, sought out personal power and increased strength, endowing himself with cybernetic implants until he became more powerful than any of his brethren.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/6/40/5274137e3e2cd.jpg"
+                },
+
+                new Character{
+                    Id = "1009685",
+                    Name = "Ultron",
+                    Description = "Arguably the greatest and certainly the most horrific creation of scientific genius Dr. Henry Pym, Ultron is a criminally insane rogue sentient robot dedicated to conquest and the extermination of humanity.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/3/70/5261a838e93c0.jpg"
+                },
+
+                new Character{
+                    Id = "1009187",
+                    Name = "Black Panther",
+                    Description = "",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/6/60/5261a80a67e7d.jpg"
+                },
+
+                new Character{
+                    Id = "1010338",
+                    Name = "Captain Marvel (Carol Danvers)",
+                    Description = "",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/6/80/5269608c1be7a.jpg"
+                },
+
+                new Character{
+                    Id = "1009664",
+                    Name = "Thor",
+                    Description = "As the Norse God of thunder and lightning, Thor wields one of the greatest weapons ever made, the enchanted hammer Mjolnir. While others have described Thor as an over-muscled, oafish imbecile, he's quite smart and compassionate.  He's self-assured, and he would never, ever stop fighting for a worthwhile cause.",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/d/d0/5269657a74350.jpg"
+                },
+
+                new Character{
+                    Id = "1009407",
+                    Name = "Loki",
+                    Description = "",
+                    UrlImage = "http://i.annihil.us/u/prod/marvel/i/mg/d/90/526547f509313.jpg"
+                }
             };
 
             foreach (var item in mockItems)
diff --git a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs
index e79478b..b96a3db 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs
+++ b/CollectionViewChallenge/CollectionViewChallenge/ViewModels/CollectionViewChallengeViewModel.cs
@@ -15,7 +15,7 @@ public class CollectionViewChallengeViewModel : BaseViewModel
 
         public CollectionViewChallengeViewModel()
         {
-            Title = "Marvel's Super Heros";
+            Title = "Marvel's Super Heroes";
             Characters = new ObservableCollection<Character>();
             LoadCharactersCommand = new Command(async () => await ExecuteLoadCharactersCommand());
         }
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
index c766b5c..71705d6 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
+++ b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
@@ -4,68 +4,37 @@
              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"
+             Title="{Binding Title}"
+             BackgroundColor="Black">
     <ContentPage.Content>
-        <StackLayout>
-            <!-- Use your own layout and functionality here! -->
-            <CollectionView x:Name="collectionViewSource">
-                <!--<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>-->
-                <CollectionView.ItemTemplate>
-                    <DataTemplate>
-                        <StackLayout Padding="5">
-                            <!--<Image Source="{Binding UrlImage}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit"/>
-                            <Label Text="{Binding Name}" />
-                            <Label Text="{Binding Description}" />-->
-                            <Grid>
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="*" />
-                                </Grid.RowDefinitions>
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                </Grid.ColumnDefinitions>
-                                <!--<controls:CircleImage Source="{Binding UrlImage}" 
-                                                      Aspect="AspectFit"
-                                                      Grid.Row="0"
-                                                      Grid.Column="0"
-                                                      Grid.RowSpan="2">
-                                    <controls:CircleImage.WidthRequest>
-                                        <OnPlatform x:TypeArguments="x:Double">
-                                            <On Platform="Android, iOS">55</On>
-                                            <On Platform="WinPhone">75</On>
-                                        </OnPlatform>
-                                    </controls:CircleImage.WidthRequest>
-                                    <controls:CircleImage.HeightRequest>
-                                        <OnPlatform x:TypeArguments="x:Double">
-                                            <On Platform="Android, iOS">55</On>
-                                            <On Platform="WinPhone">75</On>
-                                        </OnPlatform>
-                                    </controls:CircleImage.HeightRequest>
-                                </controls:CircleImage>-->
-                                <Image Source="{Binding UrlImage}" WidthRequest="50" HeightRequest="50" Aspect="AspectFit"/>
-                                <Label Text="{Binding Name}" 
-                                       LineBreakMode="NoWrap"                                         
-                                       FontSize="16" 
-                                       Grid.Row="0" 
-                                       Grid.Column="1"/>
-                                <Label Text="{Binding Description}" 
-                                       LineBreakMode="NoWrap"
-                                       FontSize="13"                                        
-                                       Grid.Row="1" 
-                                       Grid.Column="1"/>
-                            </Grid>
-                        </StackLayout>
-                    </DataTemplate>
-                </CollectionView.ItemTemplate>
-            </CollectionView>
+        <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
+            <ScrollView x:Name="scroll" Orientation="Vertical" VerticalOptions="FillAndExpand">
+                <CollectionView x:Name="collectionViewSource">
+                    <CollectionView.ItemTemplate>
+                        <DataTemplate>
+                            <StackLayout Padding="5" Orientation="Vertical" VerticalOptions="FillAndExpand">
+                                <Frame HasShadow="True">
+                                    <StackLayout BackgroundColor="DarkBlue">
+                                        <Image Source="{Binding UrlImage}" 
+                                               WidthRequest="150" 
+                                               HeightRequest="150" 
+                                               Aspect="AspectFill"/>
+                                        <Label Text="{Binding Name}" 
+                                               LineBreakMode="NoWrap"                                         
+                                               FontSize="20" 
+                                               TextColor="White" />
+                                        <Label Text="{Binding Description}" 
+                                               LineBreakMode="NoWrap"
+                                               FontSize="13"
+                                               TextColor="WhiteSmoke"/>
+                                    </StackLayout>
+                                </Frame>
+                            </StackLayout>
+                        </DataTemplate>
+                    </CollectionView.ItemTemplate>
+                </CollectionView>
+            </ScrollView>
         </StackLayout>
     </ContentPage.Content>
 </ContentPage>
\ No newline at end of file
diff --git a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
index bf33324..6a6ba2e 100644
--- a/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
+++ b/CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
@@ -24,12 +24,5 @@ public CollectionViewChallengePage()
                 collectionViewSource.ItemsSource = viewModel.Characters;
             }
         }
-        //protected override void OnAppearing()
-        //{
-        //    base.OnAppearing();
-
-        //    //if (viewModel.Characters.Count == 0)
-        //    //    viewModel.LoadCharactersCommand.Execute(null);
-        //}
     }
 }
\ No newline at end of file