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