Add sample

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -63,6 +63,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <AndroidAsset Include="Assets\materialdesignicons-webfont.ttf" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
     <None Include="Properties\AndroidManifest.xml" />
@@ -100,5 +101,23 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Zurich.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\ZurichLandmark.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\London.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Restaurant.jpeg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Seattle.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\Sight.jpeg" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj

@@ -65,6 +65,7 @@
     <None Include="Entitlements.plist" />
     <None Include="Info.plist" />
     <Compile Include="Properties\AssemblyInfo.cs" />
+    <BundleResource Include="Resources\materialdesignicons-webfont.ttf" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -6,12 +6,14 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Xamarin.Forms" Version="4.3.0.778476-pre1" />  
-    <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
+    <Compile Remove="Models\**" />
+    <EmbeddedResource Remove="Models\**" />
+    <None Remove="Models\**" />
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="Models\" />
+    <PackageReference Include="Xamarin.Forms" Version="4.3.0.778476-pre1" />  
+    <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
   </ItemGroup>
 
   <ItemGroup>

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewModel.cs

@@ -0,0 +1,136 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Xamarin.Forms;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    public class CarouselViewModel : BaseViewModel
+    {
+        public CarouselViewModel()
+        {
+            _cities = new ObservableCollection<City>
+            {
+                new City
+                {
+                    CityImage = "London",
+                    CityName = "London",
+                    Country = "UK",
+                    IsFavorite = false,
+                },
+                new City
+                {
+                    CityImage = "Zurich",
+                    CityName = "Zurich",
+                    Country = "Switzerland",
+                    IsFavorite = true,
+                },
+                new City
+                {
+                    CityImage = "Seattle",
+                    CityName = "Seattle",
+                    Country = "USA",
+                    IsFavorite = false,
+                },
+            };
+            Index = "1";
+        }
+
+        private ObservableCollection<City> _cities;
+        private City _currentCity;
+        private string _index;
+
+        public ObservableCollection<City> Cities
+        {
+            get
+            {
+                return _cities;
+            }
+            set
+            {
+                if (_cities != value)
+                {
+                    _cities = value;
+                    OnPropertyChanged(nameof(Cities));
+                }
+            }
+        }
+
+        public string Index
+        {
+            get => _index; set
+            {
+                _index = value;
+
+                OnPropertyChanged(nameof(Index));
+            }
+        }
+
+        public City CurrentCity
+        {
+            get
+            {
+                return _currentCity;
+            }
+            set
+            {
+                _currentCity = value;
+                var index = Cities.IndexOf(_currentCity);
+                Index = (index + 1).ToString();
+                OnPropertyChanged(nameof(CurrentCity));
+            }
+        }
+    }
+
+    public class City : BaseViewModel, IEquatable<City>
+    {
+        private bool _isFavorite;
+
+        public City()
+        {
+            ChangeFavoriteStatus = new Command(() => IsFavorite = !IsFavorite);
+        }
+
+        public string CityImage { get; set; }
+        public string CityName { get; set; }
+        public string Country { get; set; }
+        public string FavoriteIcon => IsFavorite ? "\uf2d1" : "\uf2d5";
+        public bool IsFavorite
+        {
+            get => _isFavorite;
+            set
+            {
+                _isFavorite = value;
+                OnPropertyChanged(nameof(FavoriteIcon));
+            }
+        }
+
+        public Command ChangeFavoriteStatus { get; set; }
+
+        public override bool Equals(object obj)
+        {
+            return Equals(obj as City);
+        }
+
+        public bool Equals(City other)
+        {
+            return other != null &&
+                   CityImage == other.CityImage &&
+                   CityName == other.CityName &&
+                   Country == other.Country &&
+                   IsFavorite == other.IsFavorite &&
+                   EqualityComparer<Command>.Default.Equals(ChangeFavoriteStatus, other.ChangeFavoriteStatus);
+        }
+
+        public override int GetHashCode()
+        {
+            var hashCode = -870885539;
+            hashCode = hashCode * -1521134295 + EqualityComparer<string>.Default.GetHashCode(CityImage);
+            hashCode = hashCode * -1521134295 + EqualityComparer<string>.Default.GetHashCode(CityName);
+            hashCode = hashCode * -1521134295 + EqualityComparer<string>.Default.GetHashCode(Country);
+            hashCode = hashCode * -1521134295 + IsFavorite.GetHashCode();
+            hashCode = hashCode * -1521134295 + EqualityComparer<Command>.Default.GetHashCode(ChangeFavoriteStatus);
+            return hashCode;
+        }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/ViewModels/WelcomePageViewModel.cs

@@ -14,9 +14,17 @@ public class Section
         public string Emoji { get; set; }
     };
 
-    public class WelcomePageViewModel : INotifyPropertyChanged
+    public class BaseViewModel : INotifyPropertyChanged
     {
         public event PropertyChangedEventHandler PropertyChanged;
+        protected void OnPropertyChanged(string propertyName)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+    }
+
+    public class WelcomePageViewModel : BaseViewModel
+    {
 
         private ObservableCollection<Section> _sections;
         public ObservableCollection<Section> Sections
@@ -30,14 +38,10 @@ public ObservableCollection<Section> Sections
                 if (_sections != value)
                 {
                     _sections = value;
-                    OnPropertyChanged(new PropertyChangedEventArgs("Sections"));
+                    OnPropertyChanged(nameof(Sections));
                 }
             }
         }
 
-        private void OnPropertyChanged(PropertyChangedEventArgs eventArgs)
-        {
-            PropertyChanged?.Invoke(this, eventArgs);
-        }
     }
 }

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -5,9 +5,104 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d"
              x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage">
+    <ContentPage.Resources>
+        <Color x:Key="TextColor">Black</Color>
+        <Color x:Key="SecondaryColor">#B5B5B5</Color>
+        <Color x:Key="BackgroundColor">White</Color>
+        <Color x:Key="StarColor">#FFBF00</Color>
+        <Color x:Key="FavoriteColor">#FAACC1</Color>
+
+        <x:String x:Key="MagnifyingGlass">#xf349;</x:String>
+        <x:String x:Key="Star">#xf4ce;</x:String>
+        <x:String x:Key="HeartFilled">#xf2d1;</x:String>
+        <x:String x:Key="HeartOutline">#xf2d5;</x:String>
+
+        <x:Double x:Key="CornerRadius">22</x:Double>
+
+        <OnPlatform x:TypeArguments="x:String"
+                    Android="materialdesignicons-webfont.ttf#Material Design Icons"
+                    iOS="Material Design Icons"
+                    x:Key="MaterialFont" />
+
+        <Style TargetType="Button"
+               x:Key="MaterialButton">
+            <Setter Property="FontFamily"
+                    Value="{StaticResource MaterialFont}" />
+            <Setter Property="FontSize"
+                    Value="20.0" />
+            <Setter Property="BackgroundColor"
+                    Value="{StaticResource BackgroundColor}" />
+        </Style>
+        <Style TargetType="Label"
+               x:Key="TitleLabel">
+            <Setter Property="TextColor"
+                    Value="{StaticResource TextColor}" />
+            <Setter Property="FontSize"
+                    Value="20.0" />
+        </Style>
+
+    </ContentPage.Resources>
     <ContentPage.Content>
-        <StackLayout BackgroundColor="#cfd8dc">
-            <Label Text="You can use this page for the CarouselView Challenge!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
-        </StackLayout>
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <CarouselView ItemsSource="{Binding Cities}"
+                          PeekAreaInsets="0"
+                          CurrentItem="{Binding CurrentCity}">
+                <CarouselView.ItemsLayout>
+                    <ListItemsLayout Orientation="Horizontal"
+                                     SnapPointsAlignment="Center"
+                                     SnapPointsType="MandatorySingle"
+                                     ItemSpacing="4" />
+                </CarouselView.ItemsLayout>
+                <CarouselView.ItemTemplate>
+                    <DataTemplate>
+                        <StackLayout>
+                            <Frame Padding="0"
+                                   IsClippedToBounds="True"
+                                   HasShadow="True"
+                                   Margin="8">
+                                <Image Source="{Binding CityImage}"
+                                       Aspect="AspectFill"
+                                       HeightRequest="320" />
+                            </Frame>
+                            <Frame HeightRequest="70"
+                                   Margin="24,-64,24,0"
+                                   Padding="20,12,16,12"
+                                   BackgroundColor="White"
+                                   CornerRadius="22"
+                                   HasShadow="true">
+                                <Grid>
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="auto" />
+                                        <RowDefinition Height="auto" />
+                                    </Grid.RowDefinitions>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="*" />
+                                        <ColumnDefinition Width="auto" />
+                                    </Grid.ColumnDefinitions>
+                                    <StackLayout Grid.Column="0"
+                                                 Margin="0">
+                                        <Label Text="{Binding CityName}"
+                                               Style="{StaticResource TitleLabel}" />
+                                        <Label Text="{Binding Country}"
+                                               FontSize="14"
+                                               TextColor="{StaticResource SecondaryColor}" />
+                                    </StackLayout>
+                                    <Button Text="{Binding FavoriteIcon}"
+                                            Command="{Binding ChangeFavoriteStatus}"
+                                            Style="{StaticResource MaterialButton}"
+                                            TextColor="{StaticResource FavoriteColor}"
+                                            Grid.Column="1" />
+                                </Grid>
+                            </Frame>
+                        </StackLayout>
+                    </DataTemplate>
+                </CarouselView.ItemTemplate>
+            </CarouselView>
+            <Label Text="{Binding Index}" VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="1" />
+        </Grid>
     </ContentPage.Content>
 </ContentPage>

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml.cs

@@ -1,4 +1,5 @@
-using System;
+using CarouselViewChallenge.ViewModels;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -15,6 +16,7 @@ public partial class CarouselViewChallengePage : ContentPage
         public CarouselViewChallengePage()
         {
             InitializeComponent();
+            BindingContext = new CarouselViewModel();
         }
     }
 }