XAML 自定义弹出窗口模板

olqngx59  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(260)

我一直在尝试创建不同类型的弹出窗口,以测试一切是如何工作的。我已经通过文档(https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pop-ups),但没有正式的例子,如何创建一个自定义模板的弹出窗口或对话框。
假设我希望在弹出窗口中:

  • 标签
  • 日期选取器
  • 时间选取器
  • 文字方块
  • 文件选取器
  • 等等

和两个答案或输入字段(如Microsoft示例)。
有人可以帮助一个例子,我可以创建相同的外观弹出作为默认的,但与自定义的一组控件,将利用MVVM模型?
对于相同的外观,我指的是以下默认布局:

我试过用这种方式创建自定义布局,但是有很多问题没有解决,如何创建模板使其看起来像默认布局。也许有更好的方法可以做到这一点?

    • 新约会. xaml:**
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Controls.Popups.NewAppointmentPage"
             Title="NewAppointmentPage">
  <ContentPage.Content>
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
      <Frame VerticalOptions="Center" CornerRadius="20" BackgroundColor="White">
        <StackLayout Padding="50,50,50,50">
          <ContentView x:Name="ContentView"/>
          <StackLayout Orientation="Horizontal">
            <Button Text="Confirm"></Button>
            <Button Text="Cancel"></Button>
          </StackLayout>
        </StackLayout>
      </Frame>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>
    • 新约会. xaml.cs:**
using System.Windows.Input;

namespace App.Controls.Popups;

public partial class NewAppointmentPage : ContentPage
{
  public NewAppointmentPage()
  {
    InitializeComponent();
    this.BackgroundColor = Color.FromArgb("#80000000");
  }

  public static readonly BindableProperty PopupContentProperty = BindableProperty.Create(
      propertyName: nameof(PopupContent),
      returnType: typeof(View),
      declaringType: typeof(NewAppointmentPage),
      defaultValue: null,
      defaultBindingMode: BindingMode.OneWay,
      propertyChanged: PopupContentPropertyChanged);

  private static void PopupContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
  {
    NewAppointmentPage controls = (NewAppointmentPage)bindable;
    if (newValue != null)
      controls.ContentView.Content = (View)newValue;
  }

  private bool IsVisible;

  public View PopupContent
  {
    get => (View)GetValue(PopupContentProperty);
    set { SetValue(PopupContentProperty, value); }
  }

  public ICommand PopModelCommand => new Command(async () =>
  {
    await App.Current.MainPage.Navigation.PopModalAsync();
  });
}

然后在HomeViewModel.cs中:

private async void AddNewRecord()
{
  await App.Current.MainPage.Navigation.PushModalAsync(new NewAppointmentPage());
}
ruarlubt

ruarlubt1#

MAUI不支持开箱即用的自定义弹出窗口,但您可以使用MAUI community toolkit package中的PopupMAUI community toolkit package使用本机平台弹出窗口,许多选项已经实现。

2ekbmq32

2ekbmq322#

使用MAUI community toolkit可以创建“自定义弹出窗口”
下面是一个示例(Pago_OK.xaml):

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup 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"
             x:Class="AppRipsaPagosMAUI.Pages.Helpers.Pago_OK"
             CanBeDismissedByTappingOutsideOfPopup ="False">
    <VerticalStackLayout>
        <Label 
            Text="Payment finished"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Label 
            Text="Insert your mail to get a ticket"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Entry Placeholder="Insert your Mail"
               x:Name="entryEmail" />
        <Button ImageSource="mail.png"
                Clicked="OnEmailButtonClicked" /> 
        <Button Text="Finalizar" 
                Clicked="OnYesButtonClicked" />
    </VerticalStackLayout>
</toolkit:Popup>

Pago_OK.xaml.cs

public partial class Pago_OK 
{
    

    public Pago_OK(DataToSend dataToSend)
    {
        InitializeComponent();
        /*some logic*/
        _pagosService = new PagosService(new HttpClient());     
    }

    async void OnEmailButtonClicked(object? sender, EventArgs e)
    {
        if (_cls_DevolucionPagos != null)
        {
            if (Email.Default.IsComposeSupported)
            {
                string recipient = entryEmail.Text;

                await _pagosService.SendEmail();
            }
        }     
        this.Close();
        await Shell.Current.Navigation.PopToRootAsync();
    }

    async void OnYesButtonClicked(object? sender, EventArgs e) => await Shell.Current.Navigation.PopToRootAsync();

}

您可以这样调用弹出窗口:

await Shell.Current.ShowPopupAsync(new Pago_OK(dataToSend));

请记住,您可以有一个PopupViewModel在它里面,你可以编辑弹出作为一个自定义页面。希望它有帮助!

相关问题