I want to make usercontrol with Circular Gauge

[I Lee]

I would like to use sfGauge as a UserControl.

The property values are minValue, maxValue, and value.

These values are bound to the ViewModel (mainVM) in MainWindow.

However, when I bind them to the UserControl, they don't change according to the ViewModel's value changes.

If I create them directly in MainWindow, it works fine, but it doesn't work in the UserControl.

What could be the reason for this?

I will upload a sample project as well.

Attachment: TestUC_2d36f59b.zip

[Vishal Omprasad]

Hi I Lee,

Regarding “values bound to the UserControl does not work”:

Based on the provided details we have checked the reported query with the shared sample. Upon analyzing your implementation, we found that the DataContext for the UserControl is being set twice—one within the UserControl itself (this.DataContext = this;) and one in the MainWindow. This breaks the binding chain, causing the UserControl to ignore updates from the ViewModel and instead use default values.

To overcome this scenario, we recommend removing “this.DataContext = this;” from the UserControl’s constructor and let the MainWindow handle the DataContext assignment. Also move the UserControl property to View Model class, as this class set as DataContext.

[C#]:

public class VM : INotifyPropertyChanged

{

    private double _value = 0.0;

    public double Value

    {

        get { return _value; }

        set

        {

            _value = value;

            OnPropertyChanged(nameof(Value));

        }

    }

 

    private double _minValue = -180.0;

    public double MinValue

    {

        get { return _minValue; }

        set

        {

            _minValue = value;

            OnPropertyChanged(nameof(MinValue));

        }

    }

 

    private double _maxValue = 180.0;

    public double MaxValue

    {

        get { return _maxValue; }

        set

        {

            _maxValue = value;

            OnPropertyChanged(nameof(MaxValue));

        }

    }

 

    // Event

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)

    {

        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    }

}

[XAML]:

<local:UC_Gauge Grid.Row="2"

                Grid.Column="0"

                MinValue="{Binding MinValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"

                MaxValue="{Binding MaxValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"

                Value="{Binding Value, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />

With this approach, the UserControl will correctly bind to the ViewModel properties and update as expected.

We have modified the provided sample with the above suggested approach and attached it below (along with the output video) for your reference. Please check the sample and let us know whether this meets your requirement.

We hope that this helps you. Please let us know if you need further assistance.

Regards,
Vishal O.

Attachment: TestUC_528dd451.zip