Question

目前，当我的按钮设置为可见时，我尝试实现淡入动画，而当我的按钮设置为折叠时，我尝试实现淡出动画。我想在纯XAML中这样做。以下代码是我的尝试：

<Style x:Key="NavigateBackButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{StaticResource AccentColorBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource AccentColorBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Border"
                                Padding="{TemplateBinding Padding}">
                            <Border.Background>
                                <SolidColorBrush x:Name="BorderBackground" Color="{StaticResource AccentColor}" />
                            </Border.Background>
                            <ContentPresenter RecognizesAccessKey="True"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Visibility" Value="Visible">
                                <Trigger.EnterActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                             From="0.0" To="1.0" 
                                                             Duration="0:0:0.7"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>

                            <Trigger Property="Visibility" Value="Collapsed">
                                <Trigger.ExitActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                             From="1.0" To="0.0" 
                                                             Duration="0:0:0.7"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>                                
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

出了什么问题：

当我将Button设置为可见时，Fade In Animation触发器就像我预期的那样。但是在动画之后，折叠动画会立即触发并且按钮逐渐淡出。我已经三重检查了我的.cs代码。当我将Button Visibility设置为可见时，我没有将可见性瞬间设置为折叠。

那我的XAML出了什么问题？我不明白。

Answer 1

当Visibility设置为Visible时，会触发您的第一个触发器（淡入不透明度从0变为1）。但是，您的第二个触发器同时触发，因为您在ExitActions中声明了故事板。

Collapsed --> Visible
(Exit)        (Enter)

如果删除这两行

</Trigger>
<Trigger Property="Visibility" Value="Collapsed">

它可能就是你打算做的。然而，仍然存在一个问题：淡出不可见，因为Collapsed元素的不透明度并不重要，它会立即隐形。

您可以做的是使用其他属性（例如IsEnabled）或自定义附加属性：

<Trigger Property="IsEnabled" Value="True">
    <Trigger.EnterActions>
        <!-- Fade to 1 -->
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <!-- Fade to 0 -->
    </Trigger.ExitActions>
</Trigger>

可能不是你的想法，但遗憾的是没有办法绕过Visibility设置。

如果您不想浪费IsEnabled动画，可以创建自己的附加属性并使用它来控制动画：

public static class AnimationProperties
{
    public static readonly DependencyProperty IsFadedOutProperty = DependencyProperty.RegisterAttached(
        "IsFadedOut", typeof(bool), typeof(AnimationProperties), new PropertyMetadata(default(bool)));

    public static void SetIsFadedOut(DependencyObject element, bool value)
    {
        element.SetValue(IsFadedOutProperty, value);
    }

    public static bool GetIsFadedOut(DependencyObject element)
    {
        return (bool) element.GetValue(IsFadedOutProperty);
    }
}

<Trigger Property="yourLocalNamespace:AnimationProperties.IsFadedOut" Value="False">
    <Trigger.EnterActions>
        <!-- Fade to 1 -->
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <!-- Fade to 0 -->
    </Trigger.ExitActions>
</Trigger>

bool currentValue = AnimationProperties.GetIsFadedOut(btn);
AnimationProperties.SetIsFadedOut(btn, !currentValue);

淡出淡出动画

1 个答案: