WPF Animation issue

Question

I just started looking in to WPF and i ran in to interesting problem. The objective is to have a simple form with one button, when user moves his mouse over the button, button should move away, so lets say the whole process looks like this: 1. Button in position A. 2. Mouse over the button it moves to position B. 3. Mouse over the button it moves to position C. 4. Mouse over the button it moves back to position A. 5. Mouse over the button it moves to position B again.

The goal is that user never able to click the button, which runs between A to B to C to A to B and its should go on until user gives up . I am trying to achieve this by using triggers and animation; the problem is that triggers are working only one time, after button returned to position A trigger doesn't fire second time, so button is not moving any more. Here is a code from xaml file.

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

Thank you!!

Answer 1

I believe you need to stop your storyboard before you can use it again. So here's kinda a hack for your example to get it to work: (In the exit action of each storyboard, stop the previously executed 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>

Answer 2

It seems like your Storyboards doesn't stop once they complete the animation. Try to Stop the other Storyboards before you start the new one with StopStoryboard

<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>
                <StopStoryboard BeginStoryboardName="SB3"/>
                <StopStoryboard BeginStoryboardName="SB4"/>
                <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>
                <StopStoryboard BeginStoryboardName="SB2"/>
                <StopStoryboard BeginStoryboardName="SB4"/>
                <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>
                <StopStoryboard BeginStoryboardName="SB2"/>
                <StopStoryboard BeginStoryboardName="SB3"/>
                <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>