WPF动画问题

Question

我刚开始研究 WPF，然后遇到了一个有趣的问题。目标是有一个带有一个按钮的简单表单，当用户将鼠标移到按钮上时，按钮应该移开，所以可以说整个过程如下所示:1. 按钮在位置 A。2. 将鼠标悬停在按钮上，它会移动到位置 B。3. 将鼠标悬停在按钮上，它会移动到位置 C。4. 将鼠标悬停在按钮上，它会移回位置 A。5. 将鼠标悬停在按钮上，它再次移动到位置 B。

目标是用户永远无法点击按钮，它在 A 到 B 到 C 到 A 到 B 之间运行，并且它应该继续直到用户放弃。我试图通过使用触发器和动画来实现这一点；问题是触发器只工作一次，在按钮返回位置后，触发器不会第二次触发，因此按钮不再移动。这是来自 xaml 文件的代码。

<Window x:Class="Test_1.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">
  <Window.Resources>
  <Style TargetType="Button">
        <Style.Triggers>                
             <MultiTrigger x:Name="Aaaa" >
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="51,58,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Name="SB2" >
                        <Storyboard Duration="0:0:1">
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="249,199,0,0" />
                        </Storyboard>
                    </BeginStoryboard>                        
                </MultiTrigger.EnterActions>
            </MultiTrigger>
            <MultiTrigger x:Name="Bbbbb">
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="249,199,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Name="SB3">
                        <Storyboard Duration="0:0:1">
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="301,66,0,0" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
            </MultiTrigger>
            <MultiTrigger x:Name="Ccccc">
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="301,66,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Name="SB4">
                        <Storyboard Duration="0:0:1">
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="51,58,0,0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="51,58,0,0" Name="button1" VerticalAlignment="Top" Width="75" />                   
</Grid>

谢谢!!

Answer 1

我相信您需要先停止 Storyboard，然后才能再次使用它。因此，这里有一个让您的示例正常工作的技巧:(在每个 Storyboard 的退出操作中，停止先前执行的 Storyboard ):

    <Style TargetType="Button">
        <Style.Triggers>
            <MultiTrigger x:Name="Aaaa">
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="51,58,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions >
                    <BeginStoryboard Name="SB2" >
                        <Storyboard Duration="0:0:1" >
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="249,199,0,0" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="SB4" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>
            <MultiTrigger x:Name="Bbbbb">
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="249,199,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Name="SB3">
                        <Storyboard Duration="0:0:1">
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="301,66,0,0" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="SB2" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>
            <MultiTrigger x:Name="Ccccc">
                <MultiTrigger.Conditions>
                    <Condition Property="Margin" Value="301,66,0,0"/>
                    <Condition Property="IsMouseOver" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard Name="SB4">
                        <Storyboard Duration="0:0:1">
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="51,58,0,0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="SB3" />
                </MultiTrigger.ExitActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>