zijiuqizonghejianyanyi/LoadingOverlayWindow.xaml

<Window x:Class="自救器呼吸器综合检验仪.LoadingOverlayWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="#5C0F2238"
        ShowInTaskbar="False"
        ShowActivated="False"
        ResizeMode="NoResize"
        Topmost="False"
        WindowStartupLocation="Manual">
    <Window.Resources>
        <Storyboard x:Key="CardIntroStoryboard">
            <DoubleAnimation Storyboard.TargetName="LoadingCard"
                             Storyboard.TargetProperty="Opacity"
                             From="0"
                             To="1"
                             Duration="0:0:0.18" />
            <DoubleAnimation Storyboard.TargetName="CardTranslate"
                             Storyboard.TargetProperty="Y"
                             From="18"
                             To="0"
                             Duration="0:0:0.18" />
        </Storyboard>

        <Storyboard x:Key="SpinnerStoryboard" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="SpinnerRotate"
                             Storyboard.TargetProperty="Angle"
                             From="0"
                             To="360"
                             Duration="0:0:0.95" />
            <DoubleAnimation Storyboard.TargetName="SpinnerGlowScale"
                             Storyboard.TargetProperty="ScaleX"
                             From="0.88"
                             To="1.08"
                             Duration="0:0:0.65"
                             AutoReverse="True"
                             RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="SpinnerGlowScale"
                             Storyboard.TargetProperty="ScaleY"
                             From="0.88"
                             To="1.08"
                             Duration="0:0:0.65"
                             AutoReverse="True"
                             RepeatBehavior="Forever" />
        </Storyboard>

        <Storyboard x:Key="SubtitlePulseStoryboard" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimation Storyboard.TargetName="SubtitleText"
                             Storyboard.TargetProperty="Opacity"
                             From="0.62"
                             To="1"
                             Duration="0:0:0.8" />
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource CardIntroStoryboard}" />
            <BeginStoryboard Storyboard="{StaticResource SpinnerStoryboard}" />
            <BeginStoryboard Storyboard="{StaticResource SubtitlePulseStoryboard}" />
        </EventTrigger>
    </Window.Triggers>

    <Grid IsHitTestVisible="False">
        <Border x:Name="LoadingCard"
                Width="390"
                Padding="32"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                CornerRadius="18"
                Background="#F7FAFD"
                BorderBrush="#CFE0F1"
                BorderThickness="1"
                Opacity="0">
            <Border.Effect>
                <DropShadowEffect BlurRadius="28"
                                  Opacity="0.24"
                                  ShadowDepth="0"
                                  Color="#0F2238" />
            </Border.Effect>
            <Border.RenderTransform>
                <TranslateTransform x:Name="CardTranslate" Y="18" />
            </Border.RenderTransform>

            <StackPanel>
                <Border HorizontalAlignment="Center"
                        Margin="0,0,0,14"
                        Padding="12,5"
                        CornerRadius="999"
                        Background="#E6F0FA">
                    <TextBlock Text="页面切换中"
                               FontSize="12"
                               FontWeight="SemiBold"
                               Foreground="#245E95" />
                </Border>

                <Grid Width="92"
                      Height="92"
                      Margin="0,0,0,20"
                      HorizontalAlignment="Center">
                    <Ellipse Width="92"
                             Height="92"
                             Fill="#EAF2FB" />
                    <Ellipse Width="72"
                             Height="72"
                             Fill="#F7FAFD">
                        <Ellipse.Effect>
                            <DropShadowEffect BlurRadius="16"
                                              Opacity="0.12"
                                              ShadowDepth="0"
                                              Color="#2A7FD1" />
                        </Ellipse.Effect>
                    </Ellipse>
                    <Canvas Width="56"
                            Height="56"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            RenderTransformOrigin="0.5,0.5">
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="SpinnerRotate" />
                        </Canvas.RenderTransform>
                        <Canvas.Effect>
                            <DropShadowEffect BlurRadius="10"
                                              Opacity="0.26"
                                              ShadowDepth="0"
                                              Color="#2A7FD1" />
                        </Canvas.Effect>
                        <Canvas.LayoutTransform>
                            <ScaleTransform x:Name="SpinnerGlowScale" />
                        </Canvas.LayoutTransform>

                        <Ellipse Width="12" Height="12" Fill="#2A7FD1" Canvas.Left="22" Canvas.Top="0" />
                        <Ellipse Width="10" Height="10" Fill="#4F98DE" Canvas.Left="39" Canvas.Top="7" />
                        <Ellipse Width="8" Height="8" Fill="#76B0E8" Canvas.Left="48" Canvas.Top="23" />
                        <Ellipse Width="7" Height="7" Fill="#A8D1F4" Canvas.Left="43" Canvas.Top="40" />
                        <Ellipse Width="6" Height="6" Fill="#D3E8FA" Canvas.Left="25" Canvas.Top="49" />
                        <Ellipse Width="7" Height="7" Fill="#9BC9F0" Canvas.Left="9" Canvas.Top="42" />
                        <Ellipse Width="8" Height="8" Fill="#69A8E4" Canvas.Left="1" Canvas.Top="24" />
                        <Ellipse Width="10" Height="10" Fill="#3B8BD7" Canvas.Left="8" Canvas.Top="7" />
                    </Canvas>
                </Grid>

                <TextBlock x:Name="TitleText"
                           Text="正在切换检测页面"
                           FontSize="26"
                           FontWeight="Bold"
                           Foreground="#17324D"
                           HorizontalAlignment="Center"
                           TextAlignment="Center"
                           TextWrapping="Wrap" />
                <TextBlock x:Name="SubtitleText"
                           Text="正在打开检测页面，请稍候..."
                           Margin="0,10,0,6"
                           FontSize="14"
                           Foreground="#4C637A"
                           HorizontalAlignment="Center"
                           TextAlignment="Center"
                           TextWrapping="Wrap" />
                <TextBlock x:Name="HintText"
                           Text="系统正在加载界面资源并同步设备状态，请稍候..."
                           Margin="0,0,0,18"
                           FontSize="12"
                           Foreground="#6B7F93"
                           HorizontalAlignment="Center"
                           TextAlignment="Center"
                           TextWrapping="Wrap" />

                <Border Height="8"
                        CornerRadius="999"
                        Background="#DCE8F4">
                    <Grid Width="110"
                          HorizontalAlignment="Left">
                        <Rectangle RadiusX="999"
                                   RadiusY="999"
                                   Fill="#2A7FD1" />
                        <Rectangle Margin="12,0"
                                   RadiusX="999"
                                   RadiusY="999"
                                   Fill="#72B1EA"
                                   Opacity="0.68" />
                    </Grid>
                </Border>
            </StackPanel>
        </Border>
    </Grid>
</Window>