在.Net Maui中显示弹出窗口

mi7gmzs6  于 2023-11-20  发布在  .NET
关注(0)|答案(3)|浏览(344)

我试图使用.Net Maui社区工具包在页面和页面之间计算时将弹出窗口显示为加载页面。但是,当我执行代码时,它不会使用此.ShowPopUpAsync(popup)或Application.Current.MainPage.ShowPopupAsync(popup)在设备上显示弹出窗口。
我的弹出窗口Xaml是

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="DailyBudgetMAUIApp.Handlers.PopUpPage"
           xmlns:xct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
           CanBeDismissedByTappingOutsideOfPopup="False"
           Color="Transparent">
    <VerticalStackLayout HeightRequest="300" WidthRequest="200">
        <ActivityIndicator IsRunning="True" IsVisible="True" VerticalOptions="StartAndExpand" HorizontalOptions="Center" BackgroundColor="Transparent"  Margin="0,100,0,0" Color="{DynamicResource Primary}" Scale="1">
            </ActivityIndicator>
            <Label Text="Loading ..." FontAttributes="Bold" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="Center" FontFamily="OpenSansSemibold" TextColor="{DynamicResource Light}" Margin="0,20,0,0"/>
        </VerticalStackLayout>
</xct:Popup>

字符串
使用Xaml.cs

public partial class PopUpPage : Popup
{
    public PopUpPage()
    {
         InitializeComponent();
    }
}


然后我调用一个方法,我想在这里显示弹出窗口,就像这样

private async void UndoCreateBudget(int BudgetID)
{
    Popup popup = new PopUpPage();
    await Application.Current.MainPage.ShowPopupAsync(popup);
    

    //Call my api and do some stuff

    popup.Close();

}

kokeuurv

kokeuurv1#

我已经测试了你的代码。弹出窗口是有效的。并使用这种方式来调用它-它会出现。
在Android和Windows上测试了它。我几乎可以肯定,如果你在这个方法中放置一个断点:UndoCreateBudget,它将永远不会在第一个位置被命中。所以你应该首先检查这个。
无论如何,我写这篇文章不是为了告诉你它会起作用。你在那里有一个僵局。
这一行:

await Application.Current.MainPage.ShowPopupAsync(popup);

字符串
将非常棘手的诱惑你等待它,当你悬停在它.它不考虑你有这一行的xaml:

CanBeDismissedByTappingOutsideOfPopup="False"


你必须运行这个任务。运行它,而不是等待它。它等待弹出窗口关闭。而你拥有的这种弹出窗口永远不会自己关闭。
你将永远无法到达API调用,并且你将锁定你的接口。

8ftvxx2r

8ftvxx2r2#

如果我可以建议另一种加载数据的方式。使用模态窗口。你不会得到灰色的背景,这可能会让一些用户感到有点不舒服,而且你会得到一个可重用的视图,用于所有类型的API调用。这意味着你在加载视图中执行API调用,而不是在内容视图中。然后你可以再次发送一个事件,当加载打开时触发,所以也有可能发生这种情况。

public class LoadingPage : ContentPage
{
    private ActivityIndicator _indicator;
    private VerticalStackLayout _stackLayout;

    public LoadingPage()
    {
        BackgroundColor = new Color(0, 0, 0, 1);

        _indicator = new ActivityIndicator
        {
            IsRunning = true,
            Color = Colors.Black,
            Scale = 1,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
        };

        var loadingLabel = new Label()
        {
            Text = "Loading...",
            TextColor = Colors.Black,
            HorizontalOptions = LayoutOptions.Center
        };

        _stackLayout = new VerticalStackLayout
        {
            WidthRequest = 200,
            HeightRequest = 300,
            BackgroundColor = new Color(0, 0, 0, 1),
            Children =
            {
                _indicator,
                loadingLabel
            }
        };

        Content = _stackLayout;
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        await Task.Delay(5000);
        await Dismiss();
    }

    public async Task Dismiss()
    {
        await Navigation.PopModalAsync();
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();

        _indicator.IsRunning = false;
        _stackLayout.IsVisible = false;
    }

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

字符串
您可以像这样从方法中调用它

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


这里是一个样本,它可以看起来像


的数据

xdnvmnnf

xdnvmnnf3#

我在这里分享另一种使用MessagingCenter显示和关闭弹出窗口的方法。
首先,发布消息

private async void UndoCreateBudget(int BudgetID)
{
    Popup popup = new PopUpPage();
    await Application.Current.MainPage.ShowPopupAsync(popup);
    
    MessagingCenter.Send<MainPage>(this, "display");
    //Call my api and do some stuff

    MessagingCenter.Send<MainPage>(this, "dismiss");
}

字符串
然后订阅一条消息

public MainPage()
{
    InitializeComponent();
    MessagingCenter.Subscribe<MainPage>(this, "start", (e) =>
    {

        popup = new PopUpPage();
        this.ShowPopup(popup);
    });

    MessagingCenter.Subscribe<MainPage>(this, "close", (e) =>
    {
        popup.Close();
    });
}


对于.NET MAUI 7,您可以使用Messenger

相关问题