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