uwp xaml - UWP Loading indicator does not appear

Question

I have a UWP application and I want to show a content dialog while loading data.

This is my loading dialog which is called via the LoadedCommand.

    private async Task LoadDataAsync()
    {
            await dialogService.ShowLoadingDialogAsync();

            await LoadPaymentsAsync(new PaymentListFilterChangedMessage { TimeRangeStart = DateTime.Now.AddYears(DEFAULT_MONTH_BACK) });
            //Refresh balance control with the current account
            await BalanceViewModel.UpdateBalanceCommand.ExecuteAsync();

            await dialogService.HideLoadingDialogAsync();
    }

I also tried to to call it via the DispatcherHelper:

    private async Task LoadDataAsync()
    {
        await DispatcherHelper.ExecuteOnUIThreadAsync(async () =>
        {
            await dialogService.ShowLoadingDialogAsync();

            await LoadPaymentsAsync(new PaymentListFilterChangedMessage { TimeRangeStart = DateTime.Now.AddYears(DEFAULT_MONTH_BACK) });
            //Refresh balance control with the current account
            await BalanceViewModel.UpdateBalanceCommand.ExecuteAsync();

            await dialogService.HideLoadingDialogAsync();
        });
    }

But that didn't change anything. The method in the DialogService looks like this:

    /// <summary>
    /// Shows a loading Dialog.
    /// </summary>
    public async Task ShowLoadingDialogAsync(string? message = null)
    {
        // Be sure no other dialog is open.
        await HideLoadingDialogAsync();

        loadingDialog = new LoadingDialog { Text = message ?? Strings.LoadingLabel };

        CoreApplicationView coreWindow = CoreApplication.MainView;

        // Dispatcher needed to run on UI Thread
        CoreDispatcher dispatcher = coreWindow.CoreWindow.Dispatcher;

        // RunAsync all of the UI info.
        await dispatcher.RunAsync(CoreDispatcherPriority.High,
            async () =>
            {
                await loadingDialog.ShowAsync();
            });
    }

    /// <summary>
    /// Hides the previously opened Loading Dialog.
    /// </summary>
    public Task HideLoadingDialogAsync()
    {
        loadingDialog?.Hide();
        return Task.CompletedTask;
    }

Funny enough on other occasions, for example when I load data from a webservice instead of the database this does work without any issues.

question from:https://stackoverflow.com/questions/65870911/uwp-loading-indicator-does-not-appear

Answer 1

UWP Loading indicator does not appear

During the testing, The LoadingDialog Text property cause the problem, if you want make Text property could effect for xaml content, please make it as dependency property like the following.

Xaml

<Grid>
    <TextBlock
        x:Name="main_content"
        VerticalAlignment="Center"
        Text="{x:Bind Text, Mode=OneWay}" />
</Grid>

Code Behind

public sealed partial class LoadingDialog : ContentDialog
{
    public LoadingDialog()
    {
        this.InitializeComponent();
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(LoadingDialog), new PropertyMetadata(0));




    private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
    {
    }

    private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
    {
    }
}

And now you could use DialogService to show the dialog proper.

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    await dialogService.ShowLoadingDialogAsync();
    await Task.Delay(3000);
    await dialogService.HideLoadingDialogAsync();
}

Update

The other guess is the loading process is very quick that cause dialog disappears before it can be displayed. So you try to add task delay manually after await BalanceViewModel.UpdateBalanceCommand.ExecuteAsync(); line