pauldipietro · emccarroll · Sep 25, 2019
diff --git a/CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj b/CarouselViewChallenge/CarouselViewChallenge.Android/CarouselViewChallenge.Android.csproj
@@ -53,9 +53,18 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="SkiaSharp.Views.Forms">
+      <Version>1.68.0</Version>
+    </PackageReference>
+    <PackageReference Include="Xamarin.FFImageLoading.Forms">
+      <Version>2.4.11.982</Version>
+    </PackageReference>
+    <PackageReference Include="Xamarin.FFImageLoading.Transformations">
+      <Version>2.4.11.982</Version>
+    </PackageReference>
     <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.Essentials" Version="1.3.0" />
+    <PackageReference Include="Xamarin.Android.Support.Core.Utils" Version="28.0.0.3" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="MainActivity.cs" />
@@ -101,4 +110,4 @@
     </ProjectReference>
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
-</Project>
+</Project>
diff --git a/CarouselViewChallenge/CarouselViewChallenge.Android/MainActivity.cs b/CarouselViewChallenge/CarouselViewChallenge.Android/MainActivity.cs
@@ -6,6 +6,7 @@
 using Android.Views;
 using Android.Widget;
 using Android.OS;
+using FFImageLoading.Forms.Platform;
 
 namespace CarouselViewChallenge.Droid
 {
@@ -20,8 +21,10 @@ protected override void OnCreate(Bundle savedInstanceState)
             base.OnCreate(savedInstanceState);
 
             global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");
+            FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: true);
             Xamarin.Essentials.Platform.Init(this, savedInstanceState);
             global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
+            CachedImageRenderer.InitImageViewHandler();
             LoadApplication(new App());
         }
         public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)

diff --git a/CarouselViewChallenge/CarouselViewChallenge.iOS/AppDelegate.cs b/CarouselViewChallenge/CarouselViewChallenge.iOS/AppDelegate.cs
@@ -1,7 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
-
+using FFImageLoading.Forms.Platform;
 using Foundation;
 using UIKit;
 
@@ -23,7 +23,9 @@ 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");
+            FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
             global::Xamarin.Forms.Forms.Init();
+            CachedImageRenderer.InitImageSourceHandler();
             LoadApplication(new App());
 
             return base.FinishedLaunching(app, options);

diff --git a/CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj b/CarouselViewChallenge/CarouselViewChallenge.iOS/CarouselViewChallenge.iOS.csproj
@@ -129,8 +129,17 @@
     <Reference Include="System.Numerics.Vectors" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="SkiaSharp.Views.Forms">
+      <Version>1.68.0</Version>
+    </PackageReference>
+    <PackageReference Include="Xamarin.FFImageLoading.Forms">
+      <Version>2.4.11.982</Version>
+    </PackageReference>
+    <PackageReference Include="Xamarin.FFImageLoading.Transformations">
+      <Version>2.4.11.982</Version>
+    </PackageReference>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
@@ -139,4 +148,4 @@
       <Name>CarouselViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
-</Project>
+</Project>
diff --git a/CarouselViewChallenge/CarouselViewChallenge/App.xaml b/CarouselViewChallenge/CarouselViewChallenge/App.xaml
@@ -6,5 +6,17 @@
              mc:Ignorable="d"
              x:Class="CarouselViewChallenge.App">
     <Application.Resources>
+
+        <!--BackgroundGradients-->
+        <Color x:Key="BackgroundGradientStartColor">#E8D6CB</Color>
+        <Color x:Key="BackgroundGradientMidColor">#6683A9</Color>
+        <Color x:Key="BackgroundGradientEndColor">#192E4A</Color>
+
+
+        <!--CarouselGradients-->
+        <Color x:Key="CarouselGradientStartColor">#77abb7</Color>
+        <Color x:Key="CarouselGradientMidColor">#476d7c</Color>
+        <Color x:Key="CarouselGradientEndColor">#1d3e53</Color>
+
     </Application.Resources>
 </Application>
diff --git a/CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj b/CarouselViewChallenge/CarouselViewChallenge/CarouselViewChallenge.csproj
@@ -6,8 +6,11 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="SkiaSharp.Views.Forms" Version="1.68.0" />
+    <PackageReference Include="Xamarin.FFImageLoading.Forms" Version="2.4.11.982" />
+    <PackageReference Include="Xamarin.FFImageLoading.Transformations" Version="2.4.11.982" />
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.819712-pre2" />  
-    <PackageReference Include="Xamarin.Essentials" Version="1.3.0" />
+    <PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/CarouselViewChallenge/CarouselViewChallenge/Models/Sensor.cs b/CarouselViewChallenge/CarouselViewChallenge/Models/Sensor.cs
@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace CarouselViewChallenge.Models
+{
+    public class Sensor
+    {
+
+        public int Sensor_ID { get; set; }
+
+        public string Name { get; set; }
+
+        public double Temperature { get; set; }
+
+        public double AvgTemperature { get; set; }
+
+        public string imageSrc { get; set; }
+
+
+        public string TemperatureFormatted { get {
+                return "Current: "+Temperature + "\xB0"+"F";
+
+            } }
+        public string AvgTemperatureFormatted
+        {
+            get
+            {
+                return "Avg: "+AvgTemperature + "\xB0"+"F";
+            }
+        }
+
+    }
+}
diff --git a/CarouselViewChallenge/CarouselViewChallenge/ViewModels/BaseViewModel.cs b/CarouselViewChallenge/CarouselViewChallenge/ViewModels/BaseViewModel.cs
@@ -0,0 +1,48 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Text;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    public class BaseViewModel : INotifyPropertyChanged
+    {
+        // public IDataStore<Item> DataStore => DependencyService.Get<IDataStore<Item>>() ?? new MockDataStore();
+        public event PropertyChangedEventHandler PropertyChanged;
+        string _propTitle = string.Empty;
+        bool _propIsBusy;
+        bool isBusy = false;
+        public bool IsBusy
+        {
+            get { return _propIsBusy; }
+            set { SetProperty(ref _propIsBusy, value, "IsBusy"); }
+        }
+
+        string title = string.Empty;
+        public string Title
+        {
+            get { return _propTitle; }
+            set { SetProperty(ref _propTitle, value, "Title"); }
+        }
+
+        protected void SetProperty<T>(ref T store, T value, string propName, Action onChanged = null)
+        {
+            if (EqualityComparer<T>.Default.Equals(store, value))
+                return;
+            store = value;
+            if (onChanged != null)
+                onChanged();
+            OnPropertyChanged(propName);
+        }
+
+        //#region INotifyPropertyChanged
+        //public event PropertyChangedEventHandler PropertyChanged;
+        public void OnPropertyChanged(string propName)
+        {
+            if (PropertyChanged == null)
+                return;
+            PropertyChanged(this, new PropertyChangedEventArgs(propName));
+        }
+        //#endregion
+    }
+}
diff --git a/CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengePageViewModel.cs b/CarouselViewChallenge/CarouselViewChallenge/ViewModels/CarouselViewChallengePageViewModel.cs
@@ -0,0 +1,49 @@
+using CarouselViewChallenge.Models;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Text;
+
+namespace CarouselViewChallenge.ViewModels
+{
+    public class CarouselViewChallengePageViewModel:BaseViewModel
+    {
+        Dictionary<string, string> sensorNameLocations;
+        ObservableCollection<Sensor> sensors = new ObservableCollection<Sensor>();
+
+        public CarouselViewChallengePageViewModel() {
+
+
+            sensorNameLocations = new Dictionary<string, string>();
+            sensorNameLocations.Add("Bar", "https://www.beveragefactory.com/images/MO24BNS1RS-built-in010516144751.jpg");
+            sensorNameLocations.Add("Kitchen", "https://cdn-image.realsimple.com/sites/default/files/1537981754/matte-appliances-trend-kitchen.JPG");
+            sensorNameLocations.Add("Bedroom", "https://www.ikea.com/ms/media/rooms/20201/bedroom/20201_rmbe05a/20201_rmbe05a_01_thumb_PH163122.jpg");
+            sensorNameLocations.Add("Garage", "https://www.residencestyle.com/wp-content/uploads/2019/06/Garage.jpg");
+            sensorNameLocations.Add("PC", "https://i.pinimg.com/originals/75/79/ee/7579ee363b374c6c02455b98a6eeaa6d.jpg");
+            sensorNameLocations.Add("Attic", "https://49op3q1oapcpd3h2q1ys9f81-wpengine.netdna-ssl.com/wp-content/uploads/2017/08/attic-2416396_1920.jpg");
+            sensorNameLocations.Add("Monkey Habitat", "https://pixfeeds.com/images/animals/monkeys/1280-669297382-sri-lankan-monkeys-at-yala-national-park.jpg");
+            setupFakeData();
+        }
+
+
+
+
+
+        private void setupFakeData()
+        {
+            Random r = new Random();
+            foreach (string s in sensorNameLocations.Keys) {
+                var temp = Math.Round(r.Next(30, 104) + r.NextDouble(),2);
+                Sensors.Add(new Sensor(){ Sensor_ID = 0,Name=s+" Sensor", Temperature=temp, AvgTemperature=temp+r.Next(-5,5), imageSrc= sensorNameLocations[s] });
+
+            }
+        }
+
+
+        public ObservableCollection<Sensor> Sensors
+        {
+            get { return sensors; }
+            set { SetProperty(ref sensors, value, "Sensors"); }
+        }
+    }
+}
diff --git a/CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml b/CarouselViewChallenge/CarouselViewChallenge/Views/CarouselViewChallengePage.xaml
@@ -3,11 +3,129 @@
              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:local="clr-namespace:CarouselViewChallenge.ViewModels"
+             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
+             xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
+             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
              mc:Ignorable="d"
              x:Class="CarouselViewChallenge.Views.CarouselViewChallengePage">
+    <ContentPage.BindingContext>
+        <local:CarouselViewChallengePageViewModel/>
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+
+            <x:String x:Key="MountainImage">mountain_dark</x:String>
+
+            <Color x:Key="HeaderColor">#FFFFFF</Color>
+            <Color x:Key="ArrowColor">#768ea0</Color>
+            <Color x:Key="BorderColor">#d2d7dd</Color>
+            <Color x:Key="TagColor">#ffa318</Color>
+            <Color x:Key="TabSubTextColor">#FFFFFF</Color>
+            <Color x:Key="SubTextColor">#FFFFFF</Color>
+            <Color x:Key="TempLabelColor">#ffffff</Color>
+
+            <!--BackgroundGradients-->
+            <Color x:Key="BackgroundGradientStartColor">#E8D6CB</Color>
+            <Color x:Key="BackgroundGradientMidColor">#6683A9</Color>
+            <Color x:Key="BackgroundGradientEndColor">#192E4A</Color>
+            <!--Guage Gradients-->
+            <Color x:Key="GaugeGradientStartColor">#7A89B1</Color>
+            <Color x:Key="GaugeGradientEndColor">#FB7D80</Color>
+
+
+
+            <Color x:Key="PageBackgroundColor">LightGray</Color>
+            <Color x:Key="HeadingTextColor">Black</Color>
+            <Color x:Key="NormalTextColor">Black</Color>
+            <Style x:Key="LabelHeadingStyle" TargetType="Label">
+                <Setter Property="FontAttributes" Value="Bold" />
+                <Setter Property="FontSize" Value="Medium"/>
+                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+                <Setter Property="VerticalOptions" Value="Start" />
+                <Setter Property="Padding" Value="10,0,0,0" />
+                <Setter Property="TextColor" Value="{StaticResource HeadingTextColor}" />
+            </Style>
+            <Style x:Key="LabelTextStyle" TargetType="Label">
+
+                <Setter Property="FontSize" Value="Default"/>
+                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
+                <Setter Property="VerticalOptions" Value="Start" />
+                <Setter Property="Padding" Value="10,0" />
+                <Setter Property="TextColor" Value="{StaticResource NormalTextColor}" />
+            </Style>
+        </ResourceDictionary>
+    </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="3*" />
+                <RowDefinition Height="8*" />
+                <RowDefinition Height="3*" />
+            </Grid.RowDefinitions>
+
+            <skia:SKCanvasView
+                x:Name="BackgroundGradient"
+                Grid.RowSpan="3"
+                 HorizontalOptions="Fill"
+                PaintSurface="BackgroundGradient_PaintSurface"
+                VerticalOptions="Fill" />
+
+
+            <CarouselView Grid.Row="1" ItemsSource="{Binding Sensors}" PeekAreaInsets="150">
+                <CarouselView.ItemTemplate>
+                    <DataTemplate>
+                        <StackLayout HorizontalOptions="Center" VerticalOptions="FillAndExpand" Padding="12,0,32,0" Margin="0,0,0,0" >
+                            <Frame BackgroundColor="White" CornerRadius="20"  BorderColor="Black" Padding="0,0,0,0" Margin="0,0,0,0"  IsClippedToBounds="True" HasShadow="True">
+
+                                <Grid RowSpacing="0" ColumnSpacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  Margin="0,0,0,0" Padding="0,0,0,0">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="9*" />
+                                        <RowDefinition Height="1*" />
+                                        <RowDefinition Height="1*" />
+                                        <RowDefinition Height="1.5*" />
+
+                                    </Grid.RowDefinitions>
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="2*" />
+                                        <ColumnDefinition Width="1*" />
+
+                                    </Grid.ColumnDefinitions>
+                                    <skia:SKCanvasView
+                                         x:Name="CarouselGradient"
+                                            Grid.Row="0"
+                                            Grid.Column="0"
+                                             Grid.RowSpan="4"
+                                             Grid.ColumnSpan="2"
+                                             HorizontalOptions="FillAndExpand"
+                                            Margin="0,0,0,0"
+                                             PaintSurface="CarouselGradient_PaintSurface"
+                                            VerticalOptions="Fill" />
+
+                                    <ffimageloading:CachedImage Grid.Row="0"  Grid.Column="0" Grid.RowSpan="1" Grid.ColumnSpan="2"
+
+			                Margin="0,0,0,10"
+			                DownsampleToViewSize="true"
+			                Source = "{Binding imageSrc}">
+                                        <ffimageloading:CachedImage.Transformations>
+                                            <fftransformations:CornersTransformation BottomLeftCornerSize="0" BottomRightCornerSize="0" TopLeftCornerSize="7" TopRightCornerSize="7" CornersTransformType="AllRounded" />
+
+                                        </ffimageloading:CachedImage.Transformations>
+                                    </ffimageloading:CachedImage>
+
+
+                                    <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"  Text="{Binding Name}" Style="{StaticResource LabelHeadingStyle}"></Label>
+                                    <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"  Text="{Binding TemperatureFormatted}"  Style="{StaticResource LabelTextStyle}"></Label>
+                                    <Label Grid.Row="3" Grid.Column="0"  Grid.ColumnSpan="2" Text="{Binding AvgTemperatureFormatted}"  Style="{StaticResource LabelTextStyle}"  ></Label>
+                                </Grid>
+                            </Frame>
+                        </StackLayout>
+                    </DataTemplate>
+                </CarouselView.ItemTemplate>
+            </CarouselView>
+        </Grid>
     </ContentPage.Content>
 </ContentPage>