WPF 全局加载界面、多界面实现渐变过渡效果

WPF 全局加载界面与渐变过渡效果

完整实现方案

MainWindow.xaml

<Window x:Class="LoadingScreenDemo.MainWindow"
        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"
        xmlns:local="clr-namespace:LoadingScreenDemo"
        mc:Ignorable="d"
        WindowStyle="None"
        AllowsTransparency="True"
        WindowState="Maximized"
        Background="Transparent"
        Loaded="Window_Loaded">
    
    <!-- 窗口阴影效果 -->
    <Border Margin="20" CornerRadius="10">
      
        <Grid>
            <!-- 黑色加载覆盖层（初始显示） -->
            <Grid x:Name="LoadingOverlay" 
                  Background="#FF0A0A0A"
                  Opacity="1"
                  Panel.ZIndex="100"
                  IsHitTestVisible="True">
                
                <!-- 加载动画 -->
                <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                        <!-- 加载进度条 -->
                        <ProgressBar x:Name="LoadingProgress" 
                                     Width="400" 
                                     Height="20" 
                                     Margin="0,0,0,20"
                                     IsIndeterminate="True"
                                     Foreground="#FF4A90E2"
                                     Style="{StaticResource ModernProgressBar}"/>
                        
                        <!-- 加载文本 -->
                        <TextBlock Text="正在初始化应用程序..." 
                                   HorizontalAlignment="Center"
                                   Foreground="#CCFFFFFF"
                                   FontSize="18"
                                   FontWeight="SemiBold"/>
                        
                        <!-- 加载提示 -->
                        <TextBlock Text="请稍候，正在准备您的体验" 
                                   HorizontalAlignment="Center"
                                   Margin="0,10,0,0"
                                   Foreground="#99FFFFFF"
                                   FontSize="14"/>
                    </StackPanel>
                    
           
                </Grid>
            </Grid>
            
            <!-- 主内容区域（初始隐藏） -->
            <Grid x:Name="MainContent" Opacity="0" Panel.ZIndex="0">
                <!-- 背景图片 -->
                <Grid.Background>
                    <ImageBrush ImageSource="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
                                Stretch="UniformToFill" 
                                Opacity="0.9"/>
                </Grid.Background>
                
                <!-- 半透明覆盖层 -->
                <Rectangle Fill="#80111111"/>
                
                <!-- 主界面内容 -->
                <Grid Margin="30">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    
                    <!-- 主内容区 -->
                    <Border Grid.Row="1" Background="#20000000" Padding="20">

                    </Border>
                </Grid>
    </Border>
</Window>

MainWindow.xaml.cs

using System.Windows;
using System.Windows.Media.Animation;
using System.Threading.Tasks;

namespace LoadingScreenDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
			this.Loaded += Window_Loaded;
        }

        private async void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // 模拟应用程序初始化过程
            await SimulateLoadingAsync();
            
            // 加载完成后显示主界面
            ShowMainContent();
        }

        private async Task SimulateLoadingAsync()
        {
            // 模拟加载进度
            for (int i = 0; i < 100; i++)
            {
                await Task.Delay(30); // 模拟耗时操作
                
                // 更新进度（实际应用中替换为真实进度）
                if (i % 10 == 0)
                {
                    // 更新加载提示文本
                    if (i < 30)
                        LoadingProgress.ToolTip = "正在初始化核心模块...";
                    else if (i < 60)
                        LoadingProgress.ToolTip = "正在加载用户数据...";
                    else if (i < 90)
                        LoadingProgress.ToolTip = "正在准备用户界面...";
                    else
                        LoadingProgress.ToolTip = "完成初始化...";
                }
            }
        }

        private void ShowMainContent()
        {
            // 创建动画
            var fadeInAnimation = new DoubleAnimation
            {
                From = 0,
                To = 1,
                Duration = TimeSpan.FromSeconds(1.5),
                EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut }
            };

            var fadeOutAnimation = new DoubleAnimation
            {
                From = 1,
                To = 0,
                Duration = TimeSpan.FromSeconds(1),
                EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut }
            };

            // 动画完成后移除加载层
            fadeOutAnimation.Completed += (s, args) => 
            {
                LoadingOverlay.Visibility = Visibility.Collapsed;
                LoadingOverlay.IsHitTestVisible = false; // 允许与主内容交互
            };

            // 启动动画
            MainContent.BeginAnimation(UIElement.OpacityProperty, fadeInAnimation);
            LoadingOverlay.BeginAnimation(UIElement.OpacityProperty, fadeOutAnimation);
        }

        private void MinimizeButton_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = WindowState.Minimized;
        }

        private void MaximizeButton_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = this.WindowState == WindowState.Maximized 
                ? WindowState.Normal 
                : WindowState.Maximized;
        }

        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}

实现要点说明

1. 全局黑屏加载效果

• 使用 LoadingOverlay 网格覆盖整个窗口
• Panel.ZIndex="100" 确保加载层在最上方
• IsHitTestVisible="True" 阻止用户与下层内容交互
• 黑色背景 (#FF0A0A0A) 提供沉浸式加载体验

2. 加载进度指示器

• 使用 ProgressBar 显示加载进度（设置为不确定模式）
• 添加加载状态文本提示
• 自定义进度条样式使其更现代化

3. 渐变显示主界面

• 使用 DoubleAnimation 创建透明度渐变动画
• 加载层淡出 (Opacity 1 → 0)
• 主内容淡入 (Opacity 0 → 1)
• 使用 CubicEase 缓动函数实现平滑过渡

4. 加载期间禁用交互

• 设置 LoadingOverlay.IsHitTestVisible="True" 捕获所有输入事件
• 动画完成后设置 IsHitTestVisible="False" 恢复交互

5. 主界面设计

• 添加专业背景图片
• 使用半透明覆盖层提升文字可读性
• 实现自定义标题栏（最小化/最大化/关闭按钮）
• 添加导航菜单和内容区域
• 底部状态栏显示应用信息

6. 视觉效果增强

• 窗口周围添加阴影效果
• 所有元素使用圆角设计
• 按钮添加悬停和点击效果
• 使用半透明层创造深度感

实际应用建议

1. 真实加载逻辑：

private async Task RealLoadingAsync()
{
    // 1. 初始化核心模块
    await InitializeCoreModules();
    UpdateLoadingText("核心模块初始化完成...");
    
    // 2. 加载配置数据
    await LoadConfiguration();
    UpdateLoadingText("配置加载完成...");
    
    // 3. 连接数据库/服务
    await ConnectToServices();
    UpdateLoadingText("服务连接成功...");
    
    // 4. 准备用户界面
    await PrepareUserInterface();
    UpdateLoadingText("界面准备就绪...");
}

private void UpdateLoadingText(string message)
{
    Dispatcher.Invoke(() => {
        LoadingProgress.ToolTip = message;
    });
}

2. 错误处理：

private async void Window_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        await RealLoadingAsync();
        ShowMainContent();
    }
    catch (Exception ex)
    {
        // 显示错误信息
        ShowErrorDialog("初始化失败", ex.Message);
        
        // 退出应用
        Application.Current.Shutdown();
    }
}

3. 性能优化：

• 使用异步加载避免UI冻结
• 后台线程执行耗时操作
• 分阶段加载资源

这个实现提供了专业的应用启动体验，确保在加载过程中用户无法与主界面交互，加载完成后通过平滑过渡显示主界面内容。您可以根据实际需求调整加载时间、动画效果和界面设计。