Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

Commit

Permalink
[iOS] Make RangeSlider more natural look like (#1109)
Browse files Browse the repository at this point in the history 
* Make iOS RangeSlider more natural look like

* Fixed shadow disappearing bug

* Shadow: Fixed property changed bug
  • Loading branch information
@AndreiMisiukevich
AndreiMisiukevich committed Mar 25, 2021
1 parent d41d06a commit bd50618
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 25 deletions.
6 changes: 3 additions & 3 deletions samples/XCT.Sample/Pages/Views/RangeSliderPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
Expand Down
12 changes: 7 additions & 5 deletions src/CommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.android.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
27 changes: 18 additions & 9 deletions ...ommunityToolkit/Xamarin.CommunityToolkit/Effects/Shadow/PlatformShadowEffect.ios.macos.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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)
Expand Down
40 changes: 32 additions & 8 deletions src/CommunityToolkit/Xamarin.CommunityToolkit/Views/RangeSlider/RangeSlider.shared.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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
{
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit bd50618

Please sign in to comment.