WPF - 使用 DataTrigger 的按钮样式动画
WPF - Animation in button style using DataTrigger
我正在开发 C# WPF 应用程序并尝试旋转按钮或其内容以动画刷新状态。
因此,我使用 DataTrigger 扩展了我的按钮样式,并绑定到我的 ViewModel 的 属性。
但是当我启动应用程序并更改 属性 时,没有任何反应。我错过了什么?
这里是按钮的一些代码片段:
<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>
和 ViewModel 的 属性:
private bool _isRefreshing = false;
public bool IsRefreshing
{
get { return _isRefreshing; }
set
{
_isRefreshing = value;
OnPropertyChanged("IsRefreshing");
}
}
我的按钮样式如下:
<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>
假设 Button
的 DataContext
已相应设置并且它可以访问 IsRefreshing
属性 而您没有设置 LayoutTransfom
Button
到 RotateTransform
所以没有动画。再加一个setter给你Style
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="0"/>
</Setter.Value>
</Setter>
我正在开发 C# WPF 应用程序并尝试旋转按钮或其内容以动画刷新状态。 因此,我使用 DataTrigger 扩展了我的按钮样式,并绑定到我的 ViewModel 的 属性。 但是当我启动应用程序并更改 属性 时,没有任何反应。我错过了什么?
这里是按钮的一些代码片段:
<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>
和 ViewModel 的 属性:
private bool _isRefreshing = false;
public bool IsRefreshing
{
get { return _isRefreshing; }
set
{
_isRefreshing = value;
OnPropertyChanged("IsRefreshing");
}
}
我的按钮样式如下:
<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>
假设 Button
的 DataContext
已相应设置并且它可以访问 IsRefreshing
属性 而您没有设置 LayoutTransfom
Button
到 RotateTransform
所以没有动画。再加一个setter给你Style
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="0"/>
</Setter.Value>
</Setter>