# Creating a compass

8 posts, 1 answers
1. ##### Eric
2 posts
Member since:
Mar 2009

Posted 24 Mar 2009 Link to this post

I'd like to create a 360-degree gauge representing a compass, and I'd like the needle to be animated. When the needle goes from, say, North-West (315) to North-East (45), I'd like it to go the shortest way, through North (0). Similarly, when it goes from SW to SE, it should go through South (180).

Can I achieve this with your gauge?

Eric.
##### Andrey
1681 posts

Posted 25 Mar 2009 Link to this post

Hi Eric,

The compass-like radial gauge can be created using following XAML:


Unfortunately you canâ€™t switch build-in indicatorâ€™s animation to go the shortest way. It always walk from current to the next value through the values in the [current, next] interval. But you can create your own animation routines which will work as youâ€™d like. You need check if the sweep angle between current and next value is more than 180 degree and then operate depends on the test result:

1. If distance is less than 180 degree â€“ create 1 double animation which will change value of the needle from current to next value.
2. If distance is more than 180 degree â€“ create 2 double animations. One from current value to 0 or 360 depends on direction of change. And second from 0 or 260 to the next value.

Following code represents how it can be done:

 ///  /// Indicates whether the 2 animations should be used ///  private bool doubleAnimation = false; ///  /// From value for second animation ///  private double secondFromValue; ///  /// To value for second animation ///  private double secondToValue; private void SetNewValueToIndicator(double newValue) { CreateAndRunAnimation(needle.Value, newValue); } private Storyboard CreateAnimation(double fromValue, double toValue, Duration duration) { // Create DoubleAnimations and set their properties. DoubleAnimation needleValueAnimation = new DoubleAnimation(); needleValueAnimation.Duration = duration; Storyboard storyboard = new Storyboard(); storyboard.Children.Add(needleValueAnimation); Storyboard.SetTarget(needleValueAnimation, needle); Storyboard.SetTargetProperty(needleValueAnimation, new PropertyPath("(Needle.Value)")); needleValueAnimation.From = (double.IsNaN(fromValue) ? 0 : fromValue); needleValueAnimation.To = toValue; return storyboard; } private void CreateAndRunAnimation(double fromValue, double toValue) { Duration duration; double distance = Math.Abs(toValue - fromValue); if (distance > 180) { doubleAnimation = true; if (toValue > 180) { secondFromValue = 360; secondToValue = toValue; toValue = 0; } else if (fromValue > 180) { secondFromValue = 0; secondToValue = toValue; toValue = 360; } duration = new Duration(TimeSpan.FromSeconds(0.4)); } else { doubleAnimation = false; duration = new Duration(TimeSpan.FromSeconds(0.8)); } Storyboard storyboard = CreateAnimation(fromValue, toValue, duration); storyboard.Completed += new EventHandler(Storyboard_Completed); storyboard.Begin(); } private void Storyboard_Completed(object sender, EventArgs e) { if (doubleAnimation) { // Create a duration of 1 seconds. Duration duration = new Duration(TimeSpan.FromSeconds(0.4)); Storyboard storyboard = CreateAnimation(secondFromValue, secondToValue, duration); storyboard.Begin(); } }

All the best,
Andrey Murzov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
3. ##### Eric
2 posts
Member since:
Mar 2009

Posted 26 Mar 2009 Link to this post

Many thanks.

Eric
4. ##### Danette Cross
2 posts
Member since:
Nov 2009

Posted 30 Jun 2010 Link to this post

WhatÂ references do we use for the storyboard and doubleanimation? I have using statements for Telerik.Windows.Controls and Telerik.Windows.Controls.Guages but seems I am missing an assembly reference.
5. ##### Andrey
1681 posts

Posted 01 Jul 2010 Link to this post

Hi Danette,

The Storyboard and DoubleAnimation classes are contained in the System.Windows.Media.Animation namespace.

Sincerely yours,
Andrey Murzov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
6. ##### Chris
2 posts
Member since:
Aug 2011

Posted 01 May 2012 Link to this post

Sorry to Hijack the thread but we have just purchased the RadControls and we have a need to create a compas that allows the user to move the needle and subsequently the guage value with the mouse, so they can in essence select a bearing by draging the needle, could anyone provide me with some guidance with the best way to achieve this ??

Many Thanks in advance

7. ##### Andrey
1681 posts

Posted 03 May 2012 Link to this post

Hello Chris,

Simply set the RadialScale.IsInteractive property to true and you will be able to drag the needle and position it by clicking on the scale.

Kind regards,
Andrey Murzov
the Telerik team

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

8. ##### Chris
2 posts
Member since:
Aug 2011

Posted 04 May 2012 Link to this post

Many Thanks, it worked liked a charm :-)