Add TrackBar and ColorDialog with ARGB support, Timer, and UI improvements

samples/ControlGallery/ControlGallery.csproj

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <OutputType>WinExe</OutputType>
-    <TargetFramework>$(_TargetFramework)</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
   </PropertyGroup>
 

samples/ControlGallery/MainForm.cs

@@ -14,11 +14,11 @@ public class MainForm : Form
 
         public MainForm ()
         {
+            Theme.UIFont = SKTypeface.FromFamilyName ("Segoe UI", SKFontStyleWeight.Normal, SKFontStyleWidth.Normal, SKFontStyleSlant.Upright);
             tree = new TreeView {
                 Dock = DockStyle.Left,
                 ShowDropdownGlyph = false
             };
-
             tree.Style.Border.Width = 0;
             tree.Style.Border.Right.Width = 1;
 
@@ -53,12 +53,15 @@ public MainForm ()
             tree.Items.Add ("TitleBar", ImageLoader.Get ("button.png"));
             tree.Items.Add ("ToolBar", ImageLoader.Get ("button.png"));
             tree.Items.Add ("TreeView", ImageLoader.Get ("button.png"));
+            tree.Items.Add("ColorDialog", ImageLoader.Get("button.png"));
+            tree.Items.Add("DateTimePicker" , ImageLoader.Get("button.png"));
 
             tree.ItemSelected += Tree_ItemSelected;
             Controls.Add (tree);
 
             Text = "Control Gallery";
             Image = ImageLoader.Get ("button.png");
+            this.TitleBar.AllowDoubleClickMaximize = true;
         }
 
         private void Tree_ItemSelected (object? sender, EventArgs<TreeViewItem> e)
@@ -145,6 +148,10 @@ private void Tree_ItemSelected (object? sender, EventArgs<TreeViewItem> e)
                     return new ToolBarPanel ();
                 case "TreeView":
                     return new TreeViewPanel ();
+                case "ColorDialog":
+                    return new ColorDialogPanel();
+                case "DateTimePicker":
+                    return new DateTimePickerPanel();
             }
 
             return null;

samples/ControlGallery/Panels/ColorDialogPanel.cs

@@ -0,0 +1,46 @@
+using Modern.Forms;
+using SkiaSharp;
+
+namespace ControlGallery.Panels
+{
+    public class ColorDialogPanel : Panel
+    {
+        public ColorDialogPanel ()
+        {
+            var button = Controls.Add (new Button {
+                Text = "Show Color Dialog",
+                AutoSize = true,
+            });
+
+            var color_panel = Controls.Add (new Panel {
+                Width = 100,
+                Height = 100
+            });
+            color_panel.Style.BackgroundColor = SKColors.DarkGray;
+
+            var label = Controls.Add (new Label {
+                AutoSize = true,
+                Width = 200,
+                Height = 100
+            });
+
+            button.Click += async (s, e) => {
+                var dlg = new ColorDialog ();
+                var result = await dlg.ShowDialog (this.FindForm());
+
+                if (result == DialogResult.OK) {
+                    color_panel.Style.BackgroundColor = dlg.Color;
+                    label.Text = $"Selected Color: R={dlg.Color.Red}, G={dlg.Color.Green}, B={dlg.Color.Blue}";
+                }
+            };
+
+            button.Dock = DockStyle.Top;
+            color_panel.Dock = DockStyle.Top;
+            label.Dock = DockStyle.Top;
+
+            Controls.Add (button);
+            Controls.Add (color_panel);
+            Controls.Add (label);
+        }
+    }
+}

samples/ControlGallery/Panels/DateTimePickerPanel.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Modern.Forms;
+
+namespace ControlGallery.Panels
+{
+    public class DateTimePickerPanel : Panel
+    {
+        public DateTimePickerPanel ()
+        {
+            Controls.Add (new Label { Text = "DateTimePicker", Left = 10, Top = 10, Width = 200 });
+            var dtp1 = Controls.Add (new DateTimePicker { Left = 10, Top = 35 , AutoSize = true});
+            dtp1.ValueChanged += (o, e) => Console.WriteLine ($"Value changed: {dtp1.Value}");
+            dtp1.Format = DateTimePickerFormat.Long;
+            Controls.Add (new Label { Text = "Disabled", Left = 10, Top = 70, Width = 200 });
+            var disabled = Controls.Add (new DateTimePicker { Left = 10, Top = 95, Enabled = false });
+            disabled.Value = new DateTime (2024, 6, 15);
+        }
+    }
+}

samples/Explorer/Explore.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>$(_TargetFramework)</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <ApplicationIcon />
     <OutputType>WinExe</OutputType>
     <StartupObject />

samples/Outlaw/Outlaw.csproj

@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <OutputType>WinExe</OutputType>
-    <TargetFramework>$(_TargetFramework)</TargetFramework>
+    <TargetFramework>net10.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>

src/Modern.Forms/ColorBox.cs

@@ -0,0 +1,144 @@
+using System;
+using System.Drawing;
+using Modern.Forms.Renderers;
+
+namespace Modern.Forms
+{
+    /// <summary>
+    /// HSV Saturation/Value selection box.
+    /// </summary>
+    public class ColorBox : Control
+    {
+        private bool isDragging;
+        private float hue;
+        private float saturation = 1f;
+        private float value = 1f;
+
+        public ColorBox ()
+        {
+            SetControlBehavior (ControlBehaviors.Selectable, false);
+            SetControlBehavior (ControlBehaviors.Hoverable);
+            Cursor = Cursors.Cross;
+        }
+
+        public new static ControlStyle DefaultStyle = new ControlStyle (Control.DefaultStyle,
+            style => {
+                style.Border.Width = 1;
+                style.BackgroundColor = Theme.ControlLowColor;
+            });
+
+        public override ControlStyle Style { get; } = new ControlStyle (DefaultStyle);
+
+        protected override Size DefaultSize => new Size (260, 260);
+
+        public float Hue {
+            get => hue;
+            set {
+                float normalized = ColorHelper.NormalizeHue (value);
+                if (Math.Abs (hue - normalized) > float.Epsilon) {
+                    hue = normalized;
+                    Invalidate ();
+                }
+            }
+        }
+
+        public float Saturation {
+            get => saturation;
+            set {
+                float clamped = ColorHelper.Clamp01 (value);
+                if (Math.Abs (saturation - clamped) > float.Epsilon) {
+                    saturation = clamped;
+                    OnColorChanged (EventArgs.Empty);
+                    Invalidate ();
+                }
+            }
+        }
+
+        public float Value {
+            get => this.value;
+            set {
+                float clamped = ColorHelper.Clamp01 (value);
+                if (Math.Abs (this.value - clamped) > float.Epsilon) {
+                    this.value = clamped;
+                    OnColorChanged (EventArgs.Empty);
+                    Invalidate ();
+                }
+            }
+        }
+
+        public event EventHandler? ColorChanged;
+
+        public void SetColorComponents (float hue, float saturation, float value)
+        {
+            this.hue = ColorHelper.NormalizeHue (hue);
+            this.saturation = ColorHelper.Clamp01 (saturation);
+            this.value = ColorHelper.Clamp01 (value);
+
+            Invalidate ();
+        }
+
+        protected virtual void OnColorChanged (EventArgs e)
+            => ColorChanged?.Invoke (this, e);
+
+        protected override void OnMouseDown (MouseEventArgs e)
+        {
+            base.OnMouseDown (e);
+
+            if ((e.Button & MouseButtons.Left) == 0)
+                return;
+
+            isDragging = true;
+            UpdateFromPoint (e.Location);
+        }
+
+        protected override void OnMouseMove (MouseEventArgs e)
+        {
+            base.OnMouseMove (e);
+
+            if (!isDragging)
+                return;
+
+            UpdateFromPoint (e.Location);
+        }
+
+        protected override void OnMouseUp (MouseEventArgs e)
+        {
+            base.OnMouseUp (e);
+            isDragging = false;
+        }
+
+        protected override void OnPaint (PaintEventArgs e)
+        {
+            base.OnPaint (e);
+            RenderManager.Render (this, e);
+        }
+
+        private void UpdateFromPoint (Point location)
+        {
+            var renderer = RenderManager.GetRenderer<ColorBoxRenderer> ();
+            if (renderer is null)
+                return;
+
+            var content = renderer.GetContentBounds (this, null);
+
+            if (content.Width <= 1 || content.Height <= 1)
+                return;
+
+            float s = (location.X - content.Left) / (float)Math.Max (1, content.Width - 1);
+            float v = 1f - ((location.Y - content.Top) / (float)Math.Max (1, content.Height - 1));
+
+            s = ColorHelper.Clamp01 (s);
+            v = ColorHelper.Clamp01 (v);
+
+            bool changed = Math.Abs (saturation - s) > float.Epsilon || Math.Abs (value - v) > float.Epsilon;
+
+            saturation = s;
+            value = v;
+
+            if (changed)
+                OnColorChanged (EventArgs.Empty);
+
+            Invalidate ();
+        }
+    }
+}

src/Modern.Forms/ColorDialog.cs

@@ -0,0 +1,27 @@
+using System.Threading.Tasks;
+using SkiaSharp;
+
+namespace Modern.Forms
+{
+    public class ColorDialog
+    {
+        private SKColor selectedColor = SKColors.White;
+
+        public SKColor Color {
+            get => selectedColor;
+            set => selectedColor = value;
+        }
+
+        public async Task<DialogResult> ShowDialog (Form owner)
+        {
+            var form = new ColorDialogForm (selectedColor);
+
+            var result = await form.ShowDialog (owner);
+
+            if (result == DialogResult.OK)
+                selectedColor = form.SelectedColor;
+
+            return result;
+        }
+    }
+}