<Window
    x:Class="WpfDemoApp.PromptPopupBoxCtrls.PopupBoxWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="RootWindow" Title="PopupBoxWindow"
    Width="300" Height="70"
    AllowsTransparency="True" Background="Transparent" MouseLeftButtonUp="PopupBoxWindow_OnMouseLeftButtonUp" ShowActivated="False"
    ShowInTaskbar="False" SnapsToDevicePixels="True" WindowStyle="None"
    mc:Ignorable="d">

    <!--  1. 窗口要设置为透明，PopupBoxWindow_OnMouseLeftButtonUp 中调用 CloseStoryboard 进入关闭流程  -->

    <Window.Resources>
        <!--  loaded 中调用， 动画中设置内容的宽度用来占满整个窗体  -->
        <!--  OpenStoryboard_OnCompleted 中等待 n 秒调用 CloseStoryboard  -->
        <Storyboard x:Key="OpenStoryboard" Completed="OpenStoryboard_OnCompleted">
            <DoubleAnimation
                Storyboard.TargetName="MessageBorder" Storyboard.TargetProperty="Width" From="0"
                To="{Binding ElementName=RootWindow, Path=ActualWidth}"
                Duration="0:0:.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetName="MessageBorder" Storyboard.TargetProperty="Opacity" From="0.1" To="1"
                Duration="0:0:.3" />
        </Storyboard>
        <!--  CloseStoryboard_OnCompleted 中调用 Close  -->
        <Storyboard x:Key="CloseStoryboard" Completed="CloseStoryboard_OnCompleted">
            <DoubleAnimation
                Storyboard.TargetName="MessageBorder" Storyboard.TargetProperty="Width" To="0" Duration="0:0:.3">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetName="MessageBorder" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.3" />
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <!-- 窗口 loaded 时调用显示动画  -->
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource OpenStoryboard}" />
        </EventTrigger>
    </Window.Triggers>

    <!-- 待显示内容靠右，弹出窗口时，再充满窗体显示 -->
    <Border
        x:Name="MessageBorder"
        HorizontalAlignment="Right"
        Background="#ff007acc">
        <TextBlock
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Foreground="White"
            Text="{Binding ElementName=RootWindow, Path=Message, FallbackValue=Hello World!}" />
    </Border>
</Window>