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>

WPF动画多个按钮

3 个答案: