Marker pointer drag event not working

Hello,

I am using a circular gauge in which i have displayed a marker that has EnableDragging set to True and i have bound the Value property within my context.
I have also added a header to the gauge and the Text property has been bound to the same value as the marker(as a string property). Moving the marker does not change the value in the bound context. Any help will be appreciated.


<gauge:SfCircularGauge Margin="20">
            <gauge:SfCircularGauge.BindingContext>
                <local:HomeView/>
            </gauge:SfCircularGauge.BindingContext>
            <gauge:SfCircularGauge.Scales>
                <gauge:Scale StartAngle="150" SweepAngle="240"
                             StartValue="{Binding MinTemp}" EndValue="{Binding MaxTemp}" Interval="5"
                             ShowRim="True" RimThickness="40"
                             ShowLabels="False" ShowTicks="False"
                             RadiusFactor="1">

                    <gauge:Scale.Ranges>
                        <gauge:Range StartValue="{Binding MinTemp}" EndValue="{Binding SetPoint}" Thickness="40" Offset="1">
                            <gauge:Range.GradientStops>
                                <gauge:GaugeGradientStop Value="5" Color="#57E4FA"/>
                                <gauge:GaugeGradientStop Value="14" Color="#FADC57"/>
                                <gauge:GaugeGradientStop Value="32" Color="#FA6A57"/>
                            </gauge:Range.GradientStops>
                        </gauge:Range>
                    </gauge:Scale.Ranges>
                    
                    <gauge:Scale.Pointers>
                        <!--<gauge:RangePointer Value="25" Thickness="40"/>-->
                        <gauge:MarkerPointer Value="{Binding SetPoint}" MarkerShape="Circle" MarkerHeight="40" MarkerWidth="40" Color="{StaticResource PantoneCoolGray}"
                                             EnableDragging="True"/>
                    </gauge:Scale.Pointers>
                    
                </gauge:Scale>
            </gauge:SfCircularGauge.Scales>

            <gauge:SfCircularGauge.Headers>
                <gauge:Header Text="{Binding Text}" ForegroundColor="Black" TextSize="28"/>
            </gauge:SfCircularGauge.Headers>
            
        </gauge:SfCircularGauge>


The view model is the following:

class HomeView : INotifyPropertyChanged
    {
        private float currentTemp;
        private float setPoint = 25;
        private float minTemp = 5;
        private float maxTemp = 32;
        private float step = 0.5f;
        private string test_string = "25";

        public float CurrentTemp
        {
            get
            {
                return currentTemp;
            }
            set
            {
                if (currentTemp != value)
                {
                    currentTemp = value;
                    OnPropertyChanged();
                }
            }
        }

        public float SetPoint
        {
            get
            {
                return setPoint;
            }
            set
            {
                   setPoint = value;
                Text = SetPoint.ToString();
                   OnPropertyChanged();
            }
        }

        public string Text
        {
            get
            {
                return test_string;
            }
            set
            {
                test_string = value;
                OnPropertyChanged();
            }
        }

        public float MinTemp
        {
            get
            {
                return minTemp;
            }
            set
            {
                if (minTemp != value)
                {
                    minTemp = value;
                    OnPropertyChanged();
                }
            }
        }

        public float MaxTemp
        {
            get
            {
                return maxTemp;
            }
            set
            {
                if (maxTemp != value)
                {
                    maxTemp = value;
                    OnPropertyChanged();
                }
            }
        }

  
        public HomeView() 
        {

        }
        public event PropertyChangedEventHandler PropertyChanged;
      
        void OnPropertyChanged([CallerMemberName] string name = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

3 Replies 1 reply marked as answer

SS Sridevi Sivakumar Syncfusion Team July 13, 2020 10:48 AM UTC

Hi Erol Omer, 
 
Greetings from Syncfusion. 
  
We have checked the provided code snippet and it will be resolved by keeping two way binding of Value property as shown in below 
  
Code snippet: 
   ..
       <gauge:MarkerPointer Value="{Binding SetPoint,Mode=TwoWay}" MarkerShape="Circle" MarkerHeight="40" MarkerWidth="40" Color="Red"   EnableDragging="True"/>
 
.. 

Find the modified sample link: 
 
Screenshot: 
 
  
Regards, 
Sridevi S. 


Marked as answer

EO Erol Omer July 15, 2020 10:38 AM UTC

Thank you for your reply, it works well now. But now i have another question: is there any way to make the marker change the value in steps? 


SS Sridevi Sivakumar Syncfusion Team July 16, 2020 05:07 PM UTC

Hi Erol Omer, 
 
Thanks for your update. 
 
Could you please update us with more details about your requirement that whether your requirement is similar that of  let us know more details updating the marker and range value with some more step value. 
 
Regards, 
Sridevi S. 
 


Loader.
Up arrow icon