Revamp CircularGauge visuals and properties

Updated default values for angles, colors, and pointer cap radius in CircularGauge. Added ScaleRadius and ScaleLabelRadius properties for improved layout control. Refactored scale drawing logic for fixed center and consistent tick/label placement. Overhauled CircularGauge.axaml template for a more modern, visually rich gauge appearance, including metallic frame, glass overlay, and improved pointer rendering.

Author: ChrisPulman

src/CrissCross.Avalonia.UI/Controls/Gauges/CircularGauge.cs

@@ -43,13 +43,13 @@ public class CircularGauge : TemplatedControl
     /// Property for <see cref="ScaleStartAngle"/>.
     /// </summary>
     public static readonly StyledProperty<double> ScaleStartAngleProperty =
-        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleStartAngle), 135.0);
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleStartAngle), 120.0);
 
     /// <summary>
     /// Property for <see cref="ScaleSweepAngle"/>.
     /// </summary>
     public static readonly StyledProperty<double> ScaleSweepAngleProperty =
-        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleSweepAngle), 270.0);
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleSweepAngle), 300.0);
 
     /// <summary>
     /// Property for <see cref="MajorDivisionsCount"/>.
@@ -73,7 +73,7 @@ public class CircularGauge : TemplatedControl
     /// Property for <see cref="PointerCapRadius"/>.
     /// </summary>
     public static readonly StyledProperty<double> PointerCapRadiusProperty =
-        AvaloniaProperty.Register<CircularGauge, double>(nameof(PointerCapRadius), 10.0);
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(PointerCapRadius), 16.0);
 
     /// <summary>
     /// Property for <see cref="PointerColor"/>.
@@ -85,25 +85,25 @@ public class CircularGauge : TemplatedControl
     /// Property for <see cref="ScaleColor"/>.
     /// </summary>
     public static readonly StyledProperty<IBrush> ScaleColorProperty =
-        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(ScaleColor), Brushes.Gray);
+        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(ScaleColor), Brushes.White);
 
     /// <summary>
     /// Property for <see cref="OptimalRangeColor"/>.
     /// </summary>
     public static readonly StyledProperty<IBrush> OptimalRangeColorProperty =
-        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(OptimalRangeColor), Brushes.Green);
+        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(OptimalRangeColor), Brushes.Transparent);
 
     /// <summary>
     /// Property for <see cref="BelowOptimalRangeColor"/>.
     /// </summary>
     public static readonly StyledProperty<IBrush> BelowOptimalRangeColorProperty =
-        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(BelowOptimalRangeColor), Brushes.Yellow);
+        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(BelowOptimalRangeColor), Brushes.Transparent);
 
     /// <summary>
     /// Property for <see cref="AboveOptimalRangeColor"/>.
     /// </summary>
     public static readonly StyledProperty<IBrush> AboveOptimalRangeColorProperty =
-        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(AboveOptimalRangeColor), Brushes.Red);
+        AvaloniaProperty.Register<CircularGauge, IBrush>(nameof(AboveOptimalRangeColor), Brushes.Transparent);
 
     /// <summary>
     /// Property for <see cref="OptimalRangeStartValue"/>.
@@ -145,9 +145,22 @@ public class CircularGauge : TemplatedControl
     /// Property for <see cref="PointerAngle"/>.
     /// </summary>
     public static readonly StyledProperty<double> PointerAngleProperty =
-        AvaloniaProperty.Register<CircularGauge, double>(nameof(PointerAngle), 135.0);
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(PointerAngle), 120.0);
+
+    /// <summary>
+    /// Property for <see cref="ScaleRadius"/>.
+    /// </summary>
+    public static readonly StyledProperty<double> ScaleRadiusProperty =
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleRadius), 75.0);
+
+    /// <summary>
+    /// Property for <see cref="ScaleLabelRadius"/>.
+    /// </summary>
+    public static readonly StyledProperty<double> ScaleLabelRadiusProperty =
+        AvaloniaProperty.Register<CircularGauge, double>(nameof(ScaleLabelRadius), 60.0);
 
     private Canvas? _scaleCanvas;
+    private double _oldValueAngle;
 
     static CircularGauge()
     {
@@ -158,8 +171,9 @@ static CircularGauge()
         MinorDivisionsCountProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
         ScaleStartAngleProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
         ScaleSweepAngleProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
-        RadiusProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
-        BoundsProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
+        ScaleRadiusProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
+        ScaleLabelRadiusProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
+        ScaleColorProperty.Changed.AddClassHandler<CircularGauge>((x, _) => x.RedrawScale());
     }
 
     /// <summary>
@@ -360,6 +374,24 @@ public double PointerAngle
         set => SetValue(PointerAngleProperty, value);
     }
 
+    /// <summary>
+    /// Gets or sets the scale radius.
+    /// </summary>
+    public double ScaleRadius
+    {
+        get => GetValue(ScaleRadiusProperty);
+        set => SetValue(ScaleRadiusProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the scale label radius.
+    /// </summary>
+    public double ScaleLabelRadius
+    {
+        get => GetValue(ScaleLabelRadiusProperty);
+        set => SetValue(ScaleLabelRadiusProperty, value);
+    }
+
     /// <inheritdoc/>
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
@@ -383,10 +415,9 @@ private void UpdatePointerAngle()
         }
 
         var normalizedValue = (clampedValue - MinValue) / range;
+        var newAngle = ScaleStartAngle + (normalizedValue * ScaleSweepAngle);
 
-        // Subtract 90 to convert from standard math angles (0=right) to screen angles (0=up)
-        var newAngle = ScaleStartAngle + (normalizedValue * ScaleSweepAngle) - 90;
-
+        _oldValueAngle = PointerAngle;
         PointerAngle = newAngle;
     }
 
@@ -398,36 +429,34 @@ private void RedrawScale()
 
     private void DrawScale()
     {
-        if (_scaleCanvas == null || Bounds.Width == 0 || Bounds.Height == 0)
+        if (_scaleCanvas == null)
         {
             return;
         }
 
         _scaleCanvas.Children.Clear();
 
-        // Use the actual bounds of the control for centering
-        var centerX = Bounds.Width / 2;
-        var centerY = Bounds.Height / 2;
-        var actualRadius = Math.Min(centerX, centerY) - 10; // Leave margin for labels
-
-        var scaleRadius = actualRadius * 0.85;
-        var majorTickLength = actualRadius * 0.12;
-        var minorTickLength = actualRadius * 0.06;
+        // Fixed center for the 200x200 canvas in the Viewbox
+        const double centerX = 100;
+        const double centerY = 100;
 
         var majorTickUnitAngle = ScaleSweepAngle / MajorDivisionsCount;
         var majorTicksUnitValue = (MaxValue - MinValue) / MajorDivisionsCount;
 
+        var majorTickLength = 10.0;
+        var minorTickLength = 5.0;
+
         // Draw major and minor ticks
         for (var i = 0; i <= MajorDivisionsCount; i++)
         {
             var angle = ScaleStartAngle + (i * majorTickUnitAngle);
             var angleRadian = angle * Math.PI / 180;
 
-            // Major tick
-            var startX = centerX + (scaleRadius * Math.Cos(angleRadian));
-            var startY = centerY + (scaleRadius * Math.Sin(angleRadian));
-            var endX = centerX + ((scaleRadius - majorTickLength) * Math.Cos(angleRadian));
-            var endY = centerY + ((scaleRadius - majorTickLength) * Math.Sin(angleRadian));
+            // Major tick - drawn as rotated rectangle centered at the tick position
+            var startX = centerX + (ScaleRadius * Math.Cos(angleRadian));
+            var startY = centerY + (ScaleRadius * Math.Sin(angleRadian));
+            var endX = centerX + ((ScaleRadius - majorTickLength) * Math.Cos(angleRadian));
+            var endY = centerY + ((ScaleRadius - majorTickLength) * Math.Sin(angleRadian));
 
             var majorTick = new Line
             {
@@ -439,16 +468,17 @@ private void DrawScale()
             _scaleCanvas.Children.Add(majorTick);
 
             // Scale label
-            var labelRadius = scaleRadius - majorTickLength - 12;
+            var labelRadius = ScaleLabelRadius;
             var labelX = centerX + (labelRadius * Math.Cos(angleRadian));
             var labelY = centerY + (labelRadius * Math.Sin(angleRadian));
 
             var labelValue = MinValue + (i * majorTicksUnitValue);
             var label = new TextBlock
             {
                 Text = labelValue.ToString($"F{Decimals}"),
-                FontSize = 9,
+                FontSize = 10,
                 Foreground = ScaleColor,
+                TextAlignment = TextAlignment.Center,
             };
 
             // Offset label to center it on the position
@@ -465,10 +495,10 @@ private void DrawScale()
                     var minorAngle = angle + (j * minorTickUnitAngle);
                     var minorAngleRadian = minorAngle * Math.PI / 180;
 
-                    var minorStartX = centerX + (scaleRadius * Math.Cos(minorAngleRadian));
-                    var minorStartY = centerY + (scaleRadius * Math.Sin(minorAngleRadian));
-                    var minorEndX = centerX + ((scaleRadius - minorTickLength) * Math.Cos(minorAngleRadian));
-                    var minorEndY = centerY + ((scaleRadius - minorTickLength) * Math.Sin(minorAngleRadian));
+                    var minorStartX = centerX + (ScaleRadius * Math.Cos(minorAngleRadian));
+                    var minorStartY = centerY + (ScaleRadius * Math.Sin(minorAngleRadian));
+                    var minorEndX = centerX + ((ScaleRadius - minorTickLength) * Math.Cos(minorAngleRadian));
+                    var minorEndY = centerY + ((ScaleRadius - minorTickLength) * Math.Sin(minorAngleRadian));
 
                     var minorTick = new Line
                     {