This is a migrated thread and some comments may be shown as answers.

Analog clock using RadialGauge

3 Answers 169 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Henrik Brinch
Top achievements
Rank 2
Henrik Brinch asked on 26 Apr 2012, 03:37 PM
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!

3 Answers, 1 is accepted

Sort by
0
Victor
Telerik team
answered on 27 Apr 2012, 12:56 PM
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 >>

0
Henrik Brinch
Top achievements
Rank 2
answered on 27 Apr 2012, 02:48 PM

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

0
Victor
Telerik team
answered on 27 Apr 2012, 04:13 PM
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 >>

Tags
Gauge
Asked by
Henrik Brinch
Top achievements
Rank 2
Answers by
Victor
Telerik team
Henrik Brinch
Top achievements
Rank 2
Share this question
or