[英]WPF Animate Multiple Buttons
I have a control with 5 buttons, and I would like to make all of them shift diagonally when any of them are clicked. 我有一个带有5个按钮的控件,当我单击其中的任何一个按钮时,我想使它们全部沿对角线移动。
What would be the best way to do this? 最好的方法是什么? If it were a single button, I could use a Storyboard and DoubleAnimate, but I believe that if I apply this to multiply buttons, they would shift one by one, instead of at the same time.
如果它是单个按钮,则可以使用Storyboard和DoubleAnimate,但是我相信,如果将其应用于多个按钮,它们将一个接一个地移动,而不是同时移动。
How would I make them all move in the same time? 我将如何使它们全部同时移动?
If I have understood your situation correctly, one option might be to put the buttons on a container like a Grid
and animate the Grid. 如果我正确理解了您的情况,一种选择可能是将按钮放在
Grid
类的容器上并为网格设置动画。
Here is a quick example of animating a Grid which is hosting a set of buttons. 这是一个动画的快速示例,该Grid承载着一组按钮。
<Window x:Class="PanelAnimate.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid Name="controlWithButtons" Height="25">
<Grid.Triggers>
<!-- Button.Click will trigger the animation -->
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<!-- Animate the X,Y translation -->
<BeginStoryboard>
<Storyboard Storyboard.TargetName="translateButtons">
<DoubleAnimation Storyboard.TargetProperty="X" By="20" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetProperty="Y" By="20" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<!-- Setup a translation transform which is animated when a button is clicked -->
<Grid.RenderTransform>
<TranslateTransform x:Name="translateButtons" />
</Grid.RenderTransform>
<!-- the buttons on the control -->
<StackPanel Orientation="Horizontal">
<Button Content="Button1" />
<Button Content="Button2" />
<Button Content="Button3" />
<Button Content="Button4" />
<Button Content="Button5" />
</StackPanel>
</Grid>
</Grid>
</Window>
如果可以将元素包装到StackPanel
或Grid
,则可以使用Storyboard为该Panel设置动画。
If you want them to animate one by one, you could try something like this. 如果要他们一个一个地设置动画,则可以尝试这样的操作。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Storyboard x:Key="jumpStoryBoardXX">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X"
To="20" Duration="0:0:0.2" />
<DoubleAnimation AutoReverse="True" Storyboard.TargetProperty="RenderTransform.X"
From="0" To="-20" Duration="0:0:0.2" />
</Storyboard>
<Style TargetType="{x:Type Button}">
<Setter Property="RenderTransformOrigin" Value="0.6, 0.2"/>
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource jumpStoryBoardXX}" />
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Height="50" Width="50" Content="V" />
<Button Height="50" Width="50" Content="I" />
<Button Height="50" Width="50" Content="N" />
<Button Height="50" Width="50" Content="O" />
<Button Height="50" Width="50" Content="D" />
<Button Height="50" Width="50" Content="H" />
</StackPanel>
</StackPanel>
</Page>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.