CarouselViewChallenge - Slider

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,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" />
@@ -101,4 +102,4 @@
     </ProjectReference>
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
-</Project>
+</Project>

CarouselViewChallenge/CarouselViewChallenge/App.xaml

@@ -1,10 +1,16 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<Application xmlns="http://xamarin.com/schemas/2014/forms"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d"
-             x:Class="CarouselViewChallenge.App">
+<Application
+    x:Class="CarouselViewChallenge.App"
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
     <Application.Resources>
+        <OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
+            <On Platform="iOS" Value="Material Design Icons" />
+            <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
+            <On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
+        </OnPlatform>
     </Application.Resources>
 </Application>

CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengeViewModel.cs

@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Text;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    public class SliderPage
+    {
+        public string Icon { get; set; }
+        public string Header { get; set; }
+        public string Text { get; set; }
+        public string BackgroundColor { get; set; }
+    };
+
+    public class CarouselViewChallengeViewModel : INotifyPropertyChanged
+    {
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        private ObservableCollection<SliderPage> _sliders;
+        public ObservableCollection<SliderPage> Sliders
+        {
+            get => _sliders;
+            set
+            {
+                if (_sliders != value)
+                {
+                    _sliders = value;
+                    OnPropertyChanged(new PropertyChangedEventArgs("Sliders"));
+                }
+            }
+        }
+
+        private int _index;
+        public int Index
+        {
+            get => _index;
+            set
+            {
+                if (_index != value)
+                {
+                    _index = value;
+                    OnPropertyChanged(new PropertyChangedEventArgs("Index"));
+
+                    TextLabel = (_index + 1 == Sliders.Count) ? "DONE" : "NEXT";
+                    OnPropertyChanged(new PropertyChangedEventArgs("TextLabel"));
+                }
+            }
+        }
+
+        public string TextLabel { get; set; }
+
+        public CarouselViewChallengeViewModel()
+        {
+            Sliders = new ObservableCollection<SliderPage>();
+            TextLabel = "NEXT";
+        }
+
+        private void OnPropertyChanged(PropertyChangedEventArgs eventArgs)
+        {
+            PropertyChanged?.Invoke(this, eventArgs);
+        }
+    }
+}

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -1,13 +1,107 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
-             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             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
+    x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage"
+    xmlns="http://xamarin.com/schemas/2014/forms"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
     <ContentPage.Content>
-        <StackLayout BackgroundColor="#cfd8dc">
-            <Label Text="You can use this page for the CarouselView Challenge!" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
-        </StackLayout>
+        <Grid>
+            <CarouselView
+                x:Name="carousel"
+                BackgroundColor="Red"
+                ItemsSource="{Binding Sliders}"
+                PeekAreaInsets="0"
+                PositionChanged="Carousel_PositionChanged">
+                <CarouselView.ItemTemplate>
+                    <DataTemplate>
+                        <Frame Padding="36" BackgroundColor="{Binding BackgroundColor}">
+                            <StackLayout VerticalOptions="CenterAndExpand">
+                                <Label
+                                    FontFamily="{StaticResource MaterialFontFamily}"
+                                    FontSize="96"
+                                    HorizontalTextAlignment="Center"
+                                    Text="{Binding Icon}"
+                                    TextColor="White" />
+                                <Label
+                                    FontAttributes="Bold"
+                                    FontSize="36"
+                                    HorizontalTextAlignment="Center"
+                                    Text="{Binding Header}"
+                                    TextColor="White" />
+                                <!--<BoxView BackgroundColor="DarkSlateGray" HeightRequest="2" />-->
+                                <Label
+                                    Margin="16"
+                                    FontSize="18"
+                                    FormattedText="{Binding Text}"
+                                    HorizontalTextAlignment="Center"
+                                    TextColor="White" />
+                            </StackLayout>
+                        </Frame>
+                    </DataTemplate>
+                </CarouselView.ItemTemplate>
+            </CarouselView>
+            <Grid
+                Margin="24,0"
+                HeightRequest="50"
+                VerticalOptions="End">
+                <Label
+                    Grid.Column="0"
+                    FontAttributes="Bold"
+                    HorizontalOptions="Start"
+                    Text="SKIP"
+                    TextColor="White"
+                    VerticalOptions="Center" />
+                <StackLayout
+                    Grid.Column="1"
+                    HorizontalOptions="Center"
+                    Orientation="Horizontal">
+                    <BoxView
+                        x:Name="bv0"
+                        BackgroundColor="#FFFFFFFF"
+                        CornerRadius="100"
+                        HeightRequest="10"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"
+                        WidthRequest="10" />
+                    <BoxView
+                        x:Name="bv1"
+                        BackgroundColor="#7CFFFFFF"
+                        CornerRadius="100"
+                        HeightRequest="10"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"
+                        WidthRequest="10" />
+                    <BoxView
+                        x:Name="bv2"
+                        BackgroundColor="#7CFFFFFF"
+                        CornerRadius="100"
+                        HeightRequest="10"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"
+                        WidthRequest="10" />
+                    <BoxView
+                        x:Name="bv3"
+                        BackgroundColor="#7CFFFFFF"
+                        CornerRadius="100"
+                        HeightRequest="10"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"
+                        WidthRequest="10" />
+                </StackLayout>
+                <Label
+                    Grid.Column="2"
+                    FontAttributes="Bold"
+                    HorizontalOptions="End"
+                    Text="{Binding TextLabel}"
+                    TextColor="White"
+                    VerticalOptions="Center">
+                    <Label.GestureRecognizers>
+                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Next_Tapped" />
+                    </Label.GestureRecognizers>
+                </Label>
+            </Grid>
+        </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;
@@ -12,9 +13,56 @@ namespace CarouselViewChallenge.Views
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class CarouselViewChallengePage : ContentPage
     {
+        public CarouselViewChallengeViewModel viewModel { get; set; }
+
         public CarouselViewChallengePage()
         {
             InitializeComponent();
+            viewModel = new CarouselViewChallengeViewModel();
+            viewModel.Sliders.Add(new SliderPage()
+            {
+                Icon = "\uF684",  //"\uF25A",
+                Header = "Hello Food!",
+                Text = "The easiest way to order food from your favourite restaurant!",
+                BackgroundColor = "#F64C73"
+            });
+            viewModel.Sliders.Add(new SliderPage()
+            {
+                Icon = "\uF516",
+                Header = "Movie Tickets",
+                Text = "Book movie tickets for your family and friends!",
+                BackgroundColor = "#20D2BB"
+            });
+            viewModel.Sliders.Add(new SliderPage()
+            {
+                Icon = "\uFCCE",
+                Header = "Great Discounts",
+                Text = "Best discounts on every single service we offer!",
+                BackgroundColor = "#3395FF"
+            });
+            viewModel.Sliders.Add(new SliderPage()
+            {
+                Icon = "\uF01D",
+                Header = "World Travel",
+                Text = "Book tickets of any transportation and travel the world!",
+                BackgroundColor = "#C873F4"
+            });
+            BindingContext = viewModel;
+        }
+
+        private void Carousel_PositionChanged(object sender, PositionChangedEventArgs e)
+        {
+            viewModel.Index = e.CurrentPosition;
+
+            bv0.BackgroundColor = viewModel.Index == 0 ? Color.FromHex("#FFFFFFFF") : Color.FromHex("#7CFFFFFF");
+            bv1.BackgroundColor = viewModel.Index == 1 ? Color.FromHex("#FFFFFFFF") : Color.FromHex("#7CFFFFFF");
+            bv2.BackgroundColor = viewModel.Index == 2 ? Color.FromHex("#FFFFFFFF") : Color.FromHex("#7CFFFFFF");
+            bv3.BackgroundColor = viewModel.Index == 3 ? Color.FromHex("#FFFFFFFF") : Color.FromHex("#7CFFFFFF");
+        }
+        private void Next_Tapped(object sender, EventArgs e)
+        {
+            if (carousel.Position + 1 < viewModel.Sliders.Count)
+                carousel.Position += 1;
         }
     }
 }