Display a TimeSpan value in a RadGauge

3 posts, 0 answers
  1. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 08 Dec 2008 Link to this post

    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/
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 10 Dec 2008 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 10 Dec 2008 Link to this post

    Thank you for your help!
Back to Top