我有一个带有用户控件的WPF C#应用程序我希望在3个状态之间设置动画。
用户控件:
public partial class Cart : UserControl
{
/// <summary>
/// The <see cref="Layout" /> dependency property's name.
/// </summary>
public const string LayoutPropertyName = "Layout";
/// <summary>
/// Gets or sets the value of the <see cref="Layout" />
/// property. This is a dependency property.
/// </summary>
public Visibility Layout
{
get
{
return (Visibility)GetValue(LayoutProperty);
}
set
{
SetValue(LayoutProperty, value);
}
}
public static readonly DependencyProperty LayoutProperty = DependencyProperty.Register(
LayoutPropertyName,
typeof(Visibility),
typeof(Carrito),
new PropertyMetadata(Visibility.Hidden));
}
另外,我有一个Styles.xaml,我在其中定义3个故事板,我打算重复使用属性触发器将控件放在不同的位置。
<Storyboard x:Key="CartVisible">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Duration="0:0:0.5" To="0,648,0,0" />
</Storyboard>
<Storyboard x:Key="CartCollapsed">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Duration="0:0:0.5" To="0,736,0,0" />
</Storyboard>
<Storyboard x:Key="CartHidden">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Duration="0:0:0.5" To="0,768,0,0" />
</Storyboard>
<Style TargetType="c:Cart" TargetType="FrameworkElement">
<Setter Property="Margin" Value="0,768,0,0" />
<Style.Triggers>
<Trigger Property="Layout" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CartVisible}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CartHidden}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Layout" Value="Collapsed">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CartCollapsed}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CartVisible}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Layout" Value="Hidden">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CartHidden}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CartVisible}" />
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
然后,我有一个xaml绑定到属性Layout,它触发属性值更改。
问题在于动画并不总是适用于每个状态更改。我见过的所有例子都是使用Enter和ExitActions的bool属性,但是这里我有3个可能会有所不同。
是否有一种很好的方法可以使这项工作?
由于
答案 0 :(得分:0)
我已经能够使用Animation not working correctly with data triggers
的解决方案来修复它我们的想法是在EnterActions中定义Storyboard,在 BeginStoryboard之前定义,确保删除所有其他Storyboard。
固定代码是这样的:(请注意s:S.Cart ......这是另一个类中的常量)。
<Style TargetType="c:Cart">
<Setter Property="Margin" Value="{x:Static s:S+Cart.Hidden}" />
<Style.Triggers>
<Trigger Property="Layout" Value="Visible">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="CartCollapsed" />
<RemoveStoryboard BeginStoryboardName="CartHidden" />
<BeginStoryboard Name="CartVisible">
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
Duration="0:0:0.5"
To="{x:Static s:S+Cart.Visible}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Layout" Value="Collapsed">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="CartVisible" />
<RemoveStoryboard BeginStoryboardName="CartHidden" />
<BeginStoryboard Name="CartCollapsed">
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
Duration="0:0:0.5"
To="{x:Static s:S+Cart.Collapsed}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Layout" Value="Hidden">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="CartVisible" />
<RemoveStoryboard BeginStoryboardName="CartCollapsed" />
<BeginStoryboard Name="CartHidden">
<Storyboard>
<ThicknessAnimation Storyboard.TargetProperty="Margin"
Duration="0:0:0.5"
To="{x:Static s:S+Cart.Hidden}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>