Write custom switch control

Ooui.Forms/Renderers/SwitchRenderer.cs

@@ -3,7 +3,7 @@ using Xamarin.Forms;
 
 namespace Ooui.Forms.Renderers
 {
-    public class SwitchRenderer : ViewRenderer<Switch, Input>
+    public class SwitchRenderer : ViewRenderer<Switch, SwitchRenderer.SwitchElement>
     {
         public override SizeRequest GetDesiredSize (double widthConstraint, double heightConstraint)
         {
@@ -26,7 +26,7 @@ namespace Ooui.Forms.Renderers
 
             if (e.NewElement != null) {
                 if (Control == null) {
-                    var input = new Input (InputType.Checkbox);
+                    var input = new SwitchElement ();
                     SetNativeControl (input);
                     Control.Change += OnControlValueChanged;
                 }
@@ -47,5 +47,52 @@ namespace Ooui.Forms.Renderers
         {
             Control.IsChecked = Element.IsToggled;
         }
+
+        public class SwitchElement : Div
+        {
+            public event EventHandler Change;
+            bool isChecked = false;
+            readonly Div knob = new Div ();
+            public bool IsChecked {
+                get => isChecked;
+                set {
+                    isChecked = value;
+                    UpdateUI ();
+                }
+            }
+            public SwitchElement ()
+            {
+                AppendChild (knob);
+                knob.Style.Position = "absolute";
+                knob.Style.BorderRadius = "10px";
+                knob.Style.Cursor = "pointer";
+                knob.Style.Top = "2px";
+                knob.Style.Width = "18px";
+                knob.Style.Height = "34px";
+
+                Style.BorderRadius = "10px";
+                Style.Cursor = "pointer";
+                Style.BorderStyle = "solid";
+                Style.BorderWidth = "2px";
+                Click += (s, e) => {
+                    IsChecked = !IsChecked;
+                    Change?.Invoke (this, EventArgs.Empty);
+                };
+                UpdateUI ();
+            }
+
+            void UpdateUI ()
+            {
+                Style.BackgroundColor = isChecked ? "#337ab7" : "#888";
+                Style.BorderColor = Style.BackgroundColor;
+                knob.Style.BackgroundColor = isChecked ? "#FFF" : "#EEE";
+                if (isChecked) {
+                    knob.Style.Left = "34px";
+                }
+                else {
+                    knob.Style.Left = "2px";
+                }
+            }
+        }
     }
 }

Ooui/Client.js

@@ -1,6 +1,6 @@
 // Ooui v1.0.0
 
-var debug = true;
+var debug = false;
 
 const nodes = {};
 const hasText = {};

Ooui/Color.cs

@@ -65,15 +65,47 @@ namespace Ooui
             if (styleValue == "inherit")
                 return Colors.Clear;
             
-            //if (styleValue[0] == '#' && styleValue.Length == 4) {
+            if (styleValue[0] == '#' && styleValue.Length == 4) {
-            //}
+                var r = ReadHexNibble (styleValue[1]);
+                var g = ReadHexNibble (styleValue[2]);
+                var b = ReadHexNibble (styleValue[3]);
+                return new Color (r, g, b, 255);
+            }
 
-            //if (styleValue[0] == '#' && styleValue.Length == 7) {
+            if (styleValue[0] == '#' && styleValue.Length == 7) {
-            //}
+                var r = ReadHexByte (styleValue[1], styleValue[2]);
+                var g = ReadHexByte (styleValue[3], styleValue[4]);
+                var b = ReadHexByte (styleValue[5], styleValue[6]);
+                return new Color (r, g, b, 255);
+            }
 
             throw new ArgumentException ($"Cannot parse color string `{styleValue}`", nameof (styleValue));
         }
 
+        static byte ReadHexByte (char c0, char c1)
+        {
+            var n0 = ReadHex (c0);
+            var n1 = ReadHex (c1);
+            return (byte)((n0 << 4) | n1);
+        }
+
+        static byte ReadHexNibble (char c)
+        {
+            var n = ReadHex (c);
+            return (byte)((n << 4) | n);
+        }
+
+        static byte ReadHex (char c)
+        {
+            if ('0' <= c && c <= '9')
+                return (byte)(c - '0');
+            if ('a' <= c && c <= 'z')
+                return (byte)((c - 'a') + 10);
+            if ('A' <= c && c <= 'Z')
+                return (byte)((c - 'A') + 10);
+            return 0;
+        }
+
         public override string ToString ()
         {
             if (A == 255)

Samples/SwitchErrorSample.cs

@@ -22,7 +22,7 @@ namespace Samples
             };
             sw.Toggled += (sender, args) =>
             {
-                label.Text = $"Switch state is :{((Switch)sender).IsToggled}";
+                label.Text = $"Switch state is: {((Switch)sender).IsToggled}";
             };
             layout.Children.Add(label);
             layout.Children.Add(sw);