WPF UserControl - 點擊動畫

我用一些複雜的XAML（從SVG轉換而來）創建了一個WFP UserControl。它基本上是一個奇特的按鈕。WPF UserControl - 點擊動畫

我想在usercontrol的XAML中創建一個動畫，將其位置向右「向下」移動4個像素，以模擬點擊，然後讓它彈回原始位置。

對我來說，這聽起來像任何人都可以在WPF學到的第一個動畫，但我無法找到一個很好的例子。

如果有人感興趣，我已包括UserControl。

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

來源

2009-07-31 taglius

帕維爾在所有方面都是對的。我已經取得了一些XAML演示了他的做法：

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

來源

2009-07-31 21:01:08 Charlie

都好，但你並不需要爲`FALSE`情況下扳機 - 的方式觸發工作，他們改變的價值是什麼原是當觸發條件沒有更長的時間適用，所以只要`真正的`觸發器就足夠了。 – 2009-07-31 21:03:19

見UIElement.RenderTransform。對於類似按鈕的控件，執行此操作的典型方法是爲按鈕創建一個屬性，如IsPressed，您的控件將設置爲true，然後返回，然後返回OnMouseUp的false。然後在IsPressed == true上設置一個觸發器樣式，該觸發器設置RenderTransform以引起移位 - 這大致上是正常WPF Button如何執行此操作。

在你的情況，如果你的控制具有完全相同的行爲爲正常Button，只有不同的樣子，我就不會實際使用UserControl - 我只希望創建一個自定義樣式爲Button，使用自定義模板，使用（並使用Button.IsPressed）。

來源

2009-07-31 20:30:42

WPF UserControl - 點擊動畫

回答

相關問題