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

iklwldmw  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(179)

正在寻找关于如何动画化弹出窗口的入口/出口的帮助。还没有找到任何具体使用StoryBoard的例子--有人知道吗?
我发现了这个问题:Can't get any Transitions to work with Popup in UWP。其中的答案链接到一些有趣的文章,这导致Animating pop-up UI。有一个“XAML个性动画示例”的链接,它展示了如何使用StoryBoard来定制动画,但看起来该示例不见了。

cbjzeqam

cbjzeqam1#

您提到的示例是Windows 8示例。您现在可以在此处找到它:XAML personality animations sample
如果你想动画化PopUp,你需要在PopUp的资源中添加PopInThemeAnimationPopOutThemeAnimation。然后在你显示PopUp时调用动画开始。我已经做了一个简单的演示。

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

相关问题