WPF MVVM应用加载页面实例时更新进度条的实现咨询

核心思路 #

WPF的UI元素必须在STA线程创建，所以Page的实例化不能放到后台线程，但耗时的数据库操作可以剥离到后台执行。通过异步任务+UI线程安全更新的方式，实现进度条逐步反馈加载状态。

具体实现步骤 #

1. 重构Page的初始化逻辑

把Page构造函数中的耗时操作（比如数据库读取）移到单独的异步方法，构造函数只做轻量UI初始化：

Public Class Pg_Customer
    ' 异步初始化方法，处理耗时操作
    Public Async Function InitializeAsync() As Task
        ' 这里执行数据库读取等耗时操作
        Await Task.Run(Sub()
                           ' 模拟数据库查询耗时
                           Thread.Sleep(2000)
                           ' 实际代码：读取并初始化页面数据
                       End Sub)
    End Function

    Public Sub New()
        InitializeComponent()
        ' 仅初始化UI控件，不做任何耗时操作
    End Sub
End Class

2. 在主窗口/ViewModel中实现带进度的加载逻辑

方式一：代码后台直接操作（适合简单场景）

假设主窗口有加载遮罩Grid_LoadingOverlay、进度条ProgressBar_Loading和主FrameFrame_Main：

Private Async Sub LoadCustomerPage()
    ' 显示加载界面
    Grid_LoadingOverlay.Visibility = Visibility.Visible
    ProgressBar_Loading.Value = 0

    Try
        ' 步骤1：创建Page实例（轻量操作，UI线程执行）
        Dim customerPage As New Pg_Customer()
        ProgressBar_Loading.Value = 25

        ' 步骤2：异步执行耗时初始化（后台线程）
        Await customerPage.InitializeAsync()
        ProgressBar_Loading.Value = 75

        ' 步骤3：加载Page到Frame（UI线程）
        Frame_Main.Content = customerPage
        ProgressBar_Loading.Value = 100
    Catch ex As Exception
        MessageBox.Show($"加载失败：{ex.Message}")
    Finally
        ' 隐藏加载界面
        Grid_LoadingOverlay.Visibility = Visibility.Collapsed
    End Try
End Sub

方式二：MVVM模式下的实现（推荐）

用IProgress(Of T)接口传递进度，结合属性绑定更新UI，避免直接操作控件：

Public Class MainViewModel
    Implements INotifyPropertyChanged

    ' 绑定到进度条的属性
    Private _loadingProgress As Integer
    Public Property LoadingProgress As Integer
        Get
            Return _loadingProgress
        End Get
        Set(value As Integer)
            _loadingProgress = value
            OnPropertyChanged(NameOf(LoadingProgress))
        End Set
    End Property

    ' 绑定到Frame的Content属性
    Private _currentPage As Page
    Public Property CurrentPage As Page
        Get
            Return _currentPage
        End Get
        Set(value As Page)
            _currentPage = value
            OnPropertyChanged(NameOf(CurrentPage))
        End Set
    End Property

    ' 加载客户页面的命令
    Public Sub LoadCustomerPage()
        Dim progress As New Progress(Of Integer)(Sub(percent)
                                                    LoadingProgress = percent
                                                End Sub)

        Task.Run(Async Sub()
                     ' 步骤1：准备基础数据
                     Await Task.Delay(1000)
                     progress.Report(25)

                     ' 步骤2：异步读取数据库
                     Await LoadCustomerDataFromDatabase()
                     progress.Report(75)

                     ' 步骤3：回到UI线程创建并加载Page
                     Application.Current.Dispatcher.Invoke(Sub()
                                                              CurrentPage = New Pg_Customer()
                                                          End Sub)

                     progress.Report(100)
                 End Sub)
    End Sub

    ' 模拟数据库读取方法
    Private Async Function LoadCustomerDataFromDatabase() As Task
        Await Task.Run(Sub() Thread.Sleep(2000))
    End Function

    ' INotifyPropertyChanged实现
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
    Private Sub OnPropertyChanged(propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub
End Class

关键注意事项 #

• STA线程限制：Page的实例化必须在UI线程执行，所有UI元素的创建不能放到后台线程。
• 异步任务使用：用Task.Run执行后台耗时操作，Await确保UI线程不会被阻塞。
• 进度更新安全：通过IProgress(Of T)或Dispatcher.Invoke更新UI，避免跨线程访问控件的异常。

内容的提问来源于stack exchange，提问作者CarMaster4451