Display a TimeSpan value in a RadGauge

[Frustrated Dev]

Hello,

I want to display a TimeSpan within a RadGauge. My thoughts were that I should use a NumericScale. However, I cannot seem to get it to work. I want to make a TimeSpan look like a digital clock in the form of hh:mm:ss.

Is there a way to do this with the RadGauge? If so, is there some sample code that demonstrates this?

Basically, I am looking to create something that looks like the clock in the Time Monitoring Tool found in the demos here: http://demos.telerik.com/wpf/

[Andrey]

Hi,

Yes, it is possible to represent TimeSpan with numeric indicator. You have to use 5 indicators in this case: one for every hour, minutes and seconds, and 2 for ':' character. Here is an example:

<Grid Width="300" Height="300">
    <telerik:RadGauge>
        <telerik:LinearGauge>
            <telerik:NumericScale>
                <telerik:NumericScale.Indicators>
                    <telerik:NumericIndicator Name="hours"
                          Left="0.22"
                          Top="0.63"
                          RelativeHeight="0.10"
                          RelativeWidth="0.12"
                          Format="{}{0:00}"
                          Value="23">
                        <telerik:NumberPosition />
                        <telerik:NumberPosition />
                    </telerik:NumericIndicator>
                    <telerik:NumericIndicator Left="0.35"
                          Top="0.63"
                          RelativeHeight="0.10"
                          RelativeWidth="0.06"
                          Format=":"
                          Value="0">
                        <telerik:NumberPosition />
                    </telerik:NumericIndicator>
                    <telerik:NumericIndicator Name="minutes"
                          Left="0.42"
                          Top="0.63"
                          RelativeHeight="0.10"
                          RelativeWidth="0.12"
                          Format="{}{0:00}"
                          Value="59">
                        <telerik:NumberPosition />
                        <telerik:NumberPosition />
                    </telerik:NumericIndicator>
                    <telerik:NumericIndicator Left="0.55"
                          Top="0.63"
                          RelativeHeight="0.10"
                          RelativeWidth="0.06"
                          Format=":"
                          Value="0">
                        <telerik:NumberPosition />
                    </telerik:NumericIndicator>
                    <telerik:NumericIndicator Name="seconds"
                          Left="0.62"
                          Top="0.63"
                          RelativeHeight="0.10"
                          RelativeWidth="0.12"
                          Format="{}{0:00}"
                          Value="59">
                        <telerik:NumberPosition />
                        <telerik:NumberPosition />
                    </telerik:NumericIndicator>
                </telerik:NumericScale.Indicators>
            </telerik:NumericScale>
        </telerik:LinearGauge>
    </telerik:RadGauge>
</Grid>

Then you can set value to the specific indicators in your code:

TimeSpan span = TimeSpan.FromHours(12.12345);

hours.Value = span.Hours;
minutes.Value = span.Minutes;
seconds.Value = span.Seconds;

All the best,
Andrey Murzov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Frustrated Dev]

Thank you for your help!