title: Adapting a Win8 store app tutorial to WPF
body: <p>I'm following <a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=m-EqckhJNvI" rel="nofollow">this tutorial</a> that explains how to create a Dial in Visual Studio with XAML/C#. The problem is that the tutorial is targeted for windows 8 store apps.</p>
  
  <p>Knowing that, I still tried to use this tutorial in a WPF application that will support previous OSs too.</p>
  
  <p>I came across a few compatibility problems:</p>
  
  <ol>
  <li><code>ManipulationMode="All"</code> doesn't exists as the author of the tutorial uses it for me. It only exists as <code>Manipulation.ManipulationMode="All"</code> which gives me an error "Manipulation is not active on the specified element". How could I solve it?</li>
  <li>The author set the <code>ManipulationDelta</code> property on the <code>grid</code> element, which I didn't have problem with at first... Until I realized the author's event/action code-behind created by VS uses <code>ManipulationDeltaRoutedEventArgs e</code> instead of the <code>ManipulationDeltaEventArgs e</code> which is used in my code-behind file. This means I can't use the <code>Position</code> property (<code>e.Position</code>) to get the mouse position on the user control as easily. What could be an alternative to it? I don't think it could be supported as it was declared as Win8 only...</li>
  <li>In an MVVM-style application, the code-behind actions would have been set in the <code>ViewModel</code>. How would I 'bind' that action code to the <code>ManipulationDelta</code> property of an element?</li>
  </ol>
  
  <p>Thanks in advance!</p>
  
  <p>P.S; Both mine and the author's version of VS is 2012 so that's not the problem.</p>
  
  <p>UPDATE:
  Here's the partially-completed code:  </p>
  
  <p>The XAML:</p>
  
  <pre><code>//Manipulation.ManipulationMode="All" =&gt; ERROR 'Manipulation is not active on the specified element'
  &lt;Grid Manipulation.ManipulationMode="All" ManipulationDelta="Grid_ManipulationDelta_1"&gt;
      &lt;Ellipse Fill="#FF7171E6" Margin="30"/&gt;
      &lt;Grid&gt;
          &lt;Grid.RenderTransform&gt;
              &lt;RotateTransform CenterX="225" CenterY="225" Angle="{Binding Angle}"/&gt;
          &lt;/Grid.RenderTransform&gt;
          &lt;Ellipse Fill="White" Height="100" VerticalAlignment="Top" Margin="50" Width="100"/&gt;
  
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The code-behind:</p>
  
  <pre><code>public partial class dial : UserControl, INotifyPropertyChanged
  {
      private int m_Amount;
      public int Amount {...}
  
      private double m_Angle;
      public double Angle {...}
  
      public dial()
      {
          InitializeComponent();
          this.DataContext = this;
      }
  
      private void Grid_ManipulationDelta_1(object sender, ManipulationDeltaEventArgs e)
      {
          this.Angle = GetAngle(e.Position, this.RenderSize); //e.Position doesn't exist in ManipulationDeltaEventArgs...
          this.Amount = (int)(this.Angle / 360 * 100);
      }
  
      public enum Quadrants : int { nw = 2, ne = 1, sw = 4, se = 3 }
      private double GetAngle(Point touchPoint, Size circleSize)
      {
          var _X = touchPoint.X - (circleSize.Width / 2d);
          var _Y = circleSize.Height - touchPoint.Y - (circleSize.Height / 2d);
          var _Hypot = Math.Sqrt(_X * _X + _Y * _Y);
          var _Value = Math.Asin(_Y / _Hypot) * 180 / Math.PI;
          var _Quadrant = (_X &gt;= 0) ?
              (_Y &gt;= 0) ? Quadrants.ne : Quadrants.se :
              (_Y &gt;= 0) ? Quadrants.nw : Quadrants.sw;
          switch (_Quadrant)
          {
              case Quadrants.ne: _Value = 090 - _Value; break;
              case Quadrants.nw: _Value = 270 + _Value; break;
              case Quadrants.se: _Value = 090 - _Value; break;
              case Quadrants.sw: _Value = 270 + _Value; break;
          }
          return _Value;
      }
  
      public event PropertyChangedEventHandler PropertyChanged;
  
  }
  </code></pre>