UWP - 动画弹出窗口打开和关闭

Question

寻求有关如何为弹出窗口的入口/出口设置动画的帮助。 还没有找到任何特定于使用 StoryBoard 的示例——有人知道吗？

我发现了这个问题： Can't get any Transitions to work with Popup in UWP 。 那里的答案链接到一些有趣的文章，这些文章会导致Animating pop-up UI 。 有一个指向“XAML 个性动画示例”的链接，它显示了如何使用 StoryBoard 来自定义 animation，但看起来该示例已经消失了。

Answer 1

您提到的示例是 Windows 8 示例。 您现在可以在这里找到它： XAML 个性动画示例。

如果要对 PopUp 进行动画处理，则需要在 PopUp 的资源中添加PopInThemeAnimation和PopOutThemeAnimation 。 然后在显示 PopUp 时调用 animation 开始。 我对此做了一个简单的演示。

XAML：

    <Grid>
    <StackPanel>
        <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked" ToolTipService.ToolTip="Simple ToolTip"/>
    </StackPanel>
    
    <Popup VerticalOffset="100" HorizontalOffset="100" x:Name="StandardPopup">
        <!--add the animataion for PopUp-->
        <Popup.Resources>
            <Storyboard x:Name="PopInStoryboard">
                <PopInThemeAnimation  Storyboard.TargetName="StandardPopup" FromHorizontalOffset="500"/>
            </Storyboard>
            <Storyboard x:Name="PopOutStoryboard">
                <PopOutThemeAnimation  Storyboard.TargetName="StandardPopup" />
            </Storyboard>
        </Popup.Resources>
        
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" 
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            BorderThickness="2" Width="200" Height="200">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
                <Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
            </StackPanel>
        </Border>
    </Popup>
    
</Grid>

代码隐藏：

 private void ClosePopupClicked(object sender, RoutedEventArgs e)
    {
        //disappear
        PopOutStoryboard.Begin();
    }

    // Handles the Click event on the Button on the page and opens the Popup. 
    private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
    {
        PopInStoryboard.Begin();
        // open the Popup if it isn't open already 
        if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
    }