wpf - How to rotate the Ellipse and border based on dragging border? -

please find attached image requirement.when drag arc(border) arc , wheel rotate through mouse position.can please me? if rotate arc , wheel in button click working.but want rotate in draging border(arc).i stuck calculation.

xaml: <grid horizontalalignment="center">     <stackpanel orientation="horizontal" x:name="mainstackpanel" rendertransformorigin="0.5,0.5">         <grid>             <border borderthickness="10" borderbrush="blue" mousemove="border_mousemove" mouseleftbuttondown="border_mouseleftbuttondown"                     mouseleftbuttonup="border_mouseleftbuttonup" width="10" height="90" />         </grid>         <grid x:name="rotategrid" margin="20 0 0 0" rendertransformorigin="0.5,0.5">             <ellipse height="250" width="250" stroke="red" strokethickness="20"/>             <border borderthickness="10" borderbrush="red" height="15" width="250"             horizontalalignment="stretch" verticalalignment="center"/>              <border borderthickness="10" borderbrush="red" width="15"  height="250"             horizontalalignment="center" verticalalignment="stretch"/>              <border borderthickness="10" borderbrush="red" width="15"  height="246" rendertransformorigin="0.5,0.5"             horizontalalignment="center" verticalalignment="stretch">                 <border.rendertransform>                     <rotatetransform angle="45"/>                 </border.rendertransform>             </border>             <border borderthickness="10" borderbrush="red" width="15"  height="246" rendertransformorigin="0.5,0.5"             horizontalalignment="center" verticalalignment="stretch">                 <border.rendertransform>                     <rotatetransform angle="135"/>                 </border.rendertransform>             </border>          </grid>         <grid margin="20 0 0 0">             <border borderthickness="10" borderbrush="blue" width="10" height="90" />         </grid>      </stackpanel> 

code behind: rotatetransform trans = new rotatetransform();     double angle = 30;     point oldpoint;     point newpoint;     bool dragstarted = false;      private void button_click(object sender, routedeventargs e)     {         trans.angle = angle;         mainstackpanel.rendertransform = trans;         if (angle >= 360)             angle = 0;         angle += 30;     }      private void border_mouseleftbuttondown(object sender, mousebuttoneventargs e)     {         dragstarted = true;         oldpoint = e.getposition(this);         mouse.capture(sender iinputelement);     }      private void border_mouseleftbuttonup(object sender, mousebuttoneventargs e)     {         mouse.capture(null);         oldpoint = new point(0, 0);         newpoint = new point(0, 0);         dragstarted = false;     }     protected override void onmouseleftbuttonup(mousebuttoneventargs e)     {         mouse.capture(null);         oldpoint = new point(0, 0);         newpoint = new point(0, 0);         dragstarted = false;         base.onmouseleftbuttonup(e);     }      private void border_mousemove(object sender, mouseeventargs e)     {         if (dragstarted)         {             newpoint = e.getposition(this);             if (oldpoint.y != newpoint.y)             {                 if (oldpoint.y > newpoint.y)                     trans.angle = (oldpoint.y - newpoint.y);                 else                     trans.angle += (newpoint.y - oldpoint.y);                  mainstackpanel.rendertransform = trans;             }         }     } 

first, change these lines:

if (angle >= 360)         angle = 0;     angle += 30; 

to line:

angle = angle >= 330 ? 0 : angle + 30; 

although doubt cause problem is. in code, if angle equalled 350 instance, end 380, wpf should wrap angle round effective angle of 20 anyway.

ahhhhhhh... i've just worked out exact requirement... want user move mouse , want shape rotate far user has moved mouse virtually looks physically moving it.

right, here goes... can explain have do, not you. hope trigonometry because haven't used decades! basically, if remember correctly, want create imaginary triangles our figures calculations. points of triangle come centre of circle , various points around circumference. first thing make note of exact point centre of circle resides in... i'll leave you.

next, want find other figures use. 1 either directly above, below, left, or right of centre, our triangle have right angle... need if want our calls math.sin , math.cos return valid results. if don't know trigonometry, can find out more looking @ sine, cosine , tangent page on maths fun website.

the third , last point of each triangle position of mouse, or more accurately, position on circumference in direction of mouse cursor. achieved creating bigger imaginary circle includes mouse cursor position, circle centre , position either directly above, below, left, or right of centre, our bigger triangle has right angle.

having formed these imaginary triangles (you may benefit drawing these on paper visualise situation), can use math class' sin , cos methods calculate required angles rotate shape to. although believe rotatetransform.angle property in degrees (msdn not available @ moment), may need adjust resulting angle values fit in wpf's weird 0 degrees position (by adding or subtracting divisor of 90).

the last thing me wish luck.