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. 视觉效果增强
- 窗口周围添加阴影效果
- 所有元素使用圆角设计
- 按钮添加悬停和点击效果
- 使用半透明层创造深度感
实际应用建议
- 真实加载逻辑：
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();
}
}
- 性能优化：
- 使用异步加载避免UI冻结
- 后台线程执行耗时操作
- 分阶段加载资源
这个实现提供了专业的应用启动体验，确保在加载过程中用户无法与主界面交互，加载完成后通过平滑过渡显示主界面内容。您可以根据实际需求调整加载时间、动画效果和界面设计。
