Implement BindableProperties to MAUI AdvancedSlider too

Author: enisn

src/InputKit.Maui/Shared/Controls/AdvancedSlider.cs

@@ -1,14 +1,9 @@
 using InputKit.Shared.Abstraction;
 using InputKit.Shared.Configuration;
-using Microsoft.Maui;
-using Microsoft.Maui.Controls;
-using Microsoft.Maui.Graphics;
-using System;
-using System.Diagnostics;
 
 namespace InputKit.Shared.Controls;
 
-public partial class AdvancedSlider : StackLayout, IValidatable
+public class AdvancedSlider : StackLayout, IValidatable
 {
     public static GlobalSetting GlobalSetting { get; private set; } = new GlobalSetting
     {
@@ -22,15 +17,7 @@ public partial class AdvancedSlider : StackLayout, IValidatable
     Label lblValue = new Label { FontSize = GlobalSetting.FontSize, FontFamily = GlobalSetting.FontFamily, InputTransparent = true, TextColor = GlobalSetting.TextColor, };
     Label lblMinValue = new Label { FontSize = GlobalSetting.FontSize, FontFamily = GlobalSetting.FontFamily, TextColor = GlobalSetting.TextColor, };
     Label lblMaxValue = new Label { FontSize = GlobalSetting.FontSize, FontFamily = GlobalSetting.FontFamily, TextColor = GlobalSetting.TextColor, };
-
-    private string _valueSuffix;
-    private string _valuePrefix;
     private Color _textColor;
-    private double _stepValue = 1;
-    private string _minValuePrefix;
-    private string _maxValuePrefix;
-    private string _minValueSuffix;
-    private string _maxValueSuffix;
 
     public AdvancedSlider()
     {
@@ -56,6 +43,11 @@ public AdvancedSlider()
         });
 
         slider.ValueChanged += Slider_ValueChanged;
+
+        lblValue.SizeChanged += (s, e) =>
+        {
+            UpdateView();
+        };
     }
 
     private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
@@ -72,14 +64,6 @@ private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
         UpdateView();
     }
 
-    protected override void OnSizeAllocated(double width, double height)
-    {
-        base.OnSizeAllocated(width, height);
-        UpdateValueText();
-        UpdateView();
-        UpdateMinMaxValueText();
-    }
-
     /// <summary>
     /// Value of slider which user selected
     /// </summary>
@@ -88,62 +72,58 @@ protected override void OnSizeAllocated(double width, double height)
     /// <summary>
     /// Title of slider, It'll be shown tp of slider
     /// </summary>
-    public string Title { get => lblTitle.Text; set { lblTitle.Text = value; lblTitle.IsVisible = !string.IsNullOrEmpty(value); } }
+    public string Title { get => (string)GetValue(TitleProperty); set => SetValue(TitleProperty, value); }
 
     /// <summary>
     /// It will be displayed start of value 
     /// </summary>
-    public string ValueSuffix { get => _valueSuffix; set { _valueSuffix = value; UpdateValueText(); } }
+    public string ValueSuffix { get => (string)GetValue(ValueSuffixProperty); set => SetValue(ValueSuffixProperty, value); }
 
     /// <summary>
     /// It'll be displayed end of value
     /// </summary>
-    public string ValuePrefix { get => _valuePrefix; set { _valuePrefix = value; UpdateValueText(); } }
+    public string ValuePrefix { get => (string)GetValue(ValuePrefixProperty); set => SetValue(ValuePrefixProperty, value); }
 
     /// <summary>
     /// This will be displayed start of MinValue Text if <see cref="DisplayMinMaxValue"/> is true/>
     /// </summary>
-    public string MinValuePrefix { get => _minValuePrefix; set { _minValuePrefix = value; UpdateMinMaxValueText(); } }
+    public string MinValuePrefix { get => (string)GetValue(MinValuePrefixProperty); set => SetValue(MinValuePrefixProperty, value); }
 
     /// <summary>
     /// This will be displayed start of MaxValue Text if <see cref="DisplayMinMaxValue"/> is true/>
     /// </summary>
-    public string MaxValuePrefix { get => _maxValuePrefix; set { _maxValuePrefix = value; UpdateMinMaxValueText(); } }
+    public string MaxValuePrefix { get => (string)GetValue(MaxValuePrefixProperty); set => SetValue(MaxValuePrefixProperty, value); }
 
     /// <summary>
     /// This will be displayed end of MinValue Text if <see cref="DisplayMinMaxValue"/> is true/>
     /// </summary>
-    public string MinValueSuffix { get => _minValueSuffix; set { _minValueSuffix = value; UpdateMinMaxValueText(); } }
+    public string MinValueSuffix { get => (string)GetValue(MinValueSuffixProperty); set => SetValue(MinValueSuffixProperty, value); }
 
     /// <summary>
     /// This will be displayed end of MaxValue Text if <see cref="DisplayMinMaxValue"/> is"true/>
     /// </summary>
-    public string MaxValueSuffix { get => _maxValueSuffix; set { _maxValueSuffix = value; UpdateMinMaxValueText(); } }
+    public string MaxValueSuffix { get => (string)GetValue(MaxValueSuffixProperty); set => SetValue(MaxValueSuffixProperty, value); }
 
     /// <summary>
     /// Minimum value, user can slide
     /// </summary>
-    public double MinValue { get => slider.Minimum; set { slider.Minimum = value; UpdateMinMaxValueText(); } }
+    public double MinValue { get => (double)GetValue(MinValueProperty); set => SetValue(MinValueProperty, value); }
 
     /// <summary>
     /// Maximum value, user can slide
     /// </summary>
-    public double MaxValue { get => slider.Maximum; set { slider.Maximum = value; UpdateMinMaxValueText(); } }
+    public double MaxValue { get => (double)GetValue(MaxValueProperty); set => SetValue(MaxValueProperty, value); }
 
     /// <summary>
     /// Slider Increase number
     /// </summary>
-    public double StepValue { get => _stepValue; set { _stepValue = value; UpdateValueText(); UpdateView(); } }
+    public double StepValue { get => (double)GetValue(StepValueProperty); set => SetValue(StepValueProperty, value); }
 
     /// <summary>
     /// Visibility of Min value and Max value at right and left
     /// </summary>
-    public bool DisplayMinMaxValue
-    {
-        get => lblMinValue.IsVisible && lblMaxValue.IsVisible;
+    public bool DisplayMinMaxValue { get => (bool)GetValue(DisplayMinMaxValueProperty); set => SetValue(DisplayMinMaxValueProperty, value); }
 
-        set { lblMaxValue.IsVisible = value; lblMinValue.IsVisible = value; }
-    }
 
     /// <summary>
     /// Text color of labels
@@ -163,7 +143,7 @@ public Color TextColor
     /// <summary>
     /// This is not available for this control
     /// </summary>
-    public bool IsRequired { get; set; }
+    public bool IsRequired { get => (bool)GetValue(IsRequiredProperty); set => SetValue(IsRequiredProperty, value); }
 
     /// <summary>
     /// this always true, because this control value can not be null
@@ -178,6 +158,19 @@ public Color TextColor
     #region BindableProperties
     public static readonly BindableProperty ValueProperty = BindableProperty.Create(nameof(Value), typeof(double), typeof(AdvancedSlider), 0.0, BindingMode.TwoWay, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).slider.Value = (double)nv);
     public static readonly BindableProperty TextColorProperty = BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(AdvancedSlider), Colors.Gray, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).TextColor = (Color)nv);
+    public static readonly BindableProperty StepValueProperty = BindableProperty.Create(nameof(StepValue), typeof(double), typeof(AdvancedSlider), 1d, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).OnStepValueChanged((double)ov, (double)nv));
+    public static readonly BindableProperty IsRequiredProperty = BindableProperty.Create(nameof(IsRequired), typeof(bool), typeof(AdvancedSlider), false);
+    public static readonly BindableProperty DisplayMinMaxValueProperty = BindableProperty.Create(nameof(StepValue), typeof(bool), typeof(AdvancedSlider), false, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).OnDisplayMinMaxValueChanged((bool)nv));
+    public static readonly BindableProperty MaxValueProperty = BindableProperty.Create(nameof(MaxValue), typeof(double), typeof(AdvancedSlider), 1d, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).OnMaxValueChanged((double)nv));
+    public static readonly BindableProperty MinValueProperty = BindableProperty.Create(nameof(MinValue), typeof(double), typeof(AdvancedSlider), 0d, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).OnMinValueChanged((double)nv));
+    public static readonly BindableProperty MaxValueSuffixProperty = BindableProperty.Create(nameof(MaxValueSuffix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateMinMaxValueText());
+    public static readonly BindableProperty MinValueSuffixProperty = BindableProperty.Create(nameof(MinValueSuffix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateMinMaxValueText());
+    public static readonly BindableProperty MaxValuePrefixProperty = BindableProperty.Create(nameof(MaxValuePrefix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateMinMaxValueText());
+    public static readonly BindableProperty MinValuePrefixProperty = BindableProperty.Create(nameof(MinValuePrefix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateMinMaxValueText());
+    public static readonly BindableProperty ValuePrefixProperty = BindableProperty.Create(nameof(ValuePrefix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateValueText());
+    public static readonly BindableProperty ValueSuffixProperty = BindableProperty.Create(nameof(ValueSuffix), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).UpdateValueText());
+    public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(AdvancedSlider), string.Empty, propertyChanged: (bo, ov, nv) => (bo as AdvancedSlider).OnTitleChanged((string)nv));
+
     #endregion
 
     /// <summary>
@@ -189,21 +182,23 @@ public Color TextColor
     /// It's not available for this control
     /// </summary>
     public void DisplayValidation() { }
-    void UpdateMinMaxValueText()
+
+    protected void UpdateMinMaxValueText()
     {
         lblMinValue.Text = $"{MinValuePrefix}{MinValue}{MinValueSuffix}";
         lblMaxValue.Text = $"{MaxValuePrefix}{MaxValue}{MaxValueSuffix}";
     }
-    void UpdateValueText()
+
+    protected void UpdateValueText()
     {
         lblValue.Text = $"{ValuePrefix} {Value} {ValueSuffix}";
     }
-    void UpdateView()
+
+    protected void UpdateView()
     {
         var totalLength = MaxValue - MinValue;
         var normalizedValue = Value - MinValue;
 
-
         // TODO: Keep animation disabled until resolution of https://github.com/dotnet/maui/issues/3353
 
         lblValue.TranslationX = normalizedValue * ((slider.Width - 30) / totalLength);
@@ -215,4 +210,40 @@ void UpdateView()
         //    40 //Latency
         //    );
     }
+
+    protected virtual void OnStepValueChanged(double oldValue, double newValue)
+    {
+        UpdateValueText();
+        UpdateView();
+    }
+
+    protected virtual void OnDisplayMinMaxValueChanged(bool newValue)
+    {
+        lblMaxValue.IsVisible = newValue;
+        lblMinValue.IsVisible = newValue;
+    }
+
+    protected virtual void OnMaxValueChanged(double newValue)
+    {
+        slider.Maximum = newValue;
+        UpdateMinMaxValueText();
+    }
+    protected virtual void OnMinValueChanged(double newValue)
+    {
+        slider.Minimum = newValue;
+        UpdateMinMaxValueText();
+    }
+
+    protected virtual void OnTitleChanged(string newValue)
+    {
+        lblTitle.Text = newValue;
+        lblTitle.IsVisible = !string.IsNullOrEmpty(newValue);
+    }
+
+    protected override void OnSizeAllocated(double width, double height)
+    {
+        base.OnSizeAllocated(width, height);
+        UpdateValueText();
+        UpdateMinMaxValueText();
+    }
 }