Car configurator app

CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj

@@ -15,7 +15,6 @@
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <MonoAndroidResourcePrefix>Resources</MonoAndroidResourcePrefix>
     <MonoAndroidAssetsPrefix>Assets</MonoAndroidAssetsPrefix>
-    <AndroidUseLatestPlatformSdk>false</AndroidUseLatestPlatformSdk>
     <TargetFrameworkVersion>v9.0</TargetFrameworkVersion>
     <AndroidEnableSGenConcurrent>true</AndroidEnableSGenConcurrent>
     <AndroidUseAapt2>true</AndroidUseAapt2>
@@ -56,6 +55,9 @@
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.778476-pre1" />
     <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.1" />
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
+    <PackageReference Include="Xamarin.Forms.PancakeView">
+      <Version>1.2.1</Version>
+    </PackageReference>
   </ItemGroup>
   <ItemGroup>
     <Compile Include="MainActivity.cs" />
@@ -96,7 +98,7 @@
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\CarouselViewChallenge\CarouselViewChallenge.csproj">
-      <Project>{1AD32EAF-CE1F-497F-8598-87F19CDA3D10}</Project>
+      <Project>{A9F8B9B3-719F-4F40-9044-924E7B921409}</Project>
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>

CarouselViewChallenge/CarouselViewChallenge.Android/Properties/AndroidManifest.xml

@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.carouselviewchallenge">
-    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
-    <application android:label="CarouselViewChallenge.Android"></application>
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
-</manifest>
+	<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
+	<application android:label="CarouselViewChallenge.Android"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+</manifest>

CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj

@@ -119,6 +119,10 @@
     <BundleResource Include="Resources\xamarin_logo%402x.png" />
     <BundleResource Include="Resources\xamarin_logo%403x.png" />
     <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
+    <BundleResource Include="Resources\le_02.jpg" />
+    <BundleResource Include="Resources\le_03.jpg" />
+    <BundleResource Include="Resources\le_00.jpg" />
+    <BundleResource Include="Resources\le_01.jpg" />
   </ItemGroup>
   <ItemGroup>
     <Reference Include="System" />
@@ -131,11 +135,14 @@
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.778476-pre1" />
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
+    <PackageReference Include="Xamarin.Forms.PancakeView">
+      <Version>1.2.1</Version>
+    </PackageReference>
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
     <ProjectReference Include="..\CarouselViewChallenge\CarouselViewChallenge.csproj">
-      <Project>{1AD32EAF-CE1F-497F-8598-87F19CDA3D10}</Project>
+      <Project>{A9F8B9B3-719F-4F40-9044-924E7B921409}</Project>
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>

CarouselViewChallenge/CarouselViewChallenge/AppShell.xaml

@@ -32,13 +32,10 @@
     </Shell.Resources>
 
     <!-- Your Pages -->
-    <TabBar>
-        <Tab Title="Welcome" Icon="tab_about.png">
-            <ShellContent ContentTemplate="{DataTemplate local:WelcomePage}" />
-        </Tab>
+    <FlyoutItem>
         <Tab Title="Challenge" Icon="tab_feed.png">
             <ShellContent ContentTemplate="{DataTemplate local:CarouselViewChallengePage}" />
         </Tab>
-    </TabBar>
+    </FlyoutItem>
 
 </Shell>

CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj

@@ -8,6 +8,7 @@
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.778476-pre1" />  
     <PackageReference Include="Xamarin.Essentials" Version="1.1.0" />
+    <PackageReference Include="Xamarin.Forms.PancakeView" Version="1.2.1" />
   </ItemGroup>
 
   <ItemGroup>

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml

@@ -3,11 +3,78 @@
              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"
+             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
              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"/>
-        </StackLayout>
+        <Grid ColumnSpacing="0" RowSpacing="0" Margin="0,20,0,0">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+
+            <yummy:PancakeView HasShadow="false"
+                               BorderThickness="0"
+                               CornerRadius="30,30,0,30"
+                               HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
+                               Margin="10">
+            <Grid ColumnSpacing="0" RowSpacing="0">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="2.7*" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <CarouselView ItemsSource="{Binding Images}" PeekAreaInsets="0"
+                              HorizontalScrollBarVisibility="Never"
+                              Grid.Column="0" Grid.ColumnSpan="2">
+                    <CarouselView.ItemTemplate>
+                        <DataTemplate>
+                            <Image Source="{Binding}" Aspect="AspectFill" />
+                        </DataTemplate>
+                    </CarouselView.ItemTemplate>
+                </CarouselView>
+
+                <StackLayout Margin="0,20,15,10"
+                             VerticalOptions="EndAndExpand"
+                             Grid.Column="1">
+                    <yummy:PancakeView x:Name="p1"
+                                       HeightRequest="40" WidthRequest="300"
+                                       CornerRadius="15">
+                        <Label Text="145 mph"
+                               FontAttributes="Bold" FontSize="14"
+                               Margin="10,5,10,5"
+                               VerticalTextAlignment="Center"
+                               VerticalOptions="Center" HorizontalOptions="Center" />
+                    </yummy:PancakeView>
+                    <yummy:PancakeView x:Name="p2"
+                                       HeightRequest="40" WidthRequest="300"
+                                       CornerRadius="15">
+                        <Label Text="217 hp"
+                               FontAttributes="Bold" FontSize="14"
+                               Margin="10,5,10,5"
+                               VerticalTextAlignment="Center"
+                               VerticalOptions="Center" HorizontalOptions="Center" />
+                    </yummy:PancakeView>
+                </StackLayout>
+            </Grid>
+            </yummy:PancakeView>
+
+            <StackLayout Grid.Row="1" Orientation="Vertical"
+                         VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
+                         Spacing="2.5"
+                         Margin="20,0,20,20">
+                <Label Text="Lotus Elise" FontSize="24" FontAttributes="Bold" />
+                <Label Text="Sport 220" FontSize="20" />
+                <Label Text="The purest useable sports car on sale remains one of the greatest driving experiences available at any price. The Elise Sport 220 builds on the many celebrated Elise virtues, blending agility, power, balance and communication into one compact expression of pure driving joy."
+                       Margin="0,5,0,0"
+                       FontSize="14"/>
+                <Button Text="configure"
+                        TextColor="White"
+                        FontAttributes="Bold"
+                        BackgroundColor="Orange"
+                        CornerRadius="10"
+                        WidthRequest="150"
+                        HorizontalOptions="Start" VerticalOptions="EndAndExpand"/>
+            </StackLayout>
+        </Grid>
     </ContentPage.Content>
 </ContentPage>

CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml.cs

@@ -1,20 +1,34 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
+using System.Collections.ObjectModel;
+using System.ComponentModel;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
 namespace CarouselViewChallenge.Views
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    public partial class CarouselViewChallengePage : ContentPage
+    public partial class CarouselViewChallengePage : ContentPage, INotifyPropertyChanged
     {
+        private ObservableCollection<string> _images = new ObservableCollection<string>();
+        public ObservableCollection<string> Images
+        {
+            get => _images;
+            set
+            {
+                _images = value;
+                OnPropertyChanged(nameof(Images));
+            }
+        }
+
         public CarouselViewChallengePage()
         {
             InitializeComponent();
+
+            p1.BackgroundColor = Color.FromRgba(255, 255, 255, 0.7);
+            p2.BackgroundColor = Color.FromRgba(255, 255, 255, 0.7);
+
+            Images.Add("le_00.jpg");
+            Images.Add("le_01.jpg");
+            BindingContext = this;
         }
     }
 }

README.md

@@ -1,17 +1,7 @@
 # CarouselView Challenge
 
-Following up on the [CollectionView Challenge](https://github.com/pauldipietro/CollectionViewChallenge), the CarouselView Challenge is aimed at using the new [CarouselView](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/) in the context of real-world apps.
+Created car configuration app with new carousel view
 
-_Note: Some functionality may not be (fully) implemented yet as of this time. We're working to make sure that it is, but we still want your feedback on what's available now!_
+End result
 
-For more details, check out the [preview documentation](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/).
-
-## Challenge Quick Start
-
-1. Fork this repository; you can run the solution to see a welcome page with similar instructions.
-2. Open `CarouselViewChallengePage.xaml`
-3. Replicate functionality from another project/app where you can use a carousel. If you need to, you can replace any data with placeholders.
-4. Submit a pull request of your progress back to this repository. Please include the following feedback:
-   - Comparison screenshots of your results! If you really want to go the extra mile, video is awesome to see, too.
-   - Your experience using `CarouselView` (Any difficulties?)
-   - What would you like to see next?
+![App](CarouselChallenge.gif)