当WPF控件的可见性改变时如何触发动画？

Question

我有一个自定义控件，当将Visibility更改为Visible时，我有一个具有进入/退出动作的Trigger，但问题在于当退出动作触发时，Visibility不再是Visible，因此无法看到动画。我应该如何解决这个问题？

这是我的Trigger：

<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>

- Peter

---

没错。有点棘手。我会使用附加属性+值强制来解决这个问题。在这里看一下：WPF淡入淡出动画。希望能帮到你。祝好，Anvaka。 - Anvaka

这里有一个淡入淡出的动画吗？我能否编辑它，使其在我的动画完成之前仅延迟隐藏/折叠？ - Peter

我和Petoj一样在思考同样的问题。 - jpierson

@Petoj，@jpierson：当然你们可以随意使用这段代码。它内置了动画效果，我会采用示例中建议的方法。因为等待外部动画完成听起来像是不必要的复杂性。但如果你真的想要它，你可以让附加属性值更加复杂，并将动画作为其值之一传递...我觉得在这个评论中很难给出完整的解决方案。如果你需要更多帮助，请发一个问题，我会给出更详细的答案：)。 - Anvaka

Answer 1

我也尝试过这个，但失败了。我认为在一个简单的 ControlTemplate 中使用 Visibility 属性的 Trigger 是不可能实现的。你可以在代码后台自己添加一个 DependencyProperty，并将一个 Opacity 动画从 1 到 0 添加到一个不同属性的 Trigger 上。

- Dabblernl

Answer 2

你也可以使用 ObjectAnimationUsingKeyFrames 来设置动画期间的 Visibility。在这种情况下，不需要任何代码后台。

- user10341330

---

我不是100%确定，但如果HideStoryboard更改了Visibility的值，它不会触发ShowStoryboard吗？ - Peter

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>

- Gabriel