CarouselView with progressive animations

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -63,6 +63,8 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <AndroidAsset Include="Assets\Montserrat-Bold.ttf" />
+    <AndroidAsset Include="Assets\Montserrat-Regular.ttf" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
     <None Include="Properties\AndroidManifest.xml" />
@@ -100,5 +102,17 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="Resources\drawable\coffee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="Resources\drawable\marshmallows.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="Resources\drawable\strawberry.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="Resources\drawable\plant.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

CarouselViewChallenge/CarouselViewChallenge.Android/MainActivity.cs

@@ -1,10 +1,6 @@
-using System;
-
-using Android.App;
+using Android.App;
 using Android.Content.PM;
 using Android.Runtime;
-using Android.Views;
-using Android.Widget;
 using Android.OS;
 
 namespace CarouselViewChallenge.Droid

CarouselViewChallenge/CarouselViewChallenge.iOS/AppDelegate.cs

@@ -1,8 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-
-using Foundation;
+using Foundation;
 using UIKit;
 
 namespace CarouselViewChallenge.iOS

CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj

@@ -65,6 +65,8 @@
     <None Include="Entitlements.plist" />
     <None Include="Info.plist" />
     <Compile Include="Properties\AssemblyInfo.cs" />
+    <BundleResource Include="Resources\Montserrat-Bold.ttf" />
+    <BundleResource Include="Resources\Montserrat-Regular.ttf" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">
@@ -131,6 +133,9 @@
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.2084" />
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
+    <PackageReference Include="Xamarin.Forms.PancakeView">
+      <Version>1.3.2-beta</Version>
+    </PackageReference>
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
@@ -139,4 +144,16 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\coffee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\marshmallows.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\plant.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\strawberry.png" />
+  </ItemGroup>
 </Project>

CarouselViewChallenge/CarouselViewChallenge.iOS/Info.plist

@@ -34,5 +34,10 @@
     <string>CarouselViewChallenge</string>
     <key>XSAppIconAssets</key>
     <string>Assets.xcassets/AppIcon.appiconset</string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Montserrat-Bold.ttf</string>
+		<string>Montserrat-Regular.ttf</string>
+	</array>
 </dict>
 </plist>

CarouselViewChallenge/CarouselViewChallenge/App.xaml

@@ -6,5 +6,24 @@
              mc:Ignorable="d"
              x:Class="CarouselViewChallenge.App">
     <Application.Resources>
+        <ResourceDictionary>
+
+            <!-- COLORS -->
+            <Color x:Key="WhiteColor">#FFFFFF</Color>
+            <Color x:Key="BlackColor">#000000</Color>
+
+            <!-- FONTS -->
+            <OnPlatform x:Key="MontserratRegular"
+                        x:TypeArguments="x:String"
+                        Android="Montserrat-Regular.ttf#Montserrat"
+                        iOS="Montserrat-Regular" />
+
+
+            <OnPlatform x:Key="MontserratBold"
+                        x:TypeArguments="x:String"
+                        Android="Montserrat-Bold.ttf#Montserrat"
+                        iOS="Montserrat-Bold" />
+
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

CarouselViewChallenge/CarouselViewChallenge/Behaviors/CarouselViewParallaxBehavior.cs

@@ -0,0 +1,81 @@
+using CarouselViewChallenge.Models;
+using System;
+using System.Linq;
+using Xamarin.Forms;
+
+namespace CarouselViewChallenge.Behaviors
+{
+    public class CarouselViewParallaxBehavior : Behavior<CarouselView>
+    {
+        public static readonly BindableProperty ParallaxOffsetProperty =
+          BindableProperty.Create(nameof(ParallaxOffset), typeof(double), typeof(CarouselViewParallaxBehavior), 200.0d,
+              BindingMode.TwoWay, null);
+
+        public double ParallaxOffset
+        {
+            get { return (double)GetValue(ParallaxOffsetProperty); }
+            set { SetValue(ParallaxOffsetProperty, value); }
+        }
+
+        protected override void OnAttachedTo(CarouselView bindable)
+        {
+            base.OnAttachedTo(bindable);
+            bindable.Scrolled += new EventHandler<ItemsViewScrolledEventArgs>(OnScrolled);
+        }
+
+        protected override void OnDetachingFrom(CarouselView bindable)
+        {
+            base.OnDetachingFrom(bindable);
+            bindable.Scrolled -= new EventHandler<ItemsViewScrolledEventArgs>(OnScrolled);
+        }
+
+        private void OnScrolled(object sender, ItemsViewScrolledEventArgs e)
+        {
+            var carousel = (CarouselView)sender;
+            var carouselItems = carousel.ItemsSource.Cast<object>().ToList();
+            var currentIndex = e.CenterItemIndex;
+            var lastIndex = e.LastVisibleItemIndex;
+            var layout = carousel.ItemsLayout;
+            var adjust = Device.RuntimePlatform == Device.Android ? 3 : 1;
+
+            if (layout is LinearItemsLayout listItemsLayout)
+            {
+                if (listItemsLayout.Orientation == ItemsLayoutOrientation.Horizontal)
+                {
+                    var carouselWidth = carousel.Width;
+                    var offset = (carouselWidth * (currentIndex + 1)) - (e.HorizontalOffset / adjust);
+                    var position = (offset * ParallaxOffset / carouselWidth) - ParallaxOffset;
+                    var scale = (offset * 100 / carouselWidth) / 100;
+
+                    var lastItem = carouselItems[lastIndex] as Carouselitem;
+                    lastItem.Position = position + ParallaxOffset;
+                    lastItem.Rotation = position / 2;
+                    lastItem.Scale = 1 - scale;
+
+                    var currentItem = carouselItems[currentIndex] as Carouselitem;
+                    currentItem.Position = position;
+                    currentItem.Rotation = position;
+                    currentItem.Scale = scale;
+                }
+
+                if (listItemsLayout.Orientation == ItemsLayoutOrientation.Vertical)
+                {
+                    var carouselHeight = carousel.Height;
+                    var offset = (carouselHeight * (currentIndex + 1)) - (e.VerticalOffset / adjust);
+                    var position = (offset * ParallaxOffset / carouselHeight) - ParallaxOffset;
+                    var scale = offset * 100 / carouselHeight / 100;
+
+                    var lastItem = carouselItems[lastIndex] as Carouselitem;
+                    lastItem.Position = position + ParallaxOffset;
+                    lastItem.Rotation = position / 2;
+                    lastItem.Scale = 1 - scale;
+
+                    var currentItem = carouselItems[currentIndex] as Carouselitem;
+                    currentItem.Position = position;
+                    currentItem.Rotation = position;
+                    currentItem.Scale = scale;
+                }
+            }
+        }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -7,11 +7,8 @@
 
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.2084" />  
-    <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Folder Include="Models\" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />  
+    <PackageReference Include="Xamarin.Forms.PancakeView" Version="1.3.2-beta" />
   </ItemGroup>
 
   <ItemGroup>

CarouselViewChallenge/CarouselViewChallenge/Models/Carouselitem.cs

@@ -0,0 +1,54 @@
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+namespace CarouselViewChallenge.Models
+{
+    public class Carouselitem : Drink, INotifyPropertyChanged
+    {
+        private double _position;
+        private double _rotation;
+        private double _scale;
+
+        public Carouselitem()
+        {
+            Scale = 1;
+        }
+
+        public double Position
+        {
+            get { return _position; }
+            set
+            {
+                _position = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public double Rotation
+        {
+            get { return _rotation; }
+            set
+            {
+                _rotation = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public double Scale
+        {
+            get { return _scale; }
+            set
+            {
+                _scale = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/Models/Drink.cs

@@ -0,0 +1,13 @@
+using System.Drawing;
+
+namespace CarouselViewChallenge.Models
+{
+    public class Drink
+    {
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public string Image { get; set; }
+        public double Price { get; set; }
+        public Color Color { get; set; }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengePageViewModel.cs

@@ -0,0 +1,36 @@
+using CarouselViewChallenge.Models;
+using System.Collections.ObjectModel;
+using Xamarin.Forms;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    class CarouselViewChallengePageViewModel : BindableObject
+    {
+        private ObservableCollection<Carouselitem> _drinks;
+
+        public CarouselViewChallengePageViewModel()
+        {
+            LoadDrinks();
+        }
+
+        public ObservableCollection<Carouselitem> Drinks
+        {
+            get { return _drinks; }
+            set
+            {
+                _drinks = value;
+                OnPropertyChanged();
+            }
+        }
+
+        void LoadDrinks()
+        {
+            Drinks = new ObservableCollection<Carouselitem>() {
+                 new Carouselitem { Image="coffee.png", Title = "BRAZILIAN COFFEE", Color= Color.Maroon, Price =3.5, Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." },
+                 new Carouselitem { Image="marshmallows.png", Title = "HOT CHOCOLATE WITH MARSHMALLOWS", Color= Color.Wheat, Price = 8, Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." },
+                 new Carouselitem { Image="plant.png", Title = "MILK WITH MINT", Color= Color.Green, Price = 7.99, Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." },
+                 new Carouselitem { Image="strawberry.png", Title = "STRAWBERRY MILK", Color= Color.Red, Price = 6.5, Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }
+            };
+        }
+    }
+}