Skip to content
This repository was archived by the owner on Dec 21, 2023. It is now read-only.

Dynamic ripple effect color and interactions. #126

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Dynamic ripple effect color and interactions. #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7edbc77
Moved IsOn and IsCheck from StartInteraction to EndInteraction.
zZBrigadierZz Oct 5, 2022
d670b91
Merge branch 'main' of https://github.com/zZBrigadierZz/Microsoft.Mau…
zZBrigadierZz Oct 5, 2022
f79f5b8
Add dynamic ripple color change based on background color lightness.
zZBrigadierZz Oct 5, 2022
9136026
Fixed formatting in MaterialStepperDrawable, also if parameter color …
zZBrigadierZz Oct 14, 2022
3feb617
Update MaterialStepperDrawable.cs
zZBrigadierZz Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions src/GraphicsControls/Handlers/CheckBox/CheckBoxHandler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
44 changes: 29 additions & 15 deletions src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,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;
Expand All @@ -49,7 +53,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();

Expand All @@ -61,7 +65,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;
Expand All @@ -77,9 +83,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);

Expand All @@ -93,7 +103,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;
Expand All @@ -109,9 +121,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);

Expand All @@ -122,17 +138,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;
Expand All @@ -149,12 +163,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);
Expand Down
33 changes: 17 additions & 16 deletions src/GraphicsControls/Handlers/Switch/SwitchHandler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,27 @@ public class SwitchHandler : GraphicsControlHandler<ISwitchDrawable, ISwitch>

public SwitchHandler() : base(DrawMapper, PropertyMapper)
{

}

public SwitchHandler(DrawableType drawableType) : base(DrawMapper, PropertyMapper)
{
_drawableType = drawableType;
}

public static PropertyMapper<ISwitch, SwitchHandler> PropertyMapper = new PropertyMapper<ISwitch, SwitchHandler>(ViewHandler.Mapper)
{
[nameof(ISwitch.IsOn)] = MapIsOn,
[nameof(ISwitch.TrackColor)] = ViewHandler.MapInvalidate,
[nameof(ISwitch.ThumbColor)] = ViewHandler.MapInvalidate
};
public static PropertyMapper<ISwitch, SwitchHandler> PropertyMapper =
new PropertyMapper<ISwitch, SwitchHandler>(ViewHandler.Mapper)
{
[nameof(ISwitch.IsOn)] = MapIsOn,
[nameof(ISwitch.TrackColor)] = ViewHandler.MapInvalidate,
[nameof(ISwitch.ThumbColor)] = ViewHandler.MapInvalidate
};

public static DrawMapper<ISwitchDrawable, ISwitch> DrawMapper = new DrawMapper<ISwitchDrawable, ISwitch>(ViewHandler.DrawMapper)
{
["Background"] = MapDrawBackground,
["Thumb"] = MapDrawThumb
};
public static DrawMapper<ISwitchDrawable, ISwitch> DrawMapper =
new DrawMapper<ISwitchDrawable, ISwitch>(ViewHandler.DrawMapper)
{
["Background"] = MapDrawBackground,
["Thumb"] = MapDrawThumb
};

public static string[] DefaultSwitchLayerDrawingOrder =
ViewHandler.DefaultLayerDrawingOrder.ToList().InsertAfter(new string[]
Expand Down Expand Up @@ -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)
Expand All @@ -89,7 +90,7 @@ void UpdateIsOn()
Invalidate();
}
else
AnimateToggle();
AnimateToggle();
}

internal void AnimateToggle()
Expand Down
15 changes: 15 additions & 0 deletions src/GraphicsControls/Platform/ColorExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,20 @@ public static Color ContrastColor(this Color color)
// Return black for bright colors, white for dark colors
return luma > 0.5 ? Colors.Black : Colors.White;
}

/// <summary>
/// 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.
/// </summary>
/// <param name="color">Color on which we want to base returned color.</param>
/// <returns>Can return Colors.Black or Colors.White</returns>
public static Color ComplementaryColor(this Color color)
{
if(color == null)
return Colors.Black;

color.ToHsl(out _, out _, out var lightness);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can return a default color (or null value) if the color parameter is null.

return lightness > 0.4 ? Colors.Black : Colors.White;
}
}
}