如何在弹出窗口隐藏时添加动画效果？

Question

我为我的Windows 8.1应用程序创建了一个“弹出式样”（Popup Style）。我将“PopupThemeTransition”应用于它的“ChildTransitions”属性。

<Style x:Key="AnimatedPopupStyle" TargetType="Popup">
    <Setter Property="IsLightDismissEnabled" Value="False"/>
    <Setter Property="ChildTransitions">
        <Setter.Value>
            <TransitionCollection>
                <PopupThemeTransition/>
            </TransitionCollection>
        </Setter.Value>
    </Setter>
</Style>

我的问题是当它打开时它会动画效果，但关闭时没有动画效果。怎么做才能在隐藏时为内容添加动画效果？我需要创建一个自定义弹出控件吗？

NB: 我知道有PopInThemeAnimation和PopOutThemeAnimation，但不知道如何在这种情况下使用它们?

- asitis

---

不想使用主题的原因是什么？ - Jerry Nixon

@JerryNixon-MSFT，抱歉，您的意思是什么？ - asitis

Answer 1

由于弹出窗口通常没有退出动画，因此这种功能不是 Popup 控件的本地功能。尽管如此，您仍然可以向 Popup 控件添加退出动画。

请尝试以下操作：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <Storyboard x:Name="ShowPopup">
            <PopInThemeAnimation Storyboard.TargetName="MyPopup" />
        </Storyboard>
        <Storyboard x:Name="HidePopup">
            <PopOutThemeAnimation Storyboard.TargetName="MyPopup" />
        </Storyboard>
    </Grid.Resources>
    <Popup x:Name="MyPopup" IsOpen="True"
           HorizontalAlignment="Center" VerticalAlignment="Center">
        <Popup.Transitions>
            <TransitionCollection>
                <PopupThemeTransition />
            </TransitionCollection>
        </Popup.Transitions>
        <Grid Height="200" Width="200" Background="Red">
            <StackPanel>
                <Button Content="Hide (Native)" HorizontalAlignment="Center">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Core:ChangePropertyAction 
                                PropertyName="IsOpen" 
                                TargetObject="{Binding ElementName=MyPopup}" />
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </Button>
                <Button Content="Hide (Storyboard)" HorizontalAlignment="Center">
                    <Interactivity:Interaction.Behaviors>
                        <Core:EventTriggerBehavior EventName="Click">
                            <Media:ControlStoryboardAction 
                                Storyboard="{StaticResource HidePopup}"/>
                        </Core:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </Button>
            </StackPanel>
        </Grid>
    </Popup>
    <StackPanel>
        <Button Content="Show Popup (Native)" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Click">
                    <Core:ChangePropertyAction 
                        TargetObject="{Binding ElementName=MyPopup}" 
                        PropertyName="IsOpen" Value="True"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </Button>
        <Button Content="Show Popup (Storyboard)" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Click">
                    <Core:ChangePropertyAction 
                        TargetObject="{Binding ElementName=MyPopup}" 
                        PropertyName="IsOpen" Value="True"/>
                    <Media:ControlStoryboardAction 
                        Storyboard="{StaticResource ShowPopup}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </Button>
    </StackPanel>
</Grid>

使用以下内容：

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

祝你好运！

- Jerry Nixon

---

如果你正在使用Storyboard来显示/隐藏某些内容，我建议甚至不要使用Popup。只需使用Grid，这样你就不需要担心IsOpen属性。 - Shawn Kendrot

让我考虑一下，肖恩。弹出窗口的两个核心优点是其能够注入视觉树和处理轻量级退出。由于他已禁用了轻量级退出，唯一的选择就是那个视觉树。那有多难？实际上，这并不是非常容易，但也不是特别难。你的建议很好 - 但是，话虽如此，有什么害处呢？它非常轻便。 - Jerry Nixon

恰好得到了我正在寻找的东西。感谢您的帮助和支持。 - Raghav Narang