WPF Анимация нескольких кнопок

Question

У меня есть элемент управления с 5 кнопками, и я бы хотел, чтобы все они сдвигались по диагонали, когда на них нажимали.

Что было бы лучшим способом сделать это? Если бы это была единственная кнопка, я мог бы использовать Storyboard и DoubleAnimate, но я считаю, что если я применил бы это к кнопкам с несколькими кнопками, они будут перемещаться один за другим, а не в одно и то же время.

Как я могу заставить их двигаться одновременно?

Answer 1

Если я правильно понял вашу ситуацию, одним из вариантов может быть установка кнопок на контейнере как 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> 

Answer 2

Если вы можете обернуть элементы в StackPanel или Grid, вы можете анимировать эту панель с раскадровки.

Answer 3

Если вы хотите, чтобы они анимировали один за другим, вы можете попробовать что-то вроде этого.

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