From 7edbc771f0d5001aa1f8e55ed99fdab837156dfd Mon Sep 17 00:00:00 2001 From: zZBrigadierZz Date: Wed, 5 Oct 2022 13:17:18 +0200 Subject: [PATCH 1/4] Moved IsOn and IsCheck from StartInteraction to EndInteraction. --- .../Handlers/CheckBox/CheckBoxHandler.cs | 6 ++-- .../Handlers/Switch/SwitchHandler.cs | 33 ++++++++++--------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/GraphicsControls/Handlers/CheckBox/CheckBoxHandler.cs b/src/GraphicsControls/Handlers/CheckBox/CheckBoxHandler.cs index ae5f949..600f418 100644 --- a/src/GraphicsControls/Handlers/CheckBox/CheckBoxHandler.cs +++ b/src/GraphicsControls/Handlers/CheckBox/CheckBoxHandler.cs @@ -62,12 +62,12 @@ public static void MapDrawMark(ICanvas canvas, RectF dirtyRect, ICheckBoxDrawabl public static void MapDrawText(ICanvas canvas, RectF dirtyRect, ICheckBoxDrawable drawable, ICheckBox view) => drawable.DrawText(canvas, dirtyRect, view); - public override bool StartInteraction(PointF[] points) + public override void EndInteraction(PointF[] points, bool inside) { - if (VirtualView != null) + if (VirtualView != null && inside) VirtualView.IsChecked = !VirtualView.IsChecked; - return base.StartInteraction(points); + base.EndInteraction(points, inside); } } } \ No newline at end of file diff --git a/src/GraphicsControls/Handlers/Switch/SwitchHandler.cs b/src/GraphicsControls/Handlers/Switch/SwitchHandler.cs index 841ad0e..897c3a5 100644 --- a/src/GraphicsControls/Handlers/Switch/SwitchHandler.cs +++ b/src/GraphicsControls/Handlers/Switch/SwitchHandler.cs @@ -13,7 +13,6 @@ public class SwitchHandler : GraphicsControlHandler public SwitchHandler() : base(DrawMapper, PropertyMapper) { - } public SwitchHandler(DrawableType drawableType) : base(DrawMapper, PropertyMapper) @@ -21,18 +20,20 @@ public SwitchHandler(DrawableType drawableType) : base(DrawMapper, PropertyMappe _drawableType = drawableType; } - public static PropertyMapper PropertyMapper = new PropertyMapper(ViewHandler.Mapper) - { - [nameof(ISwitch.IsOn)] = MapIsOn, - [nameof(ISwitch.TrackColor)] = ViewHandler.MapInvalidate, - [nameof(ISwitch.ThumbColor)] = ViewHandler.MapInvalidate - }; + public static PropertyMapper PropertyMapper = + new PropertyMapper(ViewHandler.Mapper) + { + [nameof(ISwitch.IsOn)] = MapIsOn, + [nameof(ISwitch.TrackColor)] = ViewHandler.MapInvalidate, + [nameof(ISwitch.ThumbColor)] = ViewHandler.MapInvalidate + }; - public static DrawMapper DrawMapper = new DrawMapper(ViewHandler.DrawMapper) - { - ["Background"] = MapDrawBackground, - ["Thumb"] = MapDrawThumb - }; + public static DrawMapper DrawMapper = + new DrawMapper(ViewHandler.DrawMapper) + { + ["Background"] = MapDrawBackground, + ["Thumb"] = MapDrawThumb + }; public static string[] DefaultSwitchLayerDrawingOrder = ViewHandler.DefaultLayerDrawingOrder.ToList().InsertAfter(new string[] @@ -64,15 +65,15 @@ public static void MapDrawBackground(ICanvas canvas, RectF dirtyRect, ISwitchDra public static void MapDrawThumb(ICanvas canvas, RectF dirtyRect, ISwitchDrawable drawable, ISwitch view) => drawable.DrawThumb(canvas, dirtyRect, view); - public override bool StartInteraction(PointF[] points) + public override void EndInteraction(PointF[] points, bool inside) { - if (VirtualView != null) + if (VirtualView != null && inside) { VirtualView.IsOn = !VirtualView.IsOn; AnimateToggle(); } - return base.StartInteraction(points); + base.EndInteraction(points, inside); } public static void MapIsOn(IElementHandler handler, ISwitch virtualView) @@ -89,7 +90,7 @@ void UpdateIsOn() Invalidate(); } else - AnimateToggle(); + AnimateToggle(); } internal void AnimateToggle() From f79f5b806ccdbc9cc40b06efeec13c7fc6955214 Mon Sep 17 00:00:00 2001 From: zZBrigadierZz Date: Wed, 5 Oct 2022 14:16:49 +0200 Subject: [PATCH 2/4] Add dynamic ripple color change based on background color lightness. --- .../Handlers/Button/MaterialButtonDrawable.cs | 9 ++-- .../Stepper/MaterialStepperDrawable.cs | 53 ++++++++++++------- .../Platform/ColorExtensions.cs | 12 +++++ 3 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs b/src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs index d131e48..354bd68 100644 --- a/src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs +++ b/src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs @@ -58,7 +58,8 @@ public void DrawText(ICanvas canvas, RectF dirtyRect, IButton button) var width = dirtyRect.Width; var text = (button as IText)?.Text; - canvas.DrawString(text?.ToUpper(), x, y, width, MaterialBackgroundHeight, HorizontalAlignment.Center, VerticalAlignment.Center); + canvas.DrawString(text?.ToUpper(), x, y, width, MaterialBackgroundHeight, HorizontalAlignment.Center, + VerticalAlignment.Center); canvas.RestoreState(); } @@ -74,12 +75,12 @@ internal void DrawRippleEffect(ICanvas canvas, RectF dirtyRect, IButton button) canvas.ClipPath(border); - canvas.FillColor = Material.Color.White.ToColor().WithAlpha(0.75f); + var color = button.Background?.ToColor() ?? Colors.White; + canvas.FillColor = color?.ComplementaryColor().WithAlpha(0.5f); canvas.Alpha = 0.25f; - float minimumRippleEffectSize = 0.0f; - + const float minimumRippleEffectSize = 0.0f; var rippleEffectSize = minimumRippleEffectSize.Lerp(dirtyRect.Width, AnimationPercent); canvas.FillCircle((float)TouchPoint.X, (float)TouchPoint.Y, rippleEffectSize); diff --git a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs index 6968387..c90315a 100644 --- a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs +++ b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs @@ -6,8 +6,11 @@ namespace Microsoft.Maui.Graphics.Controls { public class MaterialStepperDrawable : ViewDrawable, IStepperDrawable { - const string MaterialStepperMinusIcon = "M0.990234 1.96143H13.0098C13.5161 1.96143 13.9478 1.53809 13.9478 1.01514C13.9478 0.500488 13.5161 0.0688477 13.0098 0.0688477H0.990234C0.500488 0.0688477 0.0522461 0.500488 0.0522461 1.01514C0.0522461 1.53809 0.500488 1.96143 0.990234 1.96143Z"; - const string MaterialStepperPlusIcon = "M0.990234 7.95312H6.05371V13.0166C6.05371 13.5312 6.47705 13.9629 7 13.9629C7.52295 13.9629 7.94629 13.5312 7.94629 13.0166V7.95312H13.0098C13.5244 7.95312 13.9561 7.52979 13.9561 7.00684C13.9561 6.48389 13.5244 6.06055 13.0098 6.06055H7.94629V0.99707C7.94629 0.482422 7.52295 0.0507812 7 0.0507812C6.47705 0.0507812 6.05371 0.482422 6.05371 0.99707V6.06055H0.990234C0.475586 6.06055 0.0439453 6.48389 0.0439453 7.00684C0.0439453 7.52979 0.475586 7.95312 0.990234 7.95312Z"; + const string MaterialStepperMinusIcon = + "M0.990234 1.96143H13.0098C13.5161 1.96143 13.9478 1.53809 13.9478 1.01514C13.9478 0.500488 13.5161 0.0688477 13.0098 0.0688477H0.990234C0.500488 0.0688477 0.0522461 0.500488 0.0522461 1.01514C0.0522461 1.53809 0.500488 1.96143 0.990234 1.96143Z"; + + const string MaterialStepperPlusIcon = + "M0.990234 7.95312H6.05371V13.0166C6.05371 13.5312 6.47705 13.9629 7 13.9629C7.52295 13.9629 7.94629 13.5312 7.94629 13.0166V7.95312H13.0098C13.5244 7.95312 13.9561 7.52979 13.9561 7.00684C13.9561 6.48389 13.5244 6.06055 13.0098 6.06055H7.94629V0.99707C7.94629 0.482422 7.52295 0.0507812 7 0.0507812C6.47705 0.0507812 6.05371 0.482422 6.05371 0.99707V6.06055H0.990234C0.475586 6.06055 0.0439453 6.48389 0.0439453 7.00684C0.0439453 7.52979 0.475586 7.95312 0.990234 7.95312Z"; const float MaterialStepperHeight = 40.0f; const float MaterialStepperWidth = 110.0f; @@ -30,9 +33,13 @@ public void DrawBackground(ICanvas canvas, RectF dirtyRect, IStepper stepper) else { if (Application.Current?.RequestedTheme == AppTheme.Light) - canvas.FillColor = stepper.IsEnabled ? Material.Color.White.ToColor() : Material.Color.Light.Gray6.ToColor(); + canvas.FillColor = stepper.IsEnabled + ? Material.Color.White.ToColor() + : Material.Color.Light.Gray6.ToColor(); else - canvas.FillColor = stepper.IsEnabled ? Material.Color.Dark.Gray1.ToColor().WithAlpha(0.25f) : Material.Color.Dark.Gray2.ToColor().WithAlpha(0.25f); + canvas.FillColor = stepper.IsEnabled + ? Material.Color.Dark.Gray1.ToColor().WithAlpha(0.25f) + : Material.Color.Dark.Gray2.ToColor().WithAlpha(0.25f); } var x = dirtyRect.X; @@ -49,7 +56,7 @@ public void DrawBackground(ICanvas canvas, RectF dirtyRect, IStepper stepper) height = MaterialStepperHeight; width = MaterialStepperWidth / 2; - canvas.FillRoundedRectangle(x, y, width, height, MaterialButtonCornerRadius); + canvas.FillRoundedRectangle(x, y, width, height, MaterialButtonCornerRadius); canvas.RestoreState(); @@ -61,7 +68,9 @@ public void DrawMinus(ICanvas canvas, RectF dirtyRect, IStepper stepper) canvas.SaveState(); canvas.StrokeSize = 1; - canvas.StrokeColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Light.Gray6.ToColor() : Material.Color.Dark.Gray6.ToColor(); + canvas.StrokeColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Light.Gray6.ToColor() + : Material.Color.Dark.Gray6.ToColor(); var x = dirtyRect.X; var y = dirtyRect.Y; @@ -77,9 +86,13 @@ public void DrawMinus(ICanvas canvas, RectF dirtyRect, IStepper stepper) var path = vBuilder.BuildPath(MaterialStepperMinusIcon); if (stepper.IsEnabled) - canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Black.ToColor() : Material.Color.White.ToColor().WithAlpha(0.5f); + canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Black.ToColor() + : Material.Color.White.ToColor().WithAlpha(0.5f); else - canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Light.Gray3.ToColor() : Material.Color.White.ToColor().WithAlpha(0.25f); + canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Light.Gray3.ToColor() + : Material.Color.White.ToColor().WithAlpha(0.25f); canvas.FillPath(path); @@ -93,7 +106,9 @@ public void DrawPlus(ICanvas canvas, RectF dirtyRect, IStepper stepper) canvas.SaveState(); canvas.StrokeSize = 1; - canvas.StrokeColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Light.Gray6.ToColor() : Material.Color.Dark.Gray6.ToColor(); + canvas.StrokeColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Light.Gray6.ToColor() + : Material.Color.Dark.Gray6.ToColor(); var x = MaterialStepperWidth / 2 + MaterialButtonMargin; var y = dirtyRect.Y; @@ -109,9 +124,13 @@ public void DrawPlus(ICanvas canvas, RectF dirtyRect, IStepper stepper) var path = vBuilder.BuildPath(MaterialStepperPlusIcon); if (stepper.IsEnabled) - canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Black.ToColor() : Material.Color.White.ToColor().WithAlpha(0.5f); + canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Black.ToColor() + : Material.Color.White.ToColor().WithAlpha(0.5f); else - canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light ? Material.Color.Light.Gray3.ToColor() : Material.Color.White.ToColor().WithAlpha(0.25f); + canvas.FillColor = Application.Current?.RequestedTheme == AppTheme.Light + ? Material.Color.Light.Gray3.ToColor() + : Material.Color.White.ToColor().WithAlpha(0.25f); canvas.FillPath(path); @@ -122,17 +141,15 @@ public void DrawPlus(ICanvas canvas, RectF dirtyRect, IStepper stepper) public void DrawSeparator(ICanvas canvas, RectF dirtyRect, IStepper stepper) { - } public void DrawText(ICanvas canvas, RectF dirtyRect, IStepper stepper) { - } internal void DrawRippleEffect(ICanvas canvas, RectF dirtyRect, IStepper stepper) { - RectF rect = RectF.Zero; + var rect = RectF.Zero; if (MinusRectangle.Contains(TouchPoint)) rect = MinusRectangle; @@ -149,12 +166,12 @@ internal void DrawRippleEffect(ICanvas canvas, RectF dirtyRect, IStepper stepper canvas.ClipPath(border); - canvas.FillColor = Material.Color.White.ToColor().WithAlpha(0.75f); + var color = stepper.Background?.ToColor() ?? Colors.White; + canvas.FillColor = color?.ComplementaryColor().WithAlpha(0.5f); canvas.Alpha = 0.25f; - float minimumRippleEffectSize = 0.0f; - + const float minimumRippleEffectSize = 0.0f; var rippleEffectSize = minimumRippleEffectSize.Lerp(rect.Width, AnimationPercent); canvas.FillCircle((float)TouchPoint.X, (float)TouchPoint.Y, rippleEffectSize); @@ -163,4 +180,4 @@ internal void DrawRippleEffect(ICanvas canvas, RectF dirtyRect, IStepper stepper } } } -} +} \ No newline at end of file diff --git a/src/GraphicsControls/Platform/ColorExtensions.cs b/src/GraphicsControls/Platform/ColorExtensions.cs index 4d60964..259953b 100644 --- a/src/GraphicsControls/Platform/ColorExtensions.cs +++ b/src/GraphicsControls/Platform/ColorExtensions.cs @@ -61,5 +61,17 @@ public static Color ContrastColor(this Color color) // Return black for bright colors, white for dark colors return luma > 0.5 ? Colors.Black : Colors.White; } + + /// + /// Returns a color which is visible on top of the current color. + /// If the current color is dark, returns white. If the current color is light, returns black. + /// + /// Color on which we want to base returned color. + /// Can return Colors.Black or Colors.White + public static Color ComplementaryColor(this Color color) + { + color.ToHsl(out _, out _, out var lightness); + return lightness > 0.4 ? Colors.Black : Colors.White; + } } } \ No newline at end of file From 91360263d2ae1838ae2606bcbdb6435fc68facff Mon Sep 17 00:00:00 2001 From: zZBrigadierZz <109725229+zZBrigadierZz@users.noreply.github.com> Date: Fri, 14 Oct 2022 07:08:05 +0200 Subject: [PATCH 3/4] Fixed formatting in MaterialStepperDrawable, also if parameter color is null in ComplementaryColor method we return Colors.Black as default color. --- .../Handlers/Stepper/MaterialStepperDrawable.cs | 6 ++---- src/GraphicsControls/Platform/ColorExtensions.cs | 3 +++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs index c90315a..d013514 100644 --- a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs +++ b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs @@ -6,11 +6,9 @@ namespace Microsoft.Maui.Graphics.Controls { public class MaterialStepperDrawable : ViewDrawable, IStepperDrawable { - const string MaterialStepperMinusIcon = - "M0.990234 1.96143H13.0098C13.5161 1.96143 13.9478 1.53809 13.9478 1.01514C13.9478 0.500488 13.5161 0.0688477 13.0098 0.0688477H0.990234C0.500488 0.0688477 0.0522461 0.500488 0.0522461 1.01514C0.0522461 1.53809 0.500488 1.96143 0.990234 1.96143Z"; + const string MaterialStepperMinusIcon = "M0.990234 1.96143H13.0098C13.5161 1.96143 13.9478 1.53809 13.9478 1.01514C13.9478 0.500488 13.5161 0.0688477 13.0098 0.0688477H0.990234C0.500488 0.0688477 0.0522461 0.500488 0.0522461 1.01514C0.0522461 1.53809 0.500488 1.96143 0.990234 1.96143Z"; - const string MaterialStepperPlusIcon = - "M0.990234 7.95312H6.05371V13.0166C6.05371 13.5312 6.47705 13.9629 7 13.9629C7.52295 13.9629 7.94629 13.5312 7.94629 13.0166V7.95312H13.0098C13.5244 7.95312 13.9561 7.52979 13.9561 7.00684C13.9561 6.48389 13.5244 6.06055 13.0098 6.06055H7.94629V0.99707C7.94629 0.482422 7.52295 0.0507812 7 0.0507812C6.47705 0.0507812 6.05371 0.482422 6.05371 0.99707V6.06055H0.990234C0.475586 6.06055 0.0439453 6.48389 0.0439453 7.00684C0.0439453 7.52979 0.475586 7.95312 0.990234 7.95312Z"; + const string MaterialStepperPlusIcon = "M0.990234 7.95312H6.05371V13.0166C6.05371 13.5312 6.47705 13.9629 7 13.9629C7.52295 13.9629 7.94629 13.5312 7.94629 13.0166V7.95312H13.0098C13.5244 7.95312 13.9561 7.52979 13.9561 7.00684C13.9561 6.48389 13.5244 6.06055 13.0098 6.06055H7.94629V0.99707C7.94629 0.482422 7.52295 0.0507812 7 0.0507812C6.47705 0.0507812 6.05371 0.482422 6.05371 0.99707V6.06055H0.990234C0.475586 6.06055 0.0439453 6.48389 0.0439453 7.00684C0.0439453 7.52979 0.475586 7.95312 0.990234 7.95312Z"; const float MaterialStepperHeight = 40.0f; const float MaterialStepperWidth = 110.0f; diff --git a/src/GraphicsControls/Platform/ColorExtensions.cs b/src/GraphicsControls/Platform/ColorExtensions.cs index 259953b..80a9252 100644 --- a/src/GraphicsControls/Platform/ColorExtensions.cs +++ b/src/GraphicsControls/Platform/ColorExtensions.cs @@ -70,6 +70,9 @@ public static Color ContrastColor(this Color color) /// Can return Colors.Black or Colors.White public static Color ComplementaryColor(this Color color) { + if(color == null) + return Colors.Black; + color.ToHsl(out _, out _, out var lightness); return lightness > 0.4 ? Colors.Black : Colors.White; } From 3feb61763eb2aff54d65357d295dbec9d032ba66 Mon Sep 17 00:00:00 2001 From: zZBrigadierZz <109725229+zZBrigadierZz@users.noreply.github.com> Date: Fri, 14 Oct 2022 07:16:17 +0200 Subject: [PATCH 4/4] Update MaterialStepperDrawable.cs --- .../Handlers/Stepper/MaterialStepperDrawable.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs index d013514..3bedd2a 100644 --- a/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs +++ b/src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs @@ -7,7 +7,6 @@ namespace Microsoft.Maui.Graphics.Controls public class MaterialStepperDrawable : ViewDrawable, IStepperDrawable { const string MaterialStepperMinusIcon = "M0.990234 1.96143H13.0098C13.5161 1.96143 13.9478 1.53809 13.9478 1.01514C13.9478 0.500488 13.5161 0.0688477 13.0098 0.0688477H0.990234C0.500488 0.0688477 0.0522461 0.500488 0.0522461 1.01514C0.0522461 1.53809 0.500488 1.96143 0.990234 1.96143Z"; - const string MaterialStepperPlusIcon = "M0.990234 7.95312H6.05371V13.0166C6.05371 13.5312 6.47705 13.9629 7 13.9629C7.52295 13.9629 7.94629 13.5312 7.94629 13.0166V7.95312H13.0098C13.5244 7.95312 13.9561 7.52979 13.9561 7.00684C13.9561 6.48389 13.5244 6.06055 13.0098 6.06055H7.94629V0.99707C7.94629 0.482422 7.52295 0.0507812 7 0.0507812C6.47705 0.0507812 6.05371 0.482422 6.05371 0.99707V6.06055H0.990234C0.475586 6.06055 0.0439453 6.48389 0.0439453 7.00684C0.0439453 7.52979 0.475586 7.95312 0.990234 7.95312Z"; const float MaterialStepperHeight = 40.0f; @@ -178,4 +177,4 @@ internal void DrawRippleEffect(ICanvas canvas, RectF dirtyRect, IStepper stepper } } } -} \ No newline at end of file +}