文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >WPF按住UserControl键并单击动画

问WPF按住UserControl键并单击动画
EN

Stack Overflow用户
提问于 2009-07-31 20:24:38
回答 2查看 1.8K关注 0票数 0

我已经创建了一个世界粮食计划署的UserControl与一些复杂的XAML (转换自SVG)。它基本上就是一个花哨的按钮。

我想在用户控件的XAML中创建一个动画，将它的位置向右和向下“移动”4个像素，以模拟单击，然后让它弹回原来的位置。

对我来说，这听起来像是任何人在WPF中学习的第一个动画，但我很难找到一个好的例子。

如果任何人感兴趣，我已经包括了UserControl。

代码语言：javascript
复制
<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>

​

xaml
animation
EN

Stack Overflow用户

回答已采纳

发布于 2009-07-31 21:01:08

帕维尔在所有方面都是对的。我制作了一些XAML来演示他的方法：

代码语言：javascript
复制
<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}"/>
票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/1214692

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档