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();}
}
- 性能優化：
- 使用異步加載避免UI凍結
- 后臺線程執行耗時操作
- 分階段加載資源
這個實現提供了專業的應用啟動體驗，確保在加載過程中用戶無法與主界面交互，加載完成后通過平滑過渡顯示主界面內容。您可以根據實際需求調整加載時間、動畫效果和界面設計。
