dotnet · jsuarezruiz · May 16, 2021
diff --git a/src/GraphicsControls/Handlers/Button/GnomeButtonDrawable.cs b/src/GraphicsControls/Handlers/Button/GnomeButtonDrawable.cs
@@ -0,0 +1,60 @@
+namespace Microsoft.Maui.Graphics.Controls
+{
+    public class GnomeButtonDrawable : ViewDrawable<IButton>, IButtonDrawable
+    {
+        public void DrawBackground(ICanvas canvas, RectangleF dirtyRect, IButton view)
+        {
+            canvas.SaveState();
+
+            var strokeWidth = 1;
+
+            if (VirtualView.IsEnabled)
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F8F7F7");
+                canvas.StrokeColor = Color.FromHex("#AA9F98");
+            }
+            else
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F4F4F2");
+                canvas.StrokeColor = Color.FromHex("#BABDB6");
+            }
+
+            canvas.StrokeSize = strokeWidth;
+
+            var x = dirtyRect.X;
+            var y = dirtyRect.Y;
+
+            var width = dirtyRect.Width;
+            var height = dirtyRect.Height;
+
+            float margin = strokeWidth * 2;
+
+            canvas.FillRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, height - margin, 2);
+            canvas.DrawRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, height - margin, 2);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawText(ICanvas canvas, RectangleF dirtyRect, IButton view)
+        {
+            canvas.SaveState();
+
+            if (VirtualView.IsEnabled)
+                canvas.FontColor = VirtualView.TextColor.WithDefault("#2E3436");
+            else
+                canvas.FontColor = VirtualView.TextColor.WithDefault("#909494");
+
+            canvas.FontSize = 14f;
+
+            var height = dirtyRect.Height;
+            var width = dirtyRect.Width;
+
+            canvas.DrawString(VirtualView.Text, 0, 0, width, height, HorizontalAlignment.Center, VerticalAlignment.Center);
+
+            canvas.RestoreState();
+        }
+
+        public override Size GetDesiredSize(IView view, double widthConstraint, double heightConstraint) =>
+            new Size(widthConstraint, 33f);
+    }
+}
diff --git a/src/GraphicsControls/Handlers/CheckBox/GnomeCheckBoxDrawable.cs b/src/GraphicsControls/Handlers/CheckBox/GnomeCheckBoxDrawable.cs
@@ -0,0 +1,68 @@
+namespace Microsoft.Maui.Graphics.Controls
+{
+    public class GnomeCheckBoxDrawable : ViewDrawable<ICheckBox>, ICheckBoxDrawable
+    {
+        const string GnomeCheckBoxMark = "M11.9479 1.04779L4.99119 7.87784L3.12583 6.00874L0.994873 5.99314L1.00605 7.6894L3.93279 10.622C4.51741 11.2076 5.46502 11.2076 6.04964 10.622L14.018 2.55951L14.02 0.99173L11.9479 1.04779Z";
+
+        public void DrawBackground(ICanvas canvas, RectangleF dirtyRect, ICheckBox view)
+        {
+            canvas.SaveState();
+
+            float size = 16f;
+            var strokeWidth = 1;
+
+            if (VirtualView.IsEnabled)
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#FFFFFF");
+                canvas.StrokeColor = Color.FromHex("#AA9F98");
+            }
+            else
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F4F4F2");
+                canvas.StrokeColor = Color.FromHex("#BABDB6");
+            }
+
+            canvas.StrokeSize = strokeWidth;
+
+            var x = dirtyRect.X;
+            var y = dirtyRect.Y;
+
+            float margin = strokeWidth * 2;
+
+            canvas.FillRoundedRectangle(x + strokeWidth, y + strokeWidth, size - margin, size - margin, 2);
+            canvas.DrawRoundedRectangle(x + strokeWidth, y + strokeWidth, size - margin, size - margin, 2);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawMark(ICanvas canvas, RectangleF dirtyRect, ICheckBox view)
+        {
+            if (VirtualView.IsChecked)
+            {
+                canvas.SaveState();
+
+                canvas.Translate(3, 1);
+
+                var vBuilder = new PathBuilder();
+                var path = vBuilder.BuildPath(GnomeCheckBoxMark);
+
+                if (VirtualView.IsEnabled)
+                    canvas.FillColor = Color.FromHex("#2E3436");
+                else
+                    canvas.FillColor = Color.FromHex("#C7C7C7");
+
+                canvas.FillPath(path);
+
+                canvas.RestoreState();
+            }
+        }
+
+        public void DrawText(ICanvas canvas, RectangleF dirtyRect, ICheckBox view)
+        {
+
+        }
+
+        public override Size GetDesiredSize(IView view, double widthConstraint, double heightConstraint) =>
+            new Size(widthConstraint, 16f);
+    }
+}
diff --git a/src/GraphicsControls/Handlers/ProgressBar/GnomeProgressBarDrawable.cs b/src/GraphicsControls/Handlers/ProgressBar/GnomeProgressBarDrawable.cs
@@ -0,0 +1,63 @@
+namespace Microsoft.Maui.Graphics.Controls
+{
+    public class GnomeProgressBarDrawable : ViewDrawable<IProgress>, IProgressBarDrawable
+    {
+        const float GnomeTrackHeight = 7.0f;
+
+        public void DrawProgress(ICanvas canvas, RectangleF dirtyRect, IProgress view)
+        {
+            canvas.SaveState();
+
+            if (VirtualView.IsEnabled)
+                canvas.FillColor = Color.FromHex("#3584E4");
+            else
+                canvas.FillColor = Color.FromHex("#CFCAC4");
+
+            var strokeWidth = 1;
+
+            var x = dirtyRect.X;
+            var y = (float)((dirtyRect.Height - GnomeTrackHeight) / 2);
+
+            var width = dirtyRect.Width;
+
+            canvas.FillRoundedRectangle(x + strokeWidth, y + strokeWidth, (float)(width * VirtualView.Progress) - (strokeWidth * 2), GnomeTrackHeight - (strokeWidth * 2), 6);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawTrack(ICanvas canvas, RectangleF dirtyRect, IProgress view)
+        {
+            canvas.SaveState();
+
+            var strokeWidth = 1;
+
+            if (VirtualView.IsEnabled)
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F8F7F7");
+                canvas.StrokeColor = Color.FromHex("#AA9F98");
+            }
+            else
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F4F4F2");
+                canvas.StrokeColor = Color.FromHex("#BABDB6");
+            }
+
+            canvas.StrokeSize = strokeWidth;
+
+            var x = dirtyRect.X;
+            var y = (float)((dirtyRect.Height - GnomeTrackHeight) / 2);
+
+            var width = dirtyRect.Width;
+
+            float margin = strokeWidth * 2;
+
+            canvas.FillRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, GnomeTrackHeight - margin, 6);
+            canvas.DrawRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, GnomeTrackHeight - margin, 6);
+
+            canvas.RestoreState();
+        }
+
+        public override Size GetDesiredSize(IView view, double widthConstraint, double heightConstraint) =>
+            new Size(widthConstraint, 11f);
+    }
+}
diff --git a/src/GraphicsControls/Handlers/Slider/GnomeSliderDrawable.cs b/src/GraphicsControls/Handlers/Slider/GnomeSliderDrawable.cs
@@ -0,0 +1,106 @@
+namespace Microsoft.Maui.Graphics.Controls
+{
+    public class GnomeSliderDrawable : ViewDrawable<ISlider>, ISliderDrawable
+    {
+        RectangleF trackRect = new RectangleF();
+        public RectangleF TrackRect => trackRect;
+
+        RectangleF touchTargetRect = new RectangleF();
+        public RectangleF TouchTargetRect => touchTargetRect;
+
+        public override void DrawBackground(ICanvas canvas, RectangleF dirtyRect, IView view)
+        {
+            canvas.SaveState();
+
+            var strokeWidth = 1;
+
+            if (VirtualView.IsEnabled)
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F8F7F7");
+                canvas.StrokeColor = Color.FromHex("#AA9F98");
+            }
+            else
+            {
+                canvas.FillColor = VirtualView.BackgroundColor.WithDefault("#F4F4F2");
+                canvas.StrokeColor = Color.FromHex("#BABDB6");
+            }
+
+            var x = dirtyRect.X;
+
+            var width = dirtyRect.Width;
+            var height = 5;
+
+            var y = (float)((dirtyRect.Height - height) / 2);
+
+            trackRect.X = x;
+            trackRect.Width = width;
+
+            float margin = strokeWidth * 2;
+
+            canvas.FillRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, height - margin, 6);
+            canvas.DrawRoundedRectangle(x + strokeWidth, y + strokeWidth, width - margin, height - margin, 6);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawTrackProgress(ICanvas canvas, RectangleF dirtyRect, ISlider view)
+        {
+            canvas.SaveState();
+
+            canvas.FillColor = VirtualView.MinimumTrackColor.WithDefault(VirtualView.IsEnabled ? "#3584E4" : "#E1DEDB");
+
+            var value = (VirtualView.Value / VirtualView.Maximum - VirtualView.Minimum).Clamp(0, 1);
+
+            var width = (float)(dirtyRect.Width * value);
+            var height = 3;
+
+            var x = dirtyRect.X;
+            var y = (float)((dirtyRect.Height - height) / 2);
+
+            canvas.FillRoundedRectangle(x, y, width, height, 6);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawThumb(ICanvas canvas, RectangleF dirtyRect, ISlider view)
+        {
+            canvas.SaveState();
+
+            var size = 15.85f;
+            var strokeWidth = 1f;
+
+            canvas.StrokeColor = VirtualView.ThumbColor.WithDefault("#BCBFB7");
+
+            canvas.StrokeSize = strokeWidth;
+
+            var value = (VirtualView.Value / VirtualView.Maximum - VirtualView.Minimum).Clamp(0, 1);
+
+            var x = (float)((dirtyRect.Width * value) - (size / 2));
+
+            if (x <= strokeWidth)
+                x = strokeWidth / 2;
+
+            if (x >= dirtyRect.Width - (size + strokeWidth))
+                x = dirtyRect.Width - (size + strokeWidth);
+
+            var y = (float)((dirtyRect.Height - size) / 2);
+
+            touchTargetRect.Center(new PointF(x, y));
+
+            canvas.FillColor = Color.FromHex("#F4F4F2");
+
+            canvas.FillEllipse(x, y, size, size);
+            canvas.DrawEllipse(x, y, size, size);
+
+            canvas.RestoreState();
+        }
+
+        public void DrawText(ICanvas canvas, RectangleF dirtyRect, ISlider view)
+        {
+
+        }
+
+        public override Size GetDesiredSize(IView view, double widthConstraint, double heightConstraint) =>
+            new Size(widthConstraint, 18f);
+    }
+}