Label is blinking on RadVerticalLinearGauge , if ShowLastLabel set to false

1 Answer 22 Views
Gauges
Dmitry
Top achievements
Rank 1
Dmitry asked on 09 Aug 2022, 06:16 AM | edited on 09 Aug 2022, 06:16 AM

Hello, 

I need to create a scale, showing the Major tick at the beginning/at the end of the scale.

In order to do this, I've set ShowLastLabel to false. The data on the scale changes every 200 m/s.  The last label sometimes blinks, even though the property ShowLastLabel is set to false.

If I change EndTickOffset, instead of changing ShowLastLabel, then I do not see the Major tick at the end of the scale.

See the attached example.

 <telerik:RadVerticalLinearGauge 
             FontSize="16"
             Background="Green"
             HorizontalAlignment="Left"
             Width="3"
             Margin="30,94,0,95"
            >
            <telerik:VerticalLinearScale
                    Max="{Binding Max,FallbackValue=20}"
                    Min="{Binding Min,FallbackValue=0}"
                    Background="Green"
                    LabelLocation="Inside"
                    FontSize="16"
                    StartTickOffset="{Binding TickOffset,FallbackValue=0}"
                    EndTickOffset="{Binding TickOffset,FallbackValue=0}"
                 ShowFirstLabel="False"
                    ShowLastLabel="False"
                    MajorTickStep="10"
                    IsInteractive="True"
                    MinorTickBackground="Red"
                    MiddleTicks="2"
                    MiddleTickBackground="Green"
                    MiddleTickLocation="Outside"
                    LabelOffset="16"
                    MiddleTickRelativeWidth="5"
                    MiddleTickRelativeHeight="0.015*"
                    MajorTickRelativeWidth="20"
                    MajorTickRelativeHeight="0.015"
                    EndWidth="0.03"
                    StartWidth="0.03"
                    MinorTicks="1"
                    >
            </telerik:VerticalLinearScale>
        </telerik:RadVerticalLinearGauge>

 

Timer timer= new Timer(200);
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            timer.Elapsed += Timer_Elapsed;
            timer.Start();
        }

 

 private void Method(double value)
        {
            Val = value.ToString();
            Min = value - 10;
            Max = value + 10;
            double startValue = Math.Round(Min / 10) * 10;
            TickOffset = startValue - Min;


        }

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 11 Aug 2022, 02:15 PM

Hello Dmitry,

I have examined the provided sample project and in this scenario, it appears that the bound TickOffset property's value is updated too fast and thus this unwanted behavior is present.

To prevent this from occurring, you could place the line of code that updates the TickOffset property in a Dispatcher

The following code snippet shows the modified Method method's implementation:

private void Method(double value)
{
    Val = value.ToString();
    Min = value - 10;
    Max = value + 10;
    double startValue = Math.Round(Min / 10) * 10;

    this.Dispatcher.Invoke(() =>
    {
        TickOffset = startValue - Min;
    });
}

The produced result is as follows:

In conclusion, could you give this suggestion a try?

Regards,
Stenly
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Dmitry
Top achievements
Rank 1
commented on 14 Aug 2022, 07:38 AM

Thanks for the answer, but let's make it harder.
if I add a binding to ShowLastLabel and ShowFirstLabel, then the Label sometimes flickers and shows number one less. 9 instead of 10;  49 instead of 50 and so on

<telerik:VerticalLinearScale
                    Max="{Binding Max,FallbackValue=20}"
                    Min="{Binding Min,FallbackValue=0}"
                    Background="Green"
                    LabelLocation="Inside"
                    FontSize="16"
                    StartTickOffset="{Binding TickOffset,FallbackValue=0}"
                    EndTickOffset="{Binding TickOffset,FallbackValue=0}"
                   ShowFirstLabel="{Binding ShowFirstLabel}"
                    ShowLastLabel="{Binding ShowLastLabel}"
                    MajorTickStep="10"
                    IsInteractive="True"
                    MinorTickBackground="Red"
                    MiddleTicks="2"
                    MiddleTickBackground="Green"
                    MiddleTickLocation="Outside"
                    LabelOffset="16"
                    MiddleTickRelativeWidth="5"
                    MiddleTickRelativeHeight="0.015*"
                    MajorTickRelativeWidth="20"
                    MajorTickRelativeHeight="0.015"
                    EndWidth="0.03"
                    StartWidth="0.03"
                    MinorTicks="1"
                    >

 

 

   private void Method(double value)
        {
            Val = value.ToString();
            Min = value - 10;
            Max = value + 10;
            double startValue = Math.Round(Min / 10) * 10;
            Dispatcher.Invoke(() =>
            {
                TickOffset = startValue - Min;
                ShowFirstLabel = startValue >= Min;
                var lastValue = startValue + 20;
                ShowLastLabel = lastValue <= Max;
            });
        }
Stenly
Telerik team
commented on 17 Aug 2022, 09:51 AM

Would it be possible to provide a video or gif, which shows the unwanted result? This is because I was not able to observe the flickering label and the wrong value in the second sample project.
Dmitry
Top achievements
Rank 1
commented on 17 Aug 2022, 10:39 AM

I set the timer to 500 instead 200, to show the flickering better. You can see in the scale, that sometimes  20 changing to 19 , and 30 to 29, 40 to 39

Stenly
Telerik team
commented on 22 Aug 2022, 08:16 AM

I was able to reproduce the result from the provided gif.

To prevent this behavior from occurring, place the whole logic from the Method method inside the Dispatcher. The following code snippet shows this suggestion's implementation:

private void Method(double value)
{
    Dispatcher.Invoke(() =>
    {
        Val = value.ToString();
        Min = value - 10;
        Max = value + 10;
        double startValue = Math.Round(Min / 10) * 10;
        TickOffset = startValue - Min;
        ShowFirstLabel = startValue >= Min;
        var lastValue = startValue + 20;
        ShowLastLabel = lastValue <= Max;

    });
}

The produced result is as follows:

Would it be possible to try this suggestion out and let me know how it goes?

Tags
Gauges
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Stenly
Telerik team
Share this question
or