Question

I’ve implemented an Analog dial in Windows 8 XAML, and it almost works

However, when turning the dial it shakes like crazy. it seems to rotate almost 90 degrees clockwise and anticlockwise while being moved. I’ve implemented it using PointerPressed, PointerReleased and PointerMoved

My Code

private void dial_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    dialPressed = true;    
}

private void dial_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    dialPressed = false;
}

private void dial_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    if(dialPressed)
    {
        Windows.UI.Input.PointerPoint currentLocation = 
              e.GetCurrentPoint(dial); 

        Point dialCenter = 
              new Point(dial.ActualHeight / 2, dial.ActualWidth / 2);

        double radians = Math.Atan(
              (currentLocation.Position.Y - dialCenter.Y) / 
              (currentLocation.Position.X - dialCenter.X));

        RotateTransform r = new RotateTransform();
        r.Angle = radians * 180 / Math.PI;

        if (currentLocation.Position.X - dialCenter.X < 0)
        {
            r.Angle += 180;
        }

        TransformGroup t = new TransformGroup();
        t.Children.Add(r);
        dial.RenderTransform = t;

    }
}

Should I be binding against different events? What’s making my dial shaky?

Answer 1

Ok, I solved my problem.

The code was from a WPF example and a few things are different in windows 8! Here’s what worked for me.

if (dialPressed)
{

  // Get the current mouse position relative to the dial
  // I was doing this relative to the dial that was turning, which is wrong. 
  // The position of the pointer relative to the dial will change as the dial turns!
  // I created a static dial behind it, the same dimensions
  Windows.UI.Input.PointerPoint currentLocation = 
                                e.GetCurrentPoint(this.dial_Static); 

  Point dialCenter = 
        new Point(this.dial.ActualHeight / 2, this.dial.ActualWidth / 2);

  // Calculate an angle
  double radians = Math.Atan((currentLocation.Position.Y - dialCenter.Y) /                           
                             (currentLocation.Position.X - dialCenter.X));

  // in order to get these figures to work, I actually had to *add* 90 degrees to it,     
  // and *subtract* 180 from it if the X coord is negative. 
  double x = (radians * 180 / Math.PI) + 90;
  if ((currentLocation.Position.X - dialCenter.X) < 0)
  {
     x = x - 180;
  }

  RotateTransform r = new RotateTransform();
  r.Angle = x;

  TransformGroup t = new TransformGroup();
  t.Children.Add(r);
  dial.RenderTransform = t;

}

I know this code could be written a lot neater, but I’m trying to keep it as close to the version above to show what’s changed.