WPF Animate Несколько кнопок

Question

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

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