PopupService

MVVM desenini kullanarak bir uygulama içinde Açılan Pencerelerini görüntülemek için PopupService bir mekanizma sağlar.

Aşağıdaki bölümler bir .NET MAUI uygulamasında PopupService nasıl kullanılacağını artımlı olarak oluşturur.

Açılan Pencere Oluşturma

Bir Popup sunmak veya kapatmak için PopupService'ı kullanabilmek amacıyla önce Popup'nin kaydedilmesi gerekir. Açılır pencerenizi tanımlama adımlarına bağlı olarak aşağıdakiler oluşturulabilir.

Popup XAML içeriği şu şekilde tanımlanabilir:

<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"
    xmlns:viewModels="clr-namespace:MyProject.ViewModels"
    x:Class="MyProject.Popups.NamePopup"
    x:DataType="viewModels:NamePopupViewModel">

    <VerticalStackLayout>
        <Label Text="What is your name?" />
        <Entry Text="{Binding Name}" />

        <Button Text="Save" Command="{Binding SaveCommand}" />
        <Button Text="Cancel" Command="{Binding CancelCommand}" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Popup C# içeriği şu şekilde tanımlanabilir:

using CommunityToolkit.Maui.Views;
using MyProject.ViewModels;

namespace MyProject.Popups;

public partial class NamePopup : Popup
{
    public NamePopup(NamePopupViewModel namePopupViewModel)
    {
        InitializeComponent();
        BindingContext = namePopupViewModel;
    }
}

Popup için destekleyici görünüm modeli aşağıdaki gibi tanımlanabilir:

public class NamePopupViewModel : ObservableObject
{
    [ObservableProperty]
    string name = "";

    readonly IPopupService popupService;

    public NamePopupViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    void OnCancel()
    {
    }

    [RelayCommand(CanExecute = nameof(CanSave))]
    void OnSave()
    {
    }

    bool CanSave() => string.IsNullOrWhitespace(Name) is false;
}

Açılır Pencere Kaydetme

Uygulamanızda bir açılır pencere görüntülemek için ilk olarak IPopupService kullanmak için açılır pencere kaydetmeniz ve modeli MauiAppBuilderile görüntülemeniz gerekir. Bu işlem Açılır Pencere Görünümünü Kaydet ve Modeli Görüntüleile yapılabilir.

Yukarıdaki örnekten yola çıkarak aşağıdaki kod MauiProgram.cs dosyasına eklenebilir.

builder.Services.AddTransientPopup<NamePopup, NamePopupViewModel>();

Açılır Pencere Gösterimi

.NET MAUI Community Toolkit, bir .NET MAUI uygulamasında açılır pencerelerin örneğini oluşturmak ve sunmak için bir mekanizma sağlar. UseMauiCommunityToolkit başlatma yöntemi kullanıldığında, açılır pencere hizmeti MauiAppBuilder ile otomatik olarak kaydedilir. Bu, uygulamanızın herhangi bir bölümündeki IPopupService uygulamasını çözümlemenizi sağlar.

IPopupService, bir açılır görünümü ve ilişkili görünüm modelini kaydetmeyi mümkün kılar. Bir Popup gösterme özelliği artık yalnızca görünüm modeli sağlanarak, görünüm ve görünüm modeli arasında temiz bir ayrım yapılması mümkün hale getirilebilir.

Aşağıdaki örnekte bir .NET MAUI uygulamasında açılan pencere oluşturmak ve görüntülemek için IPopupService nasıl kullanılacağı gösterilmektedir:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<NamePopupViewModel>();
    }
}

Alternatif olarak çağıran,döndürülen sonucu işlemek için ShowPopupAsync yöntemini bekleyebilirsiniz. DisplayPopup yöntemi şu şekilde yeniden yazılabilir:

public void DisplayPopup()
{
    var name = await this.popupService.ShowPopupAsync<NamePopupViewModel>();
}

Daha somut bir örnek için lütfen örnek uygulamamıza ve MultiplePopupViewModel'deki örneğe bakın

IPopupService, Sonuç döndürmebölümünde ele alınan bir Açılan Pencere'den döndürülen bir sonucu işlemek için yöntemler de sağlar.

Verileri Açılan görünüm modeline geçirme

Açılır pencere sunarken, dinamik içeriğin kullanıcıya sunulmasını sağlamak için bazen verileri temel görünüm modeline geçirmemiz gerekir. IPopupService, Action<TViewModel> onPresenting parametresini alan ShowPopup ve ShowPopupAsync yöntemlerinin aşırı yüklemeleriyle bunu mümkün kılar. Bu parametre, çerçeveden bağımsız olacak şekilde tasarlanmıştır ve geliştirici olarak mimarinize en uygun olan veri yükleme/geçirme işlemini kullanmanıza olanak sağlar.

Bir NamePopupViewModel ve ilişkili Açılan penceresini gösteren önceki örneği genişletmek için, onPresenting parametresini kullanarak kullanıcı adını geçirebiliriz:

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<UpdatingPopupViewModel>(onPresenting: viewModel => viewModel.Name = "Shaun");
    }
}

Açılan Pencere Kapatılıyor

PopupService, bir görünüm modelinden Popup'ü kapatmayı mümkün hale getiren ClosePopup ve ClosePopupAsync yöntemlerini sağlar.

Program Aracılığıyla Açılan Pencere Kapatma

Önceki örnekte genişleterek aşağıdaki uygulama OnCancel yöntemine eklenebilir:

[RelayCommand]
void OnCancel()
{
    popupService.ClosePopup();
}

Bu, en son görüntülenen Popup'nin kapatılmasına neden olur.

Sonuç döndürme

Bir Popup kapatırken, Popup'i sunan çağırana sonuç döndürmek mümkündür.

Önceki örnekte genişleterek aşağıdaki uygulama OnSave yöntemine eklenebilir:

[RelayCommand(CanExecute = nameof(CanSave))]
void OnSave()
{
    popupService.ClosePopup(Name);
}

Bu, en son görüntülenen Popup'ın kapatılması ve çağırana Namedeğerinin döndürülmesiyle sonuçlanacaktır.

Örnekler

Bu özelliğin bir örneğini .NET MAUI Community Toolkit Örnek Uygulamabulabilirsiniz.

API

Popup kaynak kodunu .NET MAUI Community Toolkit GitHub deposundabulabilirsiniz.