WPF UserControl - Klick Animation

Question

Ich habe ein WFP UserControl mit einigen komplexen XAML (konvertiert von SVG) erstellt. Es ist im Grunde ein schicker Knopf.

Ich möchte eine Animation im XAML des Benutzersteuerelements erstellen, um seine Position um 4 Pixel nach rechts und nach unten zu verschieben, um einen Klick zu simulieren, und dann wieder an den ursprünglichen Speicherort zurückkehren zu lassen.

Für mich klingt das wie die erste Animation, die jemand jemals in WPF lernen würde, aber ich habe Probleme, ein gutes Beispiel zu finden.

Ich habe die UserControl aufgenommen, wenn jemand interessiert ist.

<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"> 

<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"> 
    <Canvas x:Name="Layer_1"> 
     <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"> 
     </Path> 
     <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"> 
      <Path.Fill> 
       <LinearGradientBrush StartPoint="61.433315,163.5455" EndPoint="83.765717,207.83496" ColorInterpolationMode="ScRgbLinearInterpolation" MappingMode="Absolute" SpreadMethod="Pad" Transform="Identity"> 
        <GradientStop Color="#FFF9F9F9" Offset="0" /> 
        <GradientStop Color="#00F9F9F9" Offset="1" /> 
       </LinearGradientBrush> 
      </Path.Fill> 
     </Path> 
     <Path Fill="#FF000000" x:Name="text4651"> 
      <Path.Data> 
       <PathGeometry FillRule="Nonzero"> 
        <PathGeometry.Figures> 
         <PathFigure StartPoint="18.202721,31.924561" IsClosed="True"> 
          <PathFigure.Segments> 
           <PolyLineSegment Points="13.89608,31.924561 18.779503,17.55542 17.125206,17.55542 18.095909,14.697998" /> 
           <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" /> 
           <PolyLineSegment Points="24.865196,12.319092 18.202721,31.924561" /> 
          </PathFigure.Segments> 
         </PathFigure> 
         <PathFigure StartPoint="19.132408,31.924561" IsClosed="True"> 
          <PathFigure.Segments> 
           <PolyLineSegment Points="25.794884,12.319092 30.867149,12.319092" /> 
           <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" /> 
           <LineSegment Point="33.260582,18.512451" /> 
           <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" /> 
           <LineSegment Point="30.154503,28.05542" /> 
           <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" /> 
           <LineSegment Point="19.132408,31.924561" /> 
          </PathFigure.Segments> 
         </PathFigure> 
         <PathFigure StartPoint="28.963341,19.209717" IsClosed="True"> 
          <PathFigure.Segments> 
           <LineSegment Point="30.097252,15.873779" /> 
           <BezierSegment Point1="30.329092,15.190202" Point2="30.043977,14.848406" Point3="29.241905,14.848389" /> 
           <LineSegment Point="27.40731,20.248779" /> 
           <BezierSegment Point1="28.209384,20.248791" Point2="28.728061,19.902437" Point3="28.963341,19.209717" /> 
           <LineSegment Point="28.963341,19.209717" /> 
          </PathFigure.Segments> 
         </PathFigure> 
         <PathFigure StartPoint="25.850426,28.369873" IsClosed="True"> 
          <PathFigure.Segments> 
           <LineSegment Point="27.537193,23.406982" /> 
           <BezierSegment Point1="27.769036,22.723398" Point2="27.483921,22.381601" Point3="26.681847,22.381592" /> 
           <LineSegment Point="24.294395,29.408936" /> 
           <BezierSegment Point1="25.096472,29.408938" Point2="25.615149,29.062584" Point3="25.850426,28.369873" /> 
           <LineSegment Point="25.850426,28.369873" /> 
          </PathFigure.Segments> 
         </PathFigure> 
        </PathGeometry.Figures> 
       </PathGeometry> 
      </Path.Data> 
     </Path> 
    </Canvas> 
</Canvas> 

Answer 1

Pavel ist in jeder Hinsicht richtig. Ich habe einige XAML gemacht, dass sein Ansatz zeigt:

<Window.Resources> 
<ControlTemplate x:Key="svgButton" TargetType="{x:Type Button}"> 
    <Canvas x:Name="svg2" Width="48.618" Height="44.289"> 
    <Canvas x:Name="Layer_1"> 
    <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"> 
    </Path> 
    <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"> 
    <Path.Fill> 
     <LinearGradientBrush StartPoint="61.433315,163.5455" EndPoint="83.765717,207.83496" ColorInterpolationMode="ScRgbLinearInterpolation" MappingMode="Absolute" SpreadMethod="Pad" Transform="Identity"> 
     <GradientStop Color="#FFF9F9F9" Offset="0" /> 
     <GradientStop Color="#00F9F9F9" Offset="1" /> 
     </LinearGradientBrush> 
    </Path.Fill> 
    </Path> 
    <Path Fill="#FF000000" x:Name="text4651"> 
    <Path.Data> 
     <PathGeometry FillRule="Nonzero"> 
     <PathGeometry.Figures> 
     <PathFigure StartPoint="18.202721,31.924561" IsClosed="True"> 
     <PathFigure.Segments> 
      <PolyLineSegment Points="13.89608,31.924561 18.779503,17.55542 17.125206,17.55542 18.095909,14.697998" /> 
      <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" /> 
      <PolyLineSegment Points="24.865196,12.319092 18.202721,31.924561" /> 
     </PathFigure.Segments> 
     </PathFigure> 
     <PathFigure StartPoint="19.132408,31.924561" IsClosed="True"> 
     <PathFigure.Segments> 
      <PolyLineSegment Points="25.794884,12.319092 30.867149,12.319092" /> 
      <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" /> 
      <LineSegment Point="33.260582,18.512451" /> 
      <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" /> 
      <LineSegment Point="30.154503,28.05542" /> 
      <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" /> 
      <LineSegment Point="19.132408,31.924561" /> 
     </PathFigure.Segments> 
     </PathFigure> 
     <PathFigure StartPoint="28.963341,19.209717" IsClosed="True"> 
     <PathFigure.Segments> 
      <LineSegment Point="30.097252,15.873779" /> 
      <BezierSegment Point1="30.329092,15.190202" Point2="30.043977,14.848406" Point3="29.241905,14.848389" /> 
      <LineSegment Point="27.40731,20.248779" /> 
      <BezierSegment Point1="28.209384,20.248791" Point2="28.728061,19.902437" Point3="28.963341,19.209717" /> 
      <LineSegment Point="28.963341,19.209717" /> 
     </PathFigure.Segments> 
     </PathFigure> 
     <PathFigure StartPoint="25.850426,28.369873" IsClosed="True"> 
     <PathFigure.Segments> 
      <LineSegment Point="27.537193,23.406982" /> 
      <BezierSegment Point1="27.769036,22.723398" Point2="27.483921,22.381601" Point3="26.681847,22.381592" /> 
      <LineSegment Point="24.294395,29.408936" /> 
      <BezierSegment Point1="25.096472,29.408938" Point2="25.615149,29.062584" Point3="25.850426,28.369873" /> 
      <LineSegment Point="25.850426,28.369873" /> 
      </PathFigure.Segments> 
     </PathFigure> 
     </PathGeometry.Figures> 
     </PathGeometry> 
     </Path.Data> 
    </Path> 
    </Canvas> 
    </Canvas> 
    <ControlTemplate.Triggers> 
    <Trigger Property="Button.IsPressed" Value="True"> 
    <Setter Property="RenderTransform"> 
     <Setter.Value> 
     <TranslateTransform X="1" Y="1"/> 
     </Setter.Value> 
    </Setter> 
    </Trigger> 
    </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Window.Resources> 

<Button Template="{StaticResource svgButton}"/> 

Answer 2

Siehe UIElement.RenderTransform. Bei einem knopfähnlichen Steuerelement besteht eine typische Vorgehensweise darin, eine Eigenschaft für Ihre Schaltfläche festzulegen, z. B. IsPressed, die von Ihrem Steuerelement auf true in OnMouseDown festgelegt wird, und dann zurück auf false in OnMouseUp. Dann haben Sie einen Stil mit einem Trigger auf IsPressed == true, die RenderTransform setzt, um eine Verschiebung zu verursachen - das ist ungefähr wie das normale WPF Button tut dies.

In Ihrem Fall, wenn Ihr Steuer genau die gleiche Verhalten wie die normalen Button hat, nur anders aussehen, würde ich nicht wirklich nutzen UserControl - ich würde nur einen benutzerdefinierten Stil für die Button, mit einer benutzerdefinierten Vorlage erstellen, und Verwenden Sie das (und verwenden Sie Button.IsPressed).