WPF UI Freezes when Populating DataGrid

Question

I have a WPF project with a DataGrid that is bound to an Observable Collection. This collection is populated using an async method, when I call this async method an animation with progress ring is shown to the user.

While the collection is waiting for the data everything works without delays, but when the DataGrid is populating itself with the items, the progress ring animation stops working for 1 second or 2 until the DataGrid loads all records (This Collection may have 50,000 records or more). I was just wondering if there is a way to not lock the animation when the DataGrid is populating itself with the information returned from the collection.

The setup is: I have a main Window with a A hidden user control that shows/hides the animation using a a property named IsLoading. When this User Control is visible it locks all user objects behind it.

The Code is

<Grid>
 <local:LoadingOverlayView 
        DataContext="{Binding Assets}"
        d:IsHidden ="True"
        Visibility="{Binding IsLoading, 
        Converter={StaticResource BoolToVisibilityConverter},
                UpdateSourceTrigger=PropertyChanged}"/>
</Grid>

Answer 1

Best way to implement animated progress rings, bars, etc. is to use secondary thread for them. Later to synchronize other threads with ui thread use Dispatcher.Invoke() method.

Answer 2

This means virtualisation of the datagrid is turned off. It's creating all the UI element for all rows. This can have different causes. Most likely because you put the datagrid in a scrollpanel. By doing this it doesn't know how height it is and cant determine the minimal set of rows it has to create UI elements for.

this is good read: https://msdn.microsoft.com/en-us/library/cc716879(v=vs.110).aspx but it can become pretty complex