WPF按钮内的动画 [英] Animation inside WPF button

问题描述

我是WPF动画的新手，我的要求是跟随我的窗口（Button Animation.xaml）将有四个大按钮，每个按钮都有独特的事情要做，我的动画将与每个按钮完成的工作有关，这样最终用户可以很容易地找出按钮会做什么。



以下是我的Xaml代码，

 < Canvas> 
< Button Name =btnoneMargin =21,0,111,56Click =Button_Click> 
< StackPanel> 
< Image Source = Images / MyImage1.pngWidth =342Height =152/> 
< / StackPanel> 
< / Button> 
< / Canvas>

以下图片位于此按钮的顶部。我的按钮还设置了背景图像，图像为MyImage1.png。

< Image x：Name =img1Source =Images / MyImage2.pngWidth = 263身高=159Canvas.Left =60Canvas.Top = -  9/> 

关注代码用于在按钮宽度限制内从左到右为按钮顶部的img1设置动画。

  public   void  ShowAnimation（）
 {
 DoubleAnimation anim =  new  DoubleAnimation（）; 
 anim =  new  DoubleAnimation（-20， 150 ，TimeSpan.FromMilliseconds（ 1500 ））; 
 anim.RepeatBehavior = RepeatBehavior.Forever; 
 anim.AutoReverse =  true ; 
 img1.BeginAnimation（Canvas.LeftProperty，anim）; 
 
} 

现在上面的图像（img1）会在按钮顶部从左到右移动，即btnone。就像我需要三个，但每当我拿新按钮时，我得到使用多个堆栈面板的错误。



有没有更好的方法来实现这一点。



提前致谢

解决方案

请先阅读评论。



以下是一个想法：演练：创建自定义动画按钮 [ ^ ]

Hi, I am new to WPF animation my requirement is following my window(Button Animation.xaml) will have four big buttons, each button has unique thing to do, My animations would be related to work done by each button so that end user can easily find out what exactly button would do.

following is my Xaml code,

"<Canvas>
            <Button Name="btnone" Margin="21,0,111,56" Click="Button_Click">
                <StackPanel>
                    <Image Source="Images/MyImage1.png" Width="342" Height="152"  />
                </StackPanel>
            </Button> 
   </Canvas>"

and following image is on top of this button. My button also set with background image with image MyImage1.png.

<Image x:Name="img1" Source="Images/MyImage2.png" Width="263" Height="159" Canvas.Left="60" Canvas.Top="-9" />

following code is used to animate img1 on top of button from left to right within the limit of button width.

public void ShowAnimation()
        {
            DoubleAnimation anim = new DoubleAnimation();
            anim = new DoubleAnimation(-20, 150, TimeSpan.FromMilliseconds(1500));
            anim.RepeatBehavior = RepeatBehavior.Forever;
            anim.AutoReverse = true;
            img1.BeginAnimation(Canvas.LeftProperty, anim);
            
        }

Now above image (img1) would move from left to right on top of button namely btnone. Like that I need three more but whenever I take new button I get Error of using multiple stack Panel.

Is there any better way to achieve this.

Thanks in advance

解决方案

Please, read comments first.

Here is an idea: Walkthroughs: Create a Custom Animated Button[^]

这篇关于WPF按钮内的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！