Marvel's Super Heroes Book

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>

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/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; }
+    }
+}

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);
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/Services/MarvelService.cs

@@ -0,0 +1,126 @@
+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"
+                },
+
+                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)
+            {
+                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);
+        }
+    }
+}

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
+    }
+}

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 Heroes";
+            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;
+            }
+        }
+    }
+}

CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml

@@ -4,29 +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>
-                <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">
-                            <Label Text="{Binding .}" d:Text="Design Time Data" FontSize="10"/>
-                        </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>

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,16 @@ 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;
+            }
         }
     }
 }