WPF 可见性改变时触发动画？

Question

好吧，我有一个自定义控件，当 Visibility 更改为 Visible 时，我有一个带有进入/退出操作的 Trigger 但问题是，当退出操作会触发 Visibility 不再 Visible，因此看不到动画，我该如何解决此问题？

这是我的触发器：

<ControlTemplate.Triggers>
    <Trigger Property="Visibility" Value="Visible">
        <Trigger.ExitActions>
            <BeginStoryboard Storyboard="{StaticResource Hide}"/>
        </Trigger.ExitActions>
        <Trigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource Show}"/>
        </Trigger.EnterActions>
    </Trigger>
</ControlTemplate.Triggers>

Answer 1

我也尝试过这个但失败了。我认为不可能在简单的 ControlTemplate 中使用 Visibility 属性上的 Trigger 来完成此任务。您可以做的是将 Opacity 动画从 1 到 0 添加到不同属性的 Trigger，例如您添加的 DependencyProperty你自己背后的代码。

Answer 2

您还可以使用ObjectAnimationUsingKeyFrames来设置动画周期的Visibility。
在这种情况下，不需要任何代码隐藏。

Answer 3

有一种方法可以实现它。不是 100% 纯粹，但对我有用：

不要使用 Visibility 属性，而是使用 Opacity 和 Tag 属性。

<ListView.Resources>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border CornerRadius="5" 
                            BorderThickness="2" 
                            BorderBrush="DodgerBlue"
                            Background="#CC4f9dea" >
                        <Grid>
                            <ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch" />
                            <Button x:Name="btnClose" Opacity="0" Content="X" Style="{StaticResource RoundedButtonStyle}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Tag" TargetName="btnClose" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.Resources>

<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2" BorderBrush="Black">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Tag" Value="Visible">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="0.5" Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.5" To="0.0" Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>