UWP中Popup控件的打开与关闭动画实现求助

核心思路 #

Popup控件本身不支持内置过渡动画，需要通过绑定IsOpen属性触发StoryBoard动画，且动画目标需指向Popup的子内容容器（而非Popup本身，因其特殊布局容器属性直接动画可能失效）。

完整XAML示例 #

以下是包含淡入缩放进入、淡出缩放退出效果的实现代码：

<Grid>
    <!-- 触发弹窗的按钮 -->
    <Button x:Name="OpenPopupBtn" Content="打开弹窗" Click="OpenPopupBtn_Click"/>

    <!-- 带动画的Popup -->
    <Popup x:Name="AnimatedPopup" IsOpen="False"
           HorizontalOffset="100" VerticalOffset="100">
        <Popup.Resources>
            <!-- 进入动画：淡入+中心缩放 -->
            <Storyboard x:Name="PopupEnterStoryboard">
                <DoubleAnimation Storyboard.TargetName="PopupContent"
                                 Storyboard.TargetProperty="Opacity"
                                 From="0" To="1" Duration="0:0:0.3"/>
                <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                 Storyboard.TargetProperty="ScaleX"
                                 From="0.8" To="1" Duration="0:0:0.3"/>
                <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                 Storyboard.TargetProperty="ScaleY"
                                 From="0.8" To="1" Duration="0:0:0.3"/>
            </Storyboard>

            <!-- 退出动画：淡出+缩小 -->
            <Storyboard x:Name="PopupExitStoryboard" Completed="PopupExitStoryboard_Completed">
                <DoubleAnimation Storyboard.TargetName="PopupContent"
                                 Storyboard.TargetProperty="Opacity"
                                 From="1" To="0" Duration="0:0:0.25"/>
                <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                 Storyboard.TargetProperty="ScaleX"
                                 From="1" To="0.8" Duration="0:0:0.25"/>
                <DoubleAnimation Storyboard.TargetName="ScaleTransform"
                                 Storyboard.TargetProperty="ScaleY"
                                 From="1" To="0.8" Duration="0:0:0.25"/>
            </Storyboard>
        </Popup.Resources>

        <!-- Popup实际内容容器 -->
        <Grid x:Name="PopupContent" Width="300" Height="200" Background="White" CornerRadius="8">
            <Grid.RenderTransform>
                <ScaleTransform x:Name="ScaleTransform" CenterX="150" CenterY="100"/>
            </Grid.RenderTransform>
            <TextBlock Text="带动画的弹窗内容" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Button x:Name="ClosePopupBtn" Content="关闭" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Click="ClosePopupBtn_Click"/>
        </Grid>
    </Popup>
</Grid>

后台逻辑实现 #

需在按钮点击事件中控制动画播放，注意退出动画完成后再关闭Popup：

private void OpenPopupBtn_Click(object sender, RoutedEventArgs e)
{
    AnimatedPopup.IsOpen = true;
    PopupEnterStoryboard.Begin();
}

private void ClosePopupBtn_Click(object sender, RoutedEventArgs e)
{
    PopupExitStoryboard.Begin();
}

private void PopupExitStoryboard_Completed(object sender, object e)
{
    AnimatedPopup.IsOpen = false;
}

关键注意点 #

• 动画必须绑定到Popup的子元素（如示例中的PopupContent），直接对Popup设置动画大概率无效。
• 退出动画需在Completed事件中设置IsOpen=false，否则会直接关闭弹窗，无法展示退出动画。
• 可根据需求修改动画时长、起始值，或添加平移、旋转等其他动画效果。

内容的提问来源于stack exchange，提问作者dex3703