title: WPF UserControl - click animation
body: <p>I have created a WFP <code>UserControl</code> with some complex XAML (converted from SVG).  It's basically a fancy button.  </p>
  
  <p>I would like to create an animation in the usercontrol's XAML to "shift" it's location by 4 pixels to the right and down, to simulate a click, and then have it pop back to its original location.  </p>
  
  <p>To me, this sounds like the first animation anyone would ever learn in WPF, but I'm having trouble finding a good example.</p>
  
  <p>I have included the <code>UserControl</code> if anyone is interested.</p>
  
  <pre><code>&lt;UserControl x:Class="PositionButton"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="50" Height="50"&gt;
  
  &lt;Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="svg2" Width="48.618" Height="44.289"&gt;
      &lt;Canvas x:Name="Layer_1"&gt;
           &lt;Path Fill="#FFFFCC00" Stroke="#FF000000" StrokeThickness="1.25" StrokeMiterLimit="4" x:Name="path3240" Canvas.Left="-47.7386" Canvas.Top="-164.9827" Data="M90.521734,187.00391A18.579054,18.415361,0,1,1,53.363626,187.00391A18.579054,18.415361,0,1,1,90.521734,187.00391z"&gt;
          &lt;/Path&gt;
          &lt;Path x:Name="path4635" RenderTransform="0.8722467,0,0,0.8722467,0,0" Canvas.Left="-38.5477" Canvas.Top="-141.0923" Data="M90.521734,187.00391A18.579054,18.415361,0,1,1,53.363626,187.00391A18.579054,18.415361,0,1,1,90.521734,187.00391z"&gt;
              &lt;Path.Fill&gt;
                  &lt;LinearGradientBrush StartPoint="61.433315,163.5455" EndPoint="83.765717,207.83496" ColorInterpolationMode="ScRgbLinearInterpolation" MappingMode="Absolute" SpreadMethod="Pad" Transform="Identity"&gt;
                      &lt;GradientStop Color="#FFF9F9F9" Offset="0" /&gt;
                      &lt;GradientStop Color="#00F9F9F9" Offset="1" /&gt;
                  &lt;/LinearGradientBrush&gt;
              &lt;/Path.Fill&gt;
          &lt;/Path&gt;
          &lt;Path Fill="#FF000000" x:Name="text4651"&gt;
              &lt;Path.Data&gt;
                  &lt;PathGeometry FillRule="Nonzero"&gt;
                      &lt;PathGeometry.Figures&gt;
                          &lt;PathFigure StartPoint="18.202721,31.924561" IsClosed="True"&gt;
                              &lt;PathFigure.Segments&gt;
                                  &lt;PolyLineSegment Points="13.89608,31.924561 18.779503,17.55542 17.125206,17.55542 18.095909,14.697998" /&gt;
                                  &lt;PolyBezierSegment Points="18.724808,14.698015 19.347163,14.429135 19.962975,13.891357 20.57877,13.353616 20.97326,12.829528 21.146446,12.319092" /&gt;
                                  &lt;PolyLineSegment Points="24.865196,12.319092 18.202721,31.924561" /&gt;
                              &lt;/PathFigure.Segments&gt;
                          &lt;/PathFigure&gt;
                          &lt;PathFigure StartPoint="19.132408,31.924561" IsClosed="True"&gt;
                              &lt;PathFigure.Segments&gt;
                                  &lt;PolyLineSegment Points="25.794884,12.319092 30.867149,12.319092" /&gt;
                                  &lt;PolyBezierSegment Points="32.079376,12.319111 33.0384,12.594827 33.744225,13.14624 34.450019,13.697691 34.596992,14.579526 34.185143,15.791748" /&gt;
                                  &lt;LineSegment Point="33.260582,18.512451" /&gt;
                                  &lt;PolyBezierSegment Points="32.792876,19.888765 31.624501,20.859467 29.755455,21.424561 31.37499,21.862071 31.938384,22.805429 31.445641,24.254639" /&gt;
                                  &lt;LineSegment Point="30.154503,28.05542" /&gt;
                                  &lt;PolyBezierSegment Points="29.714713,29.349693 28.964043,30.318117 27.902489,30.960693 26.840916,31.603272 25.726802,31.924561 24.560143,31.924561" /&gt;
                                  &lt;LineSegment Point="19.132408,31.924561" /&gt;
                              &lt;/PathFigure.Segments&gt;
                          &lt;/PathFigure&gt;
                          &lt;PathFigure StartPoint="28.963341,19.209717" IsClosed="True"&gt;
                              &lt;PathFigure.Segments&gt;
                                  &lt;LineSegment Point="30.097252,15.873779" /&gt;
                                  &lt;BezierSegment Point1="30.329092,15.190202" Point2="30.043977,14.848406" Point3="29.241905,14.848389" /&gt;
                                  &lt;LineSegment Point="27.40731,20.248779" /&gt;
                                  &lt;BezierSegment Point1="28.209384,20.248791" Point2="28.728061,19.902437" Point3="28.963341,19.209717" /&gt;
                                  &lt;LineSegment Point="28.963341,19.209717" /&gt;
                              &lt;/PathFigure.Segments&gt;
                          &lt;/PathFigure&gt;
                          &lt;PathFigure StartPoint="25.850426,28.369873" IsClosed="True"&gt;
                              &lt;PathFigure.Segments&gt;
                                  &lt;LineSegment Point="27.537193,23.406982" /&gt;
                                  &lt;BezierSegment Point1="27.769036,22.723398" Point2="27.483921,22.381601" Point3="26.681847,22.381592" /&gt;
                                  &lt;LineSegment Point="24.294395,29.408936" /&gt;
                                  &lt;BezierSegment Point1="25.096472,29.408938" Point2="25.615149,29.062584" Point3="25.850426,28.369873" /&gt;
                                  &lt;LineSegment Point="25.850426,28.369873" /&gt;
                              &lt;/PathFigure.Segments&gt;
                          &lt;/PathFigure&gt;
                      &lt;/PathGeometry.Figures&gt;
                  &lt;/PathGeometry&gt;
              &lt;/Path.Data&gt;
          &lt;/Path&gt;
      &lt;/Canvas&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p></p>