UWP UI freezes when reads a file

Question

I'm creating an desktop application with UWP and C#. Basically, I want to read and elaborate an Excel file. During the elaboration of this file, I want to display in the UI a progress bar and a text message. For that, I update the property in the view model: for example for the message the code is:

private string _message;

public string Message
{
    get { return _message; }
    set
    {
        if (_message != value)
        {
            _message = value;
            OnPropertyChanged(nameof(Message));
        }
    }
}

So, in the view model I have the function to read and elaborate the file.

public async Task DecodeFile()
{
    ImportExcel excel = new ImportExcel();
    excel.ReadCompleted += Excel_ReadCompleted;
    excel.ReadHeader += Excel_ReadHeader;
    excel.UpdatedRow += Excel_UpdatedRow;

    await excel.ReadToGrid(FileName);
}

If I use the function as it is, the UI is freezing when it executes this code. Then, I tried to change the last line with

await System.Threading.Tasks.Task.Run(() => excel.ReadToGrid(FileName));

but in this case I have another kind of error.

What is the best/correct practice to resolve this issue?

Update

The function ReadToGrid is part of a class called ImportExcel and it reads the Excel file with SpreadsheetDocument using the package DocumentFormat.OpenXml.Spreadsheet. In this class there are few events defined like

public event EventHandler<UpdatedRowEventArgs> UpdatedRow;
protected virtual void OnUpdatedRow(UpdatedRowEventArgs e)
{
    EventHandler<UpdatedRowEventArgs> handler = UpdatedRow;
    if (handler != null) handler(this, e);
}

I create an instance of this class in the view model. When an event is raised, the view model updates a property. For example, when it reads a new row of the Excel file, UpdateRow is raised and the view model updates the property CurrentRow related to the Value in the ProgressBar

private void Excel_UpdatedRow(object sender, UpdatedRowEventArgs e)
{
    CurrentRow = e.CurrentRow;
    Message = $"Read record {e.CurrentRow}/{e.TotalRows}";
}

In the same event, I change the property Message. None of them are changing in the UI. The UI is completely freezed.

Update 2

I tried to change the OnPropertyChanged but the UI is still freezed

public event PropertyChangedEventHandler PropertyChanged;

private async void OnPropertyChanged(string propertyName)
{
    PropertyChangedEventArgs e = new PropertyChangedEventArgs(propertyName);
    await Window.Current.Dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
        {
            PropertyChanged?.Invoke(this, 
                 new PropertyChangedEventArgs(propertyName));
        });
}

Update 4

I have published the full source code on GitHub.

Update 5 - Fix the issue

I have fixed the problem. I removed the call to ReadToGrid from the UI and moved in the view model. I removed all the code behind and replaced it with properties in the view model. Added everywhere

CoreDispatcher dispatcher = CoreApplication.MainView?.CoreWindow?.Dispatcher;
await dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
});

and I changed OnPropertyChanged

public event PropertyChangedEventHandler PropertyChanged;

protected async void OnPropertyChanged(string propertyName)
{
    PropertyChangedEventArgs e = new PropertyChangedEventArgs(propertyName);

    await dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
    {
        PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(propertyName));
    });
}

For future reference or if someone else has the same issue, the full source code is on GitHub.

Answer 1

UWP UI freezes when reads a file

The problem is you read the file in the UI thread that freezes the UI, for solve this problem you could use task to call ReadToGrid method, then go back to UI thread when Excel_ReadCompleted event like the following.

public async Task DecodeFile()
{

    await Task.Run(async () =>
    {
        ImportExcel excel = new ImportExcel();
        excel.ReadCompleted += Excel_ReadCompleted;
        excel.ReadHeader += Excel_ReadHeader;
        excel.UpdatedRow += Excel_UpdatedRow;
        await excel.ReadToGrid(FileName);

    });
}

private async void Excel_ReadCompleted(object sender, Excel.CustomEventArgs.ReadCompletedEventArgs e)
{
    var dispatcher = CoreApplication.MainView?.CoreWindow?.Dispatcher;
    grid = e.DataGrid;
    await dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
     {
         for (int i = 0; i < e.DataGrid.Headers.Count; i++)
         {
             ListItemLeft.Add(new ListItemData() { Index = i, ListItemText = e.DataGrid.Headers[i] });
         }
     });

    OnPropertyChanged(nameof(ListItemLeft));
    MoveRightCommand.RaiseCanExecuteChanged();
    MoveLeftCommand.RaiseCanExecuteChanged();
}

Answer 2

First, check what part is actually blocking the UI thread. Just because something returns a task does not guarantee that it is actually non-blocking. While ReadToGrid is a likely candidate, it might also be one of the events you attach.

Secondly, the exception is most probably raised because some COM object is accessed from another thread than it was created on. This is often a problem where the UI is updated from a non-UI thread, but in this case I would guess it is due to some excel COM object.

You might want to read a bit about how COM manages threads. You should also refer to the documentation of the library you are using, especially the threading rules.

Answer 3

The callback methods (Excel_UpdatedRow) executes on the worker thread. Before it changes the Message property it should switch to the UI thread.

Switching to the UI thread is done using Dispatcher.BeginInvoke.

Extra: If there are a lot of asynchronous callbacks, you could change the ViewModel (or even the ViewModel's base class) to switch to the UI thread if needed.

private void UpdateUI()
{
    if (!Dispatcher.CheckAccess())
    {
        // We're not in the UI thread, use the dispatcher to call this same method on the UI thread
        Dispatcher.BeginInvoke(new Action(UpdateUI));
        return;
    }

    // We're in the UI thread, update the UI
    Meesage = ...
}