当前位置：首页 > article >正文

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

article 2025/9/15 11:11:23

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 = "正在准备用户界面...";elseLoadingProgress.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. 视觉效果增强

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

实际应用建议

真实加载逻辑：

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

错误处理：

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