WPF - Animation in button style using DataTrigger

Question

I'm developing a C# WPF application and try to rotate a button or his content to animate a refreshing state. Therefor I extended my button style with a DataTrigger and bind to a property of my ViewModel. But when I start the application and change the property, nothing happens. What did I miss?

Here some code snippets of the button:

<Button Style="{StaticResource MenuButtonStyle}"
        Command="{Binding RefreshCommand}">
    <Viewbox>
        <Path Data="M1.1212257,9.3630001L6.5977538,11.580556 4.2506914,12.856734C5.4929478,15.192778 7.9304001,16.795777 10.761055,16.795777 13.75407,16.795777 16.324983,15.014366 17.488389,12.45831L19.643999,12.45831C18.371294,16.144636 14.875176,18.804999 10.761055,18.804999 7.1745365,18.804999 4.0586705,16.782776 2.4753525,13.820294L0,15.164176z M10.760896,0C14.30653,1.3528629E-07,17.389073,1.977851,18.989344,4.8840143L21.333,3.5363943 20.353317,9.3630001 14.824021,7.2771222 17.239375,5.8891636C15.988099,3.5858327 13.567544,2.0091001 10.760896,2.0091001 7.7688711,2.0091001 5.1979985,3.7902967 4.0345705,6.3461806L1.879,6.3461806C3.1517664,2.6600806,6.6478317,1.3528629E-07,10.760896,0z"
              Stretch="Uniform" Fill="{StaticResource IconColor}"/>
    </Viewbox>
</Button>

and the property of the ViewModel:

private bool _isRefreshing = false;
public bool IsRefreshing
{
    get { return _isRefreshing; }
    set
    {
        _isRefreshing = value;
        OnPropertyChanged("IsRefreshing");
    }
}

My button style looks like:

<Style x:Key="MenuButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Width" Value="32"/>
    <Setter Property="Height" Value="32"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsRefreshing}" Value="true">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
                                         From="0"
                                         To="360"
                                         Duration="0:0:8"
                                         RepeatBehavior="Forever"
                                         />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard FillBehavior="Stop">
                        <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
                                         To="0"
                                         Duration="0:0:0"
                                         />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

dkozl dkozl · Accepted Answer · 2015-09-27T14:56:36

Assuming that DataContext of the Button is set accordingly and it has access to IsRefreshing property and you're not setting LayoutTransfom of the Button to RotateTransform so there's nothing to animate. Add another setter to you Style

<Setter Property="LayoutTransform">
    <Setter.Value>
        <RotateTransform Angle="0"/>
    </Setter.Value>
</Setter>

WPF - Animation in button style using DataTrigger

1 Answers