vb.Net: Creating UI in a BackgroundWorker

Question

I'm working on an application to be able to monitor production information on a 3x3 (so 9 screen) video wall. One of the screen sets that I'm working on right now retrieves information and then formats for display on the screen. It takes about 2 seconds to retrieve and format this data (just a rough guess, not actually measured). Because it does 9 screen, one after the other, there is a very noticeable amount of time to switch to this screen set. The PC driving this video wall has 8 processing cores, so while one processor is chugging away doing all this work, there's plenty of processing power just sitting idle.

My first thought is that I need to use multi-threading. Unfortunately, I'm very new to this concept. I really have only used it one other time. I tried creating a BackgroundWorker and having the DoWork routine generate my UI. Unfortunately, it crashes the first time I try to create a UI element (Dim grLine as New Grid). I did manage to get around that by having a dummy DoWork routine and generating all my UI in the RunWorkerCompleted routine. This does allow my blank window to show up immediately, but none of the UI I'm generating shows up until it has all been rendered.

Here's a very cleaned up version of what I'm trying to do:

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

The MyCustomWindow 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)
        ' 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

I tried to leave enough detail in the code so hopefully it'll be evident what I'm trying to accomplish, but keeping it small enough to not be overwhelming.

Edited to add:
The bulk of the work happens in MyCustomControl.GetData(id) ... that Sub downloads the data from a web server (in JSON format), parses the JSON, then generates the rows (3) and columns (30 or 31, depending on the month) for the Grid and fills in the data it received from the web server.

Answer 1

For what it's worth, here are a few examples which do 9 x 500ms of data operations, then simple UI operation.

The first example runs on a background thread but the main loop runs in sequence. The messagebox at the end shows that it takes around 4500 ms because of the 500 ms thread sleep is run sequentially. Notice how the DoWork method has nothing to do with the UI. It uses two threads: the UI thread and one background worker. Since it's not doing work on the UI, the form is responsive while the background worker is working.

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

(This is the class which holds the result of the background worker)

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

The second example runs on a background thread but the main loop runs in parallel. The messagebox at the end shows that it takes around 1000 ms ... why? Because my machine like yours has 8 logical cores but we are sleeping 9 times. So at least one core is doing two sleeps and this will gate the entire operation. Again, there is one thread for the UI, one for the background worker, but for the parallel loop, the OS will allocate CPU time from the remaining cores to each additional thread. The UI is responsive and it takes a fraction of the time of the first example to do the same thing

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

Since the above two examples utilize background workers to do their work, they will not freeze the UI thread. The only code running on the UI is in the button click handlers and the RunWorkerCompleted handler.

Lastly, this example uses only a single UI thread. It will freeze the UI while it's running for 4500 seconds. Just so you know what to avoid...

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

Summarily, you should figure out how to separate the data layer from the UI. See separation of concerns and the SO question, Why is good UI design so hard for some Developers?, and this one What UI design principles like “separation of concerns” can I use to convince developers that the UI needs fixing?

Answer 2

Your current BackgroundWorker implementation give you no benefits, as you noticed by your self.
Your main problem is that your current code/logic tightly depend on UI controls. Which strict you with UI thread. Because creating/updating UI controls can be done only on UI thread - that's why you got Exception when trying create/update UI controls in BackgroundWorker.DoWork handler.

Suggest to separate logic which retrieve monitoring information in parallel and then you can create/update control on UI with already formatted data.

This is raw/pseudo example

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

Update on Sub downloads the data from a web server
In this case you don't need multi-threading/parallel at all. Because you loading time is waiting time for response. In this case my advice will be using async/await approach, which will release UI thread(make it responsive) while you waiting for response from web-service.

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

Then in the view you don't need 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