生成页面时显示“正在加载”弹出窗口

Question

我试图在应用程序从数据库下载数据并生成/刷新页面时出现一个弹出窗口。

也许我缺乏理解指令执行顺序所需的知识，或者问题是否在于动画处理不正确。

我在不同的项目页面上调用相同的弹出窗口。在某些情况下它有效，而在其他情况下则根本不显示。

弹出.cs

using CommunityToolkit.Maui.Views;

namespace FZ102;

public partial class PopupPageLoading : Popup
{
    public PopupPageLoading()
    {
        InitializeComponent();

    }

    public void Dismiss()
    {
        // End the appearance transition.
        //endAppearanceTransition();

        // Dismiss the popup.
        DismissAsync();
    }

     void DismissAsync()
    {
        this.Close();
    }
}

弹出 xaml

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
    x:Class="FZ102.PopupPageLoading"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Size="300, 300"
    CanBeDismissedByTappingOutsideOfPopup="False">
    <VerticalStackLayout Spacing="5">
        <Image
            Margin="0"
            HeightRequest="300"
            IsAnimationPlaying="True"
            Source="FZ102loading.gif"
            WidthRequest="300" />
    </VerticalStackLayout>
</toolkit:Popup>

页面来电

public void RiempioSettimana(DateTime DP)
    {

        PopupPageLoading p = new PopupPageLoading();
        Application.Current.MainPage.ShowPopup(p);


        ModelloAgendaDisponibilita DisponibilitaSettimana = new ModelloAgendaDisponibilita;
        string DateInStriga = "";

        DateInStriga = "20" + L_Lun.Text[^2..] + L_Lun.Text[^5..^3] + L_Lun.Text[^8..^6];
            DisponibilitaSettimana = ScaricoGiorno(DateInStriga);

            if (DisponibilitaSettimana != null)
            {
                if (DisponibilitaSettimana.Stato == "Libero") F_C1R1.BackgroundColor = Color.FromArgb(ColoreLibero);
                else
                 if (DisponibilitaSettimana.Stato == "Offerto") F_C1R1.BackgroundColor = Color.FromArgb(ColoreOffertoMaLibero);

            }
            else
            {
                F_C1R1.BackgroundColor = Color.FromArgb(ColoreLibero);
            }
        }
        p.Close();
    }

    private ModelloAgendaDisponibilita ScaricoGiorno(string DataInStringa)
    {
        ModelloAgendaDisponibilita DR = new ModelloAgendaDisponibilita {Stato = "Vuoto"};

        DR = Libreria.EstraggoModelloAgendaDisponibilita(UserNameRicevuto, path, DataInStringa);

        return DR;
    }

连接数据库

        public static ModelloAgendaDisponibilita EstraggoModelloAgendaDisponibilita(string UserName, string path, string DataInStringa)
        {
            FirestoreDb db = FirestoreDb.CreateAsync("****").Result;
            DocumentReference DocumentoEstratto = db.Collection("***").Document(UserName).Collection(DataInStringa).Document(DataInStringa);
            DocumentSnapshot snap = DocumentoEstratto.GetSnapshotAsync().Result;
            ModelloAgendaDisponibilita DR = snap.ConvertTo<ModelloAgendaDisponibilita>();
            return (DR);
        }

（也许这是一个同步调用的事实是一个问题？）

谢谢你。

Answer 1

最简单的是使用 ActivityIndicator

<ActivityIndicator x:Name="loadingIndicator" IsRunning="False" />

然后你停止它并开始它

loadingIndicator.IsRunning = true;

为了使其更有趣，您可以制作一个像弹出窗口一样的模态页面，并使用 Navigation.PushModalAsync 显示您喜欢的任何内容，将页面推送到堆栈顶部，并且您可以轻松删除它。这是一个例子：

var page = new LoadingPage();
await Navigation.PushModalAsync(page);

await Task.Delay(5000);

await Navigation.PopModalAsync();

加载页面

public class LoadingPage : ContentPage
{
    public LoadingPage()
    {
        BackgroundColor = Colors.Transparent;

        Content = new Grid
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            WidthRequest = 200,
            HeightRequest = 200,
            BackgroundColor = Colors.White,
            Children =
            {
                new ActivityIndicator
                {
                    IsRunning = true,
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center
                }
            }
        };
    }

    protected override bool OnBackButtonPressed()
    {
        // Prevent the back button from closing the page
        return true;
    }
}