WPF Animate Multiple Buttons

Question

I have a control with 5 buttons, and I would like to make all of them shift diagonally when any of them are clicked.

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.

How would I make them all move in the same time?

Answer 1

If you can wrap the elements into a StackPanel or Grid you could then animate that Panel with a Storyboard.

Answer 2

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.

Here is a quick example of animating a Grid which is hosting a set of buttons.

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

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"&gt;
  <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>