CarouselViewChallange - OnBoarding

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -54,7 +54,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
-    <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.1" />
+    <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.3" />
     <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
   </ItemGroup>
   <ItemGroup>
@@ -63,6 +63,8 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <AndroidAsset Include="Assets\newspaper_spinner.json" />
+    <AndroidAsset Include="Assets\list.json" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
     <None Include="Properties\AndroidManifest.xml" />
@@ -101,4 +103,4 @@
     </ProjectReference>
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge.Android/MainActivity.cs

@@ -21,7 +21,8 @@ protected override void OnCreate(Bundle savedInstanceState)
 
             global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
             Xamarin.Essentials.Platform.Init(this, savedInstanceState);
-            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
+			Lottie.Forms.Droid.AnimationViewRenderer.Init();
+			global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
             LoadApplication(new App());
         }
         public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)

CarouselViewChallenge/CarouselViewChallenge.UWP/CarouselViewChallenge.UWP.csproj

@@ -145,6 +145,9 @@
     </Page>
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="Com.Airbnb.Xamarin.Forms.Lottie">
+      <Version>3.0.1</Version>
+    </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform" Version="6.1.9" />
     <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />

CarouselViewChallenge/CarouselViewChallenge.iOS/AppDelegate.cs

@@ -23,7 +23,8 @@ public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsAppli
         public override bool FinishedLaunching(UIApplication app, NSDictionary options)
         {
             global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
-            global::Xamarin.Forms.Forms.Init();
+			Lottie.Forms.iOS.Renderers.AnimationViewRenderer.Init();
+			global::Xamarin.Forms.Forms.Init();
             LoadApplication(new App());
 
             return base.FinishedLaunching(app, options);

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="newspaper_spinner.json" />
+    <BundleResource Include="list.json" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">
@@ -129,6 +131,9 @@
     <Reference Include="System.Numerics.Vectors" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="Com.Airbnb.Xamarin.Forms.Lottie">
+      <Version>3.0.1</Version>
+    </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
     <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
   </ItemGroup>
@@ -139,4 +144,4 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -6,14 +6,11 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Com.Airbnb.Xamarin.Forms.Lottie" Version="3.0.1" />
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />  
     <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
   </ItemGroup>
 
-  <ItemGroup>
-    <Folder Include="Models\" />
-  </ItemGroup>
-
   <ItemGroup>
     <Compile Update="Views\WelcomePage.xaml.cs">
       <DependentUpon>WelcomePage.xaml</DependentUpon>

CarouselViewChallenge/CarouselViewChallenge/Models/OnBoardingModel.cs

@@ -0,0 +1,62 @@
+using System;
+using System.ComponentModel;
+
+namespace CarouselViewChallenge.Models
+{
+	public class OnBoardingModel : INotifyPropertyChanged
+	{
+		private string _icon;
+		private string _description;
+		private bool _playAnimation;
+		private string _secondaryColor;
+
+		public event PropertyChangedEventHandler PropertyChanged;
+
+		public string Icon
+		{
+			get => _icon;
+			set
+			{
+				_icon = value;
+				OnPropertyChanged(nameof(Icon));
+			}
+		}
+
+		public string Description
+		{
+			get => _description;
+			set
+			{
+				_description = value;
+				OnPropertyChanged(nameof(Description));
+			}
+		}
+
+		public bool PlayAnimation
+		{
+			get => _playAnimation;
+			set
+			{
+				_playAnimation = value;
+				OnPropertyChanged(nameof(PlayAnimation));
+			}
+		}
+
+		public string PrimaryColor { get; set; }
+
+		public string SecondaryColor
+		{
+			get => _secondaryColor;
+			set
+			{
+				_secondaryColor = value;
+				OnPropertyChanged(nameof(SecondaryColor));
+			}
+		}
+
+		public void OnPropertyChanged(string propertyName)
+		{
+			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+		}
+	}
+}

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengeViewModel.cs

@@ -0,0 +1,119 @@
+using CarouselViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Windows.Input;
+using Xamarin.Forms;
+
+namespace CarouselViewChallenge.ViewModels
+{
+	class CarouselViewChallengeViewModel : INotifyPropertyChanged
+	{
+		private int _position;
+		private string _currentColor;
+		private string _nextColor;
+		private string _previousColor;
+
+		public event PropertyChangedEventHandler PropertyChanged;
+
+		public CarouselViewChallengeViewModel()
+		{
+			NextCommand = new Command(NextCommandHandler);
+			Items = new List<OnBoardingModel>
+			{
+				new OnBoardingModel
+				{
+					Icon = "newspaper_spinner.json",
+					Description = "Local news stories",
+					PrimaryColor = "#1447C9",
+					SecondaryColor = "#103DA5"
+				},
+				new OnBoardingModel
+				{
+					Icon = "newspaper_spinner.json",
+					Description = "Choose your interests",
+					PrimaryColor = "#F5C3DC",
+					SecondaryColor = "#6F599A"
+				},
+				new OnBoardingModel
+				{
+					Icon = "list.json",
+					Description = "Drag and Drop to move",
+					PrimaryColor = "#FFFFFF",
+					SecondaryColor = "#F5C3DC"
+				}
+			};
+
+			CurrentColor = Items[Position].PrimaryColor;
+			PreviousColor = Items[Position - 1 >= 0 ? Position - 1 : 0].PrimaryColor;
+			NextColor = Items[Position + 1 < 3 ? Position + 1 : 0].PrimaryColor;
+		}
+
+		private void NextCommandHandler()
+		{
+			SetNextPosition();
+			CurrentColor = Items[Position].PrimaryColor;
+			PreviousColor = Items[Position - 1 >= 0 ? Position - 1 : 0].PrimaryColor;
+			NextColor = Items[Position + 1 < 3 ? Position + 1 : 0].PrimaryColor;
+		}
+
+		private void SetNextPosition()
+		{
+			if (Position == 2)
+			{
+				Position = 0;
+				return;
+			}
+			Position++;
+		}
+
+		private void OnPropertyChanged(string propertyName)
+		{
+			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+		}
+
+		public int Position
+		{
+			get => _position;
+			set
+			{
+				_position = value;
+				OnPropertyChanged(nameof(Position));
+			}
+		}
+
+		public string CurrentColor
+		{
+			get => _currentColor;
+			set
+			{
+				_currentColor = value;
+				OnPropertyChanged(nameof(CurrentColor));
+			}
+		}
+
+		public string NextColor
+		{
+			get => _nextColor;
+			set
+			{
+				_nextColor = value;
+				OnPropertyChanged(nameof(NextColor));
+			}
+		}
+
+		public string PreviousColor
+		{
+			get => _previousColor;
+			set
+			{
+				_previousColor = value;
+				OnPropertyChanged(nameof(PreviousColor));
+			}
+		}
+
+		public ICommand NextCommand { get; }
+		public List<OnBoardingModel> Items { get; }
+	}
+}

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -4,10 +4,61 @@
              xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d"
-             x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage">
-    <ContentPage.Content>
-        <StackLayout BackgroundColor="#cfd8dc">
-            <Label Text="You can use this page for the CarouselView Challenge!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
+             xmlns:lottieForms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
+             x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage"
+             xmlns:iosSpecific="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
+             iosSpecific:Page.UseSafeArea="True"
+             BackgroundColor="{Binding NextColor}"
+             x:Name="this">
+    <StackLayout Padding="20, 50" Spacing="30">
+        <StackLayout Orientation="Horizontal">
+            <Label Text="Stories"
+                   TextColor="{Binding PreviousColor}"
+                   HorizontalOptions="StartAndExpand" />
+            <Label Text="Skip"
+                   TextColor="{Binding PreviousColor}"
+                   HorizontalOptions="End" />
         </StackLayout>
-    </ContentPage.Content>
+        <CarouselView x:Name="carouselView"
+                      VerticalOptions="Center"
+                      Position="{Binding Position}"
+                      ItemsSource="{Binding Items}"
+                      HorizontalScrollBarVisibility="Never">
+            <CarouselView.ItemTemplate>
+                <DataTemplate>
+                    <StackLayout>
+                        <Frame HeightRequest="200"
+                               WidthRequest="200"
+                               CornerRadius="40"
+                               HasShadow="False"
+                               Margin="0"
+                               Padding="0"
+                               HorizontalOptions="CenterAndExpand"
+                               VerticalOptions="CenterAndExpand"
+                               BackgroundColor="{Binding SecondaryColor}">
+                            <lottieForms:AnimationView Animation="{Binding Icon}" 
+                                                       Loop="True"
+                                                       AutoPlay="True"                                                       
+                                                       VerticalOptions="FillAndExpand" 
+                                                       HorizontalOptions="FillAndExpand" />
+                        </Frame>
+                        <Label Text="{Binding Description}"
+                               FontSize="55"
+                               HorizontalTextAlignment="Center"
+                               TextColor="{Binding BindingContext.PreviousColor, Source={x:Reference this}}" />
+                    </StackLayout>
+                </DataTemplate>
+            </CarouselView.ItemTemplate>
+        </CarouselView>
+        <Button x:Name="button"
+                WidthRequest="100"
+                HeightRequest="100"
+                CornerRadius="50"         
+                Text=">"
+                FontAttributes="Bold"
+                Clicked="NextEventHandler"
+                TextColor="{Binding CurrentColor}"
+                BackgroundColor="{Binding PreviousColor}"
+                HorizontalOptions="End" />
+    </StackLayout>
 </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;
@@ -9,12 +10,23 @@
 
 namespace CarouselViewChallenge.Views
 {
-    [XamlCompilation(XamlCompilationOptions.Compile)]
-    public partial class CarouselViewChallengePage : ContentPage
-    {
-        public CarouselViewChallengePage()
-        {
-            InitializeComponent();
-        }
-    }
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class CarouselViewChallengePage : ContentPage
+	{
+		private CarouselViewChallengeViewModel _viewModel;
+		public CarouselViewChallengePage()
+		{
+			_viewModel = new CarouselViewChallengeViewModel();
+			InitializeComponent();
+
+			BindingContext = _viewModel;
+		}
+
+		public async void NextEventHandler(object sender, EventArgs ea)
+		{
+			await button.ScaleTo(50, 100);
+			button.ScaleTo(1, 100);
+			_viewModel.NextCommand.Execute(null);
+		}
+	}
 }