Write custom switch control
This commit is contained in:
parent
e4b1c44aa3
commit
d58625129b
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Ooui v1.0.0
|
||||
|
||||
var debug = true;
|
||||
var debug = false;
|
||||
|
||||
const nodes = {};
|
||||
const hasText = {};
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue