From bd50618b3b7ae55cdef002e2543ed0e40a082864 Mon Sep 17 00:00:00 2001
From: Andrei <andrei.misiukevich@gmail.com>
Date: Thu, 25 Mar 2021 01:38:37 +0100
Subject: [PATCH] [iOS] Make RangeSlider more natural look like (#1109)

* Make iOS RangeSlider more natural look like

* Fixed shadow disappearing bug

* Shadow: Fixed property changed bug
---
 .../Pages/Views/RangeSliderPage.xaml          |  6 +--
 .../Shadow/PlatformShadowEffect.android.cs    | 12 +++---
 .../Shadow/PlatformShadowEffect.ios.macos.cs  | 27 ++++++++-----
 .../Views/RangeSlider/RangeSlider.shared.cs   | 40 +++++++++++++++----
 4 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/samples/XCT.Sample/Pages/Views/RangeSliderPage.xaml b/samples/XCT.Sample/Pages/Views/RangeSliderPage.xaml
index 09e6cdf3e..4f9d70554 100644
--- a/samples/XCT.Sample/Pages/Views/RangeSliderPage.xaml
+++ b/samples/XCT.Sample/Pages/Views/RangeSliderPage.xaml
@@ -73,14 +73,14 @@
                 <Frame Padding="15, 10" BackgroundColor="LightBlue">
                     <StackLayout Spacing="10">
                         <Label Text="Thumb Size" FontAttributes="Bold"/>
-                        <Slider x:Name="ThumbSizeSlider" Maximum="50" Minimum="10" Value="30" />
+                        <Slider x:Name="ThumbSizeSlider" Maximum="50" Minimum="10" Value="28" />
                         <Label Text="Set Lower/Upper Thumb Size separately" />
                         <Switch x:Name="ThumbSizeSwitch" Toggled="OnThumbSizeSwitchToggled"/>
                         <StackLayout IsVisible="{Binding IsToggled, Source={x:Reference ThumbSizeSwitch}}">
                             <Label Text="Lower Thumb Size" />
-                            <Slider x:Name="LowerThumbSizeSlider" Maximum="50" Minimum="10" Value="30" />
+                            <Slider x:Name="LowerThumbSizeSlider" Maximum="50" Minimum="10" Value="28" />
                             <Label Text="Upper Thumb Size" />
-                            <Slider x:Name="UpperThumbSizeSlider" Maximum="50" Minimum="10" Value="30" />
+                            <Slider x:Name="UpperThumbSizeSlider" Maximum="50" Minimum="10" Value="28" />
                         </StackLayout>
 
                         <Label Text="Thumb Color" FontAttributes="Bold" Margin="0, 20, 0, 0"/>
diff --git a/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.android.cs b/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.android.cs
index 385572c2e..549cfb043 100644
--- a/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.android.cs
+++ b/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.android.cs
@@ -40,11 +40,13 @@ protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
 
 			switch (args.PropertyName)
 			{
-				case nameof(ShadowEffect.ColorPropertyName):
-				case nameof(ShadowEffect.OpacityPropertyName):
-				case nameof(ShadowEffect.RadiusPropertyName):
-				case nameof(ShadowEffect.OffsetXPropertyName):
-				case nameof(ShadowEffect.OffsetYPropertyName):
+				case ShadowEffect.ColorPropertyName:
+				case ShadowEffect.OpacityPropertyName:
+				case ShadowEffect.RadiusPropertyName:
+				case ShadowEffect.OffsetXPropertyName:
+				case ShadowEffect.OffsetYPropertyName:
+				case nameof(VisualElement.Width):
+				case nameof(VisualElement.Height):
 					View.Invalidate();
 					Update();
 					break;
diff --git a/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.ios.macos.cs b/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.ios.macos.cs
index bd639e4df..a5b1ac2d2 100644
--- a/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.ios.macos.cs
+++ b/src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.ios.macos.cs
@@ -35,10 +35,7 @@ protected override void OnAttached()
 			if (View == null)
 				return;
 
-			UpdateColor(View);
-			UpdateOpacity(View);
-			UpdateRadius(View);
-			UpdateOffset(View);
+			Update(View);
 		}
 
 		protected override void OnDetached()
@@ -58,22 +55,34 @@ protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
 
 			switch (args.PropertyName)
 			{
-				case nameof(ShadowEffect.ColorPropertyName):
+				case ShadowEffect.ColorPropertyName:
 					UpdateColor(View);
 					break;
-				case nameof(ShadowEffect.OpacityPropertyName):
+				case ShadowEffect.OpacityPropertyName:
 					UpdateOpacity(View);
 					break;
-				case nameof(ShadowEffect.RadiusPropertyName):
+				case ShadowEffect.RadiusPropertyName:
 					UpdateRadius(View);
 					break;
-				case nameof(ShadowEffect.OffsetXPropertyName):
-				case nameof(ShadowEffect.OffsetYPropertyName):
+				case ShadowEffect.OffsetXPropertyName:
+				case ShadowEffect.OffsetYPropertyName:
 					UpdateOffset(View);
 					break;
+				case nameof(VisualElement.Width):
+				case nameof(VisualElement.Height):
+					Update(View);
+					break;
 			}
 		}
 
+		void Update(in NativeView view)
+		{
+			UpdateColor(view);
+			UpdateOpacity(view);
+			UpdateRadius(view);
+			UpdateOffset(view);
+		}
+
 		void UpdateColor(in NativeView view)
 		{
 			if (view.Layer != null)
diff --git a/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/RangeSlider/RangeSlider.shared.cs b/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/RangeSlider/RangeSlider.shared.cs
index 802e5ba78..762985d79 100644
--- a/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/RangeSlider/RangeSlider.shared.cs
+++ b/src/CommunityToolkit/Xamarin.CommunityToolkit/Views/RangeSlider/RangeSlider.shared.cs
@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Runtime.CompilerServices;
 using System.Threading;
+using Xamarin.CommunityToolkit.Effects;
 using Xamarin.CommunityToolkit.UI.Views.Internals;
 using Xamarin.Forms;
 using Xamarin.Forms.Internals;
@@ -50,7 +51,7 @@ public static BindableProperty UpperValueProperty
 			= BindableProperty.Create(nameof(UpperValue), typeof(double), typeof(RangeSlider), 1.0, BindingMode.TwoWay, propertyChanged: OnLowerUpperValuePropertyChanged, coerceValue: CoerceValue);
 
 		public static BindableProperty ThumbSizeProperty
-			= BindableProperty.Create(nameof(ThumbSize), typeof(double), typeof(RangeSlider), 30.0, propertyChanged: OnLayoutPropertyChanged);
+			= BindableProperty.Create(nameof(ThumbSize), typeof(double), typeof(RangeSlider), 28.0, propertyChanged: OnLayoutPropertyChanged);
 
 		public static BindableProperty LowerThumbSizeProperty
 			= BindableProperty.Create(nameof(LowerThumbSize), typeof(double), typeof(RangeSlider), -1.0, propertyChanged: OnLayoutPropertyChanged);
@@ -59,7 +60,7 @@ public static BindableProperty UpperThumbSizeProperty
 			= BindableProperty.Create(nameof(UpperThumbSize), typeof(double), typeof(RangeSlider), -1.0, propertyChanged: OnLayoutPropertyChanged);
 
 		public static BindableProperty TrackSizeProperty
-			= BindableProperty.Create(nameof(TrackSize), typeof(double), typeof(RangeSlider), 3.0, propertyChanged: OnLayoutPropertyChanged);
+			= BindableProperty.Create(nameof(TrackSize), typeof(double), typeof(RangeSlider), 4.0, propertyChanged: OnLayoutPropertyChanged);
 
 		public static BindableProperty ThumbColorProperty
 			= BindableProperty.Create(nameof(ThumbColor), typeof(Color), typeof(RangeSlider), Color.Default, propertyChanged: OnLayoutPropertyChanged);
@@ -320,13 +321,17 @@ public double TrackRadius
 			set => SetValue(TrackRadiusProperty, value);
 		}
 
+		static bool IsThumbShadowSupported
+			=> Device.RuntimePlatform == Device.iOS
+			|| Device.RuntimePlatform == Device.macOS;
+
 		Frame Track { get; } = CreateFrameElement<Frame>();
 
 		Frame TrackHighlight { get; } = CreateFrameElement<Frame>();
 
-		Frame LowerThumb { get; } = CreateFrameElement<ThumbFrame>();
+		Frame LowerThumb { get; } = CreateFrameElement<ThumbFrame>(IsThumbShadowSupported);
 
-		Frame UpperThumb { get; } = CreateFrameElement<ThumbFrame>();
+		Frame UpperThumb { get; } = CreateFrameElement<ThumbFrame>(IsThumbShadowSupported);
 
 		Label LowerValueLabel { get; } = CreateLabelElement();
 
@@ -384,14 +389,26 @@ protected override void OnControlInitialized(AbsoluteLayout control)
 			OnLayoutPropertyChanged();
 		}
 
-		static Frame CreateFrameElement<TFrame>() where TFrame : Frame, new()
-			=> new TFrame
+		static Frame CreateFrameElement<TFrame>(bool hasShadow = false) where TFrame : Frame, new()
+		{
+			var frame = new TFrame
 			{
 				Padding = 0,
 				HasShadow = false,
 				IsClippedToBounds = true
 			};
 
+			if (hasShadow)
+			{
+				ShadowEffect.SetColor(frame, Color.Black);
+				ShadowEffect.SetOpacity(frame, .25);
+				ShadowEffect.SetRadius(frame, 3);
+				ShadowEffect.SetOffsetY(frame, 2);
+			}
+
+			return frame;
+		}
+
 		static Label CreateLabelElement()
 			=> new Label
 			{
@@ -481,10 +498,17 @@ void OnLayoutPropertyChanged()
 			var upperThumbColor = GetColorOrDefault(UpperThumbColor, ThumbColor);
 			var lowerThumbBorderColor = GetColorOrDefault(LowerThumbBorderColor, ThumbBorderColor);
 			var upperThumbBorderColor = GetColorOrDefault(UpperThumbBorderColor, ThumbBorderColor);
+			if (!IsThumbShadowSupported)
+			{
+				var defaultThumbColor = Color.FromRgb(182, 182, 182);
+				lowerThumbBorderColor = GetColorOrDefault(lowerThumbBorderColor, defaultThumbColor);
+				upperThumbBorderColor = GetColorOrDefault(upperThumbBorderColor, defaultThumbColor);
+			}
+
+			LowerThumb.BorderColor = lowerThumbBorderColor;
+			UpperThumb.BorderColor = upperThumbBorderColor;
 			LowerThumb.BackgroundColor = GetColorOrDefault(lowerThumbColor, Color.White);
 			UpperThumb.BackgroundColor = GetColorOrDefault(upperThumbColor, Color.White);
-			LowerThumb.BorderColor = GetColorOrDefault(lowerThumbBorderColor, Color.FromRgb(182, 182, 182));
-			UpperThumb.BorderColor = GetColorOrDefault(upperThumbBorderColor, Color.FromRgb(182, 182, 182));
 			Track.BackgroundColor = GetColorOrDefault(TrackColor, Color.FromRgb(182, 182, 182));
 			TrackHighlight.BackgroundColor = GetColorOrDefault(TrackHighlightColor, Color.FromRgb(46, 124, 246));
 			Track.BorderColor = GetColorOrDefault(TrackBorderColor, Color.Default);