vb.Net：在BackgroundWorker中創建UI

Question

我正在研究一個應用程序，以便能夠監視3x3（如此9屏幕）視頻牆上的生產信息。我正在處理的屏幕集之一現在檢索信息，然後在屏幕上顯示格式。它需要大約2秒鐘來檢索和格式化這些數據（只是粗略的猜測，而不是實際測量）。因爲它一個接一個地顯示9個屏幕，所以切換到這個屏幕集有非常明顯的時間。驅動這個視頻牆的個人電腦有8個處理核心，所以儘管一個處理器正在努力完成所有這些工作，但仍有大量處理能力處於閒置狀態。

我的第一個想法是我需要使用多線程。不幸的是，我對這個概念很陌生。我真的只用過一次。我試着創建一個BackgroundWorker並讓DoWork例程生成我的UI。不幸的是，它第一次嘗試創建UI元素時崩潰（Dim grLine as New Grid）。我確實設法通過虛擬DoWork例程並在RunWorkerCompleted例程中生成所有我的UI。這確實可以讓我的空白窗口立即顯示出來，但是我所生成的所有用戶界面都沒有顯示出來，直到它全部呈現完畢。

這裏是什麼，我試圖做一個非常清理版本：

For i As Integer = 1 to 9 
    Dim win As New MyCustomWindow 
    win.DisplayScreen = i ' This function in MyCustomWindow sets the Bounds 
    win.MyShow({1, 2}) ' Sample args 
    Globals.VideoWall.Windows(i) = win 
Next 

的MyCustomWindow類：

Class MyCustomWindow 

    Public Sub MyShow(a() as Integer) 
     Me.Show() ' Has a "Loading..." TextBlock 
     Dim bw as New ComponentModel.BackgroundWorker 
     AddHandler bw.DoWork, AddressOf Generate_UI_DoWork 
     AddHandler bw.RunWorkerCompleted, AddressOf Generate_UI_Complete 
     bw.RunWorkerAsync(a) 
    End Sub 

    Private Sub Generate_UI_DoWork((sender As Object, e As ComponentModel.DoWorkEventArgs) 
     ' Pass our arguments to the Complete routine. 
     e.Result = e.Argument 
    End Sub 

    Private Sub Generate_OpsMarket_Complete(sender As Object, e As ComponentModel.RunWorkerCompletedEventArgs) 
     Dim IDs() as Integer 
     IDs = e.Result 

     Dim grLine As New Grid ' We crash here if this code is in DoWork instead of RunWorkerCompleted 
     For Each id As Integer In IDs 
      grLine.RowDefinitions.Add(New RowDefinition) 
      Dim txt as New TextBlock ' For a header 
      grLine.Children.Add(txt) 

      grLine.RowDefinitions.Add(New RowDefinition) 
      Dim MyCtrl as New MyCustomControl() 
      MyCustomControl.GetData(id) 
      grLine.Children.Add(MyCtrl.MyGrid) 

      txt.Text = MyCtrl.Header 
     Next 

     txLoading.Visibility = Visibility.Hidden 
     grRoot.Children.Add(grLine) 
    End Sub 
End Class 

我試圖在代碼中留下足夠的細節，所以希望它」我將會明白我正在努力完成什麼，但保持足夠小以至於不會讓人無法抗拒。

編輯補充：
的大部分工作發生在MyCustomControl.GetData(id) ...該子下載從web服務器的數據（JSON格式），解析JSON，然後生成的行（3）和列（30或31，取決於月份），並填寫從Web服務器收到的數據。

Answer 1

對於它的價值，這是一些做9×500ms的數據操作，那麼簡單的UI操作的幾個例子。

第一個示例在後臺線程上運行，但主循環按順序運行。最後的消息框顯示它需要大約4500毫秒，因爲500毫秒的線程睡眠按順序運行。注意DoWork方法與UI無關。它使用兩個線程：UI線程和一個後臺工作者。由於它沒有在UI上進行工作，因此該表單在後臺工作人員工作時具有響應性。

Private bw_single As New BackgroundWorker() 

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click 
    AddHandler bw_single.DoWork, AddressOf bw_single_DoWork 
    AddHandler bw_single.RunWorkerCompleted, AddressOf bw_single_Complete 
    bw_single.RunWorkerAsync() 
End Sub 

Private Sub bw_single_DoWork(sender As Object, e As DoWorkEventArgs) 
    ' runs on background thread 
    Dim data As New List(Of Integer)() 
    Dim sw As New Stopwatch 
    sw.Start() 
    For i As Integer = 1 To 9 
     ' simulate downloading data, etc. 
     Threading.Thread.Sleep(500) 
     data.Add(i) 
    Next 
    sw.Stop() 
    e.Result = New Result(data, sw.ElapsedMilliseconds) 
End Sub 

Private Sub bw_single_Complete(sender As Object, e As RunWorkerCompletedEventArgs) 
    RemoveHandler bw_single.DoWork, AddressOf bw_single_DoWork 
    RemoveHandler bw_single.RunWorkerCompleted, AddressOf bw_single_Complete 
    ' runs on UI thread 
    Dim res = CType(e.Result, Result) 
    Me.DataGridView1.DataSource = res.Data 
    MessageBox.Show(
     String.Format("Performed on bw (single), took {0} ms, data: {1}", 
         res.Elapsed, String.Join(", ", res.Data))) 
End Sub 

（這是其保持背景工人的結果類）

Private Class Result 
    Public Property Data As IEnumerable(Of Integer) 
    Public Property Elapsed As Long 
    Public Sub New(data As IEnumerable(Of Integer), elapsed As Long) 
     Me.Data = data 
     Me.Elapsed = elapsed 
    End Sub 
End Class 

第二個例子在後臺線程運行，但主循環中並行運行。最後的消息框顯示它大約需要1000毫秒......爲什麼？因爲我的機器有8個邏輯核心，但我們正在睡9次。所以至少有一個核心在做兩次睡眠，這將關閉整個操作。同樣，UI有一個線程，一個用於後臺工作者，但對於並行循環，操作系統將從其餘核心向每個附加線程分配CPU時間。該UI響應，它需要的第一個例子中的一小部分時間做同樣的事情

Private bw_multi As New BackgroundWorker() 

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click 
    AddHandler bw_multi.DoWork, AddressOf bw_multi_DoWork 
    AddHandler bw_multi.RunWorkerCompleted, AddressOf bw_multi_Complete 
    bw_multi.RunWorkerAsync() 
End Sub 

Private Sub bw_multi_DoWork(sender As Object, e As DoWorkEventArgs) 
    ' runs on background thread 
    Dim data As New ConcurrentBag(Of Integer)() 
    Dim sw As New Stopwatch 
    sw.Start() 
    Parallel.For(1, 9, 
    Sub(i) 
     data.Add(i) 
     Threading.Thread.Sleep(500) 
    End Sub) 
    sw.Stop() 
    e.Result = New Result(data, sw.ElapsedMilliseconds) 
End Sub 

Private Sub bw_multi_Complete(sender As Object, e As RunWorkerCompletedEventArgs) 
    RemoveHandler bw_multi.DoWork, AddressOf bw_multi_DoWork 
    RemoveHandler bw_multi.RunWorkerCompleted, AddressOf bw_multi_Complete 
    ' runs on UI thread 
    Dim res = CType(e.Result, Result) 
    Me.DataGridView1.DataSource = res.Data 
    MessageBox.Show(
     String.Format("Performed on bw (multi), took {0} ms, data: {1}", 
         res.Elapsed, String.Join(", ", res.Data))) 
End Sub 

由於上述兩個例子利用後臺工作人員做他們的工作，他們不會凍結UI線程。在UI上運行的唯一代碼是按鈕單擊處理程序和RunWorkerCompleted處理程序。

最後，這個例子只使用一個UI線程。它會在用戶界面運行4500秒時凍結用戶界面。只是讓你知道該怎麼避...

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click 
    Dim data As New List(Of Integer)() 
    Dim sw As New Stopwatch 
    sw.Start() 
    For i As Integer = 1 To 9 
     ' simulate downloading data, etc. 
     Threading.Thread.Sleep(500) 
     data.Add(i) 
    Next 
    sw.Stop() 
    Dim res = New Result(data, sw.ElapsedMilliseconds) 
    Me.DataGridView1.DataSource = res.Data 
    MessageBox.Show(
     String.Format("Performed on bw (single), took {0} ms, data: {1}", 
         res.Elapsed, String.Join(", ", res.Data))) 
End Sub 

總而言之，你應該弄清楚如何從UI分離數據層。請參閱separation of concerns和SO問題，Why is good UI design so hard for some Developers?和這一個What UI design principles like 「separation of concerns」 can I use to convince developers that the UI needs fixing?

Answer 2

您的當前BackgroundWorker實施給你沒有任何好處，正如你注意到你的自我。
您的主要問題是您的當前代碼/邏輯嚴重依賴於UI控件。你用UI線程嚴格你。因爲創建/更新UI控件只能在UI線程上完成 - 這就是爲什麼在嘗試創建/更新BackgroundWorker.DoWork處理程序中的UI控件時收到Exception。

建議將並行檢索監視信息的邏輯分開，然後您可以使用已格式化的數據在UI上創建/更新控制。

這是原始/僞例如在次下載從Web服務器
數據

Class DataService 
    Public Function GetData(ids As Integer()) As YourData 
     ' Get data from web service 
     ' Validate and Format it to YourData type or List(Of Yourdata) 
     Return data 
    End Function 
End Class 

Class MyCustomWindow 

    Public Sub MyShow(a() as Integer) 
     Me.Show() ' Has a "Loading..." TextBlock 
     Dim bw as New ComponentModel.BackgroundWorker 
     AddHandler bw.DoWork, AddressOf Generate_UI_DoWork 
     AddHandler bw.RunWorkerCompleted, AddressOf Generate_UI_Complete 
     bw.RunWorkerAsync(a) 
    End Sub 

    Private Sub Generate_UI_DoWork((sender As Object, e As ComponentModel.DoWorkEventArgs) 
     Dim service As New DataService() 
     Dim data = service.GetData(e.Argument) 
     e.Result = data 
    End Sub 

    Private Sub Generate_OpsMarket_Complete(sender As Object, 
             e As ComponentModel.RunWorkerCompletedEventArgs) 

    Dim data As Yourdata = DirectCast(e.Result, YourData)  
    'Update UI controls with already formatted data 

    End Sub 
End Class 

更新在這種情況下，你不需要多線程/並行的。因爲你加載時間正在等待響應時間。在這種情況下，我的建議將使用async/await的方法，它將在等待Web服務響應時釋放UI線程（使其響應）。

Class DataService 
    Public Async Function GetDataAsync(ids As Integer()) As Task(Of YourData) 
     Using client As HttpClient = New HttpClient() 
      Dim response As HttpResponseMessage = Await client.GetAsync(yourUrl) 
      If response.IsSuccessStatusCode = True Then 
       Return Await response.Content.ReadAsAsync<YourData>() 
      End If 
     End Using 
    End Function 
End Class 

然後在視圖中，您不需要BackgroundWorker

Class MyCustomWindow 

    Public Async Sub MyShow(a() as Integer) As Task 
     Me.Show() ' Has a "Loading..." TextBlock 

     Dim service As New DataService() 
     Dim data As YourData = Await service.GetDataAsync(a) 
     UpdateControlsWithData(data) 
    End Sub 

    Private Sub UpdateControlsWithData(data As YourData) 
     ' Update controls with received data 
    End Sub 
End Class