Analog clock using RadialGauge

4 posts, 0 answers
  1. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 26 Apr 2012 Link to this post

    Hi there,

    I'm new to the Gauge control, however I'd like to create a simple analog clock using the RadialGauge (RadialGaugeRange).   After numerous tries of tweeking, I just can't seem to get it right.

    Anyone that could provide some XAML to show how that is done?

    Thanks!
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 27 Apr 2012 Link to this post

    Hi Henrik,

    It should be really easy to create an analog clock with our gauges. Here is what you need to do:
    1. Create a RadialGaugeRange with min value 0 and max value 60.
    2. Set the minor tick step to 1 and major step to 5.
    3. Set a label template that consists of a text block. The text block's text should be bound to the data context of the label template and should use a converter which converts a the tick value to an hour value (if it happens to be an hour).
    4. Finally place two ArrowGaugeIndicator instances inside the radial range, one for the minutes and one for the seconds.
    5. Using a DispatcherTimer, update the two arrow indicators every second.

    Please write again if you need further assistance.

    Regards,
    Victor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Henrik Brinch
    Henrik Brinch avatar
    100 posts
    Member since:
    Aug 2004

    Posted 27 Apr 2012 Link to this post

    Hi Victor,

    Yes, but that gives me only a half circle...

    <
    gauges:RadialGaugeRange MinValue="0" MaxValue="60" TickStep="5">

     <gauges:ArrowGaugeIndicator ArrowThickness="8" Value="10"/>

     <gauges:ArrowGaugeIndicator ArrowThickness="8" Value="2"/>

    </gauges:RadialGaugeRange>


    Further more, how do I control so that the value 12 (hours) of the one arrow is at the top and value 6 at the bottom ... and soforth - and value 0 of the other arrow to be at top and 30 at the bottom?

    Thanks.

    - Henrik

  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 27 Apr 2012 Link to this post

    Hi Henrik,

    By default the min angle of the radial range is 0 and the max angle is 180. That is why it is only a half circle initially.
    To get a full circle simply set the MaxAngle property of the range to 450 and min angle to 90 so that the clock starts from the top.

    Please have a look at the attached sample application. It demonstrates how to create a clock. Also please have a look at our online help, it contains very useful information about all properties. Another thing that I think will be of interest to you is the gauges design-time gallery. It allows you to select pre-defined gauges at design-time. This action generates all the xaml for the selected gauge that you can readily use and inspect.

    We are ready to assist you should you have other questions.

    Regards,
    Victor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top