简体   繁体   中英

WPF - Animation in button style using DataTrigger

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM