Create a template control in avalonia for reusable gauges is not working?

[andrewwong0893]

Hello,

As per the title, I would like to be able to reuse a design multiple times in my application.

So far in WPF, I can get it working by using a UserControl and do some binding magic so that all the gauges are independent of each other.

When reading through the Avalonia documentation, it looks like what I want is a Template Control to create reusable components. I can get the application to build but I don't get a reaction to a change in value.

Anyone has encountered any similar issue?

WPF

public partial class GaugeTemplate : UserControl
{
    public GaugeTemplate()
    {
        GaugeValue = new(0);

        Series =
            GaugeGenerator.BuildSolidGauge(
                new GaugeItem(GaugeValue, series =>
                {
                    series.Fill = new SolidColorPaint(SKColors.DarkBlue);
                    series.InnerRadius = 90;
                    series.DataLabelsSize = 0;
                }),
                new GaugeItem(GaugeItem.Background, series =>
                {
                    series.InnerRadius = 90;
                    series.Fill = new SolidColorPaint(SKColors.DarkGray);
                }));

        InitializeComponent();
    }

    public string Label
    {
        get => (string)GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }

    // Using a DependencyProperty as the backing store for Label.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register(nameof(Label), typeof(string), typeof(GaugeTemplate), new PropertyMetadata(string.Empty));

    public string Unit
    {
        get => (string)GetValue(UnitProperty);
        set => SetValue(UnitProperty, value);
    }

    // Using a DependencyProperty as the backing store for Unit.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty UnitProperty =
        DependencyProperty.Register(nameof(Unit), typeof(string), typeof(GaugeTemplate), new PropertyMetadata(string.Empty));

    public double MaxValue
    {
        get => (double)GetValue(MaxValueProperty);
        set => SetValue(MaxValueProperty, value);
    }

    // Using a DependencyProperty as the backing store for MaxValue.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MaxValueProperty =
        DependencyProperty.Register(nameof(MaxValue), typeof(double), typeof(GaugeTemplate), new PropertyMetadata(1.0, ValueCallBack));

    public double MinValue
    {
        get => (double)GetValue(MinValueProperty);
        set => SetValue(MinValueProperty, value);
    }

    // Using a DependencyProperty as the backing store for MinValue.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MinValueProperty =
        DependencyProperty.Register(nameof(MinValue), typeof(double), typeof(GaugeTemplate), new PropertyMetadata(0.0, ValueCallBack));

    public double Value
    {
        get => (double)GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ValueProperty =
        DependencyProperty.Register(nameof(Value), typeof(double), typeof(GaugeTemplate), new PropertyMetadata(0.0, ValueCallBack));

    private static void ValueCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var gauge = (GaugeTemplate)d;
        gauge.UpdateValues();
    }

    private void UpdateValues()
    {
        GaugeValue.Value = Math.Clamp(Value, MinValue, MaxValue);
    }


    private IEnumerable<ISeries> Series
    {
        get => (IEnumerable<ISeries>)GetValue(SeriesProperty);
        set => SetValue(SeriesProperty, value);
    }

    // Using a DependencyProperty as the backing store for Series.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty SeriesProperty =
        DependencyProperty.Register(nameof(Series), typeof(IEnumerable<ISeries>), typeof(GaugeTemplate));


    private ObservableValue GaugeValue
    {
        get => (ObservableValue)GetValue(GaugeValueProperty);
        set => SetValue(GaugeValueProperty, value);
    }

    // Using a DependencyProperty as the backing store for GaugeValue.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GaugeValueProperty =
        DependencyProperty.Register(nameof(GaugeValue), typeof(ObservableValue), typeof(GaugeTemplate), new PropertyMetadata(new ObservableValue()));

}

Avalonia

public class GaugeTemplate : TemplatedControl
{
    public GaugeTemplate()
    {
        Series = GaugeGenerator.BuildSolidGauge(
            new GaugeItem(GaugeValue, series =>
            {
                series.Fill = new SolidColorPaint(SKColors.Coral);
                series.InnerRadius = 90;
                series.DataLabelsSize = 0;
            }),
            new GaugeItem(GaugeItem.Background, series =>
            {
                series.InnerRadius = 90;
                series.Fill = new SolidColorPaint(SKColors.DarkGray);
            }));
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        if (change.Property == ValueProperty)
        {
            if (change.NewValue is double newValue)
            {
                GaugeValue.Value = Math.Clamp(Math.Round(newValue), MinValue, MaxValue);
            }
        }

        base.OnPropertyChanged(change);
    }


    /// <summary>
    /// SeriesStyledProperty definition
    /// </summary>
    public static readonly StyledProperty<IEnumerable<ISeries>> SeriesProperty =
        AvaloniaProperty.Register<GaugeTemplate, IEnumerable<ISeries>>(nameof(Series));

    /// <summary>
    /// Gets or sets the Series property. This StyledProperty
    /// indicates ....
    /// </summary>
    public IEnumerable<ISeries> Series
    {
        get => this.GetValue(SeriesProperty);
        set => SetValue(SeriesProperty, value);
    }

    /// <summary>
    /// Label StyledProperty definition
    /// </summary>
    public static readonly StyledProperty<string> LabelProperty =
        AvaloniaProperty.Register<GaugeTemplate, string>(nameof(Label));

    /// <summary>
    /// Gets or sets the Title  property. This StyledProperty
    /// indicates ....
    /// </summary>
    public string Label
    {
        get => this.GetValue(LabelProperty);
        set => SetValue(LabelProperty, value);
    }

    /// <summary>
    /// Value StyledProperty definition
    /// </summary>
    public static readonly StyledProperty<double> ValueProperty =
        AvaloniaProperty.Register<GaugeTemplate, double>(nameof(Value), 0, coerce: (obj, val) => Math.Round(val, 1));

    /// <summary>
    /// Gets or sets the Value property. This StyledProperty
    /// indicates ....
    /// </summary>
    public double Value
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    /// <summary>
    /// Gets or sets the GaugeValue property. This StyledProperty
    /// indicates ....
    /// </summary>
    public ObservableValue GaugeValue { get; } = new ObservableValue(0);

    /// <summary>
    /// Unit StyledProperty definition
    /// </summary>
    public static readonly StyledProperty<string> UnitProperty =
        AvaloniaProperty.Register<GaugeTemplate, string>(nameof(Unit));

    /// <summary>
    /// Gets or sets the Unit  property. This StyledProperty
    /// indicates ....
    /// </summary>
    public string Unit
    {
        get => this.GetValue(UnitProperty);
        set => SetValue(UnitProperty, value);
    }


    /// <summary>
    /// MaxValue StyledProperty definition
    /// </summary>
    public static readonly StyledProperty<int> MaxValueProperty =
        AvaloniaProperty.Register<GaugeTemplate, int>(nameof(MaxValue), 10);

    /// <summary>
    /// Gets or sets the MaxValue property. This StyledProperty 
    /// indicates ....
    /// </summary>
    public int MaxValue
    {
        get => this.GetValue(MaxValueProperty);
        set => SetValue(MaxValueProperty, value);
    }


    /// <summary>
    /// MinValue StyledProperty definition
    /// </summary>
    public static readonly StyledProperty<int> MinValueProperty =
        AvaloniaProperty.Register<GaugeTemplate, int>(nameof(MinValue), 0);

    /// <summary>
    /// Gets or sets the MinValue property. This StyledProperty 
    /// indicates ....
    /// </summary>
    public int MinValue
    {
        get => this.GetValue(MinValueProperty);
        set => SetValue(MinValueProperty, value);
    }
}

[andrewwong0893]

If anyone is curious, I found the answer here in the Avalonia github discussion AvaloniaUI/Avalonia#13246

All you have to do is change the binding of the series from template binding to the normal binding with relative source to template parent.