简体   繁体   English

WPF-使用DataTrigger的按钮样式的动画

[英]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. 我正在开发C#WPF应用程序,并尝试旋转按钮或按钮的内容以设置刷新状态的动画。 Therefor I extended my button style with a DataTrigger and bind to a property of my ViewModel. 因此,我使用DataTrigger扩展了按钮样式,并绑定到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: 以及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. 假设DataContext的的Button相应设置,并先后获得IsRefreshing财产,你不设置LayoutTransfom的的ButtonRotateTransform所以没有什么动画。 Add another setter to you Style 另一个二传手添加到您Style

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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