Açılan Pencere

Açılan pencereler, kullanıcıya geçerli göreviyle ilgili bilgileri sunmanın çok yaygın bir yoludur. İşletim sistemleri bir ileti göstermek için bir yol sağlar ve kullanıcıdan yanıt gerektirir, bu uyarılar genellikle bir geliştiricinin sağlayabilecekleri içerik ve ayrıca düzen ve görünüm açısından kısıtlayıcıdır.

Bu Popup görünüm, geliştiricilerin kendi özel kullanıcı arabirimini oluşturmasına ve bunu kullanıcılarına sunmasına olanak tanır.

Açılan Pencere Oluşturma

Popup XAML veya C# ile oluşturulabilir:

XAML

XAML ad alanını dahil edin

Araç setini XAML'de kullanmak için sayfanıza veya görünümünüzde aşağıdakilerin xmlns eklenmesi gerekir:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Bu nedenle aşağıdakiler:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

aşağıdakiler dahil xmlns edilecek şekilde değiştirilir:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    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">

</ContentPage>

Açılır Pencerenizi Tanımlama

XAML'de bir Popup oluşturulursa, dosyanın arkasında da bir C# kodu olması gerektiğini unutmayın. Bunun neden gerekli olduğunu anlamak için lütfen bu .NET MAUI belgeleri sayfasına bakın.

Oluşturmanın Popup en kolay yolu, projenize yeni .NET MAUI ContentView (XAML) bir dosya eklemek ve ardından dosyaların her birini aşağıdaki şekilde değiştirmektir:

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
    </VerticalStackLayout>
    
</toolkit:Popup>

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

C#

using CommunityToolkit.Maui.Views;

var popup = new Popup
{
    Content = new VerticalStackLayout
    {
        Children = 
        {
            new Label
            {
                Text = "This is a very important message!"
            }
        }
    }
};

Açılan Pencere Sunma

Popup oluşturulduktan sonra uzantı yöntemlerimizin Popup kullanımı veya bu araç setinden IPopupService uygulama aracılığıyla sunulabilir.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public void DisplayPopup()
    {
        var popup = new SimplePopup();

        this.ShowPopup(popup);
    }
}

Açılan Pencere Kapatılıyor

öğesinin Popup program aracılığıyla veya açılan pencere dışına dokunarak kapatılabilmesinin 2 farklı yolu vardır.

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

Bir Popup geliştiriciyi kapatmak için veya Close kendisini çağırması CloseAsyncPopup gerekir. Bu genellikle bir kullanıcının düğmeye basılması yanıtlanarak gerçekleştirilir.

TamamButtonönceki XAML örneğini geliştirebiliriz:

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
        <Button Text="OK" 
                Clicked="OnOKButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Sonuç olarak çağırdığımız Closeolay işleyicisinde, bu program aracılığıyla öğesini Popupkapatır.

public partial class MySimplePopup : Popup
{
    // ...

    void OnOKButtonClicked(object? sender, EventArgs e) => Close();
}

çağırdığımız CloseAsyncsonuç olay işleyicisinde, işletim sistemi tarafından ekran kapatılana Popup kadar çağıranın yöntemine await izin verme işlemini program aracılığıyla kapatırPopup.

public partial class MySimplePopup : Popup
{
    // ...

    async void OnOKButtonClicked(object? sender, EventArgs e) 
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

         await CloseAsync(token: cts.Token);
         await Toast.Make("Popup Dismissed By Button").Show();
    }
}

Açılan Pencere'nin dışına dokunma

Varsayılan olarak, kullanıcı kapatmak için öğesinin Popup dışına dokunabilir. Bu, özelliğinin kullanımıyla CanBeDismissedByTappingOutsideOfPopup denetlenebilir. Bu özelliğin olarak false ayarlanması, kullanıcının öğesinin dışına dokunarak kapatabilmesini Popup engeller.

Sonuç döndürme

Bir geliştirici genellikle kullanıcısından yanıt arar. Görünüm, geliştiricilerin Popup beklenebilen ve üzerinde işlem gerçekleştirilebilen bir sonuç döndürmesine olanak tanır.

Bunun nasıl gerçekleştirilebileceğini göstermek için özgün XAML örneğimizi geliştirebiliriz:

XAML

XAML'ye 2 yeni düğme ekleyerek:

<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="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Ardından C# öğesine aşağıdaki olay işleyicilerini ekleyin:

async void OnYesButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(true, cts.Token);
}

async void OnNoButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(false, cts.Token);
}

Close yöntemi bir object değerin sağlanmasına izin verir, sonuçta elde edilen dönüş değeri budur. Sonucu ShowPopupAsync beklemek için yöntemi aşağıdaki gibi kullanılmalıdır:

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup()
    {
        var popup = new SimplePopup();

        var result = await this.ShowPopupAsync(popup, CancellationToken.None);

        if (result is bool boolResult)
        {
            if (boolResult)
            {
                // Yes was tapped
            }
            else
            {
                // No was tapped
            }
        }
    }
}

Stil Oluşturuluyor

sınıfı, Popup ortak görsel ayarlarını birden çok açılır pencerede paylaşmayı kolaylaştırmak için .NET MAUI Stilleri'nin kullanılmasına olanak tanır.

Aşağıdaki örnekte, önceki bölümde yer alan örnek için geçerli olan bir stilin SimplePopup nasıl tanımlanacağı gösterilmektedir.

<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:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
               x:Class="MyProject.SimplePopup">

    <toolkit:Popup.Resources>
        <Style TargetType="{x:Type popups:SimplePopup}">
            <Setter Property="Size" Value="100,200" />
            <Setter Property="Color" Value="Green" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Start" />
            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
        </Style>
    </toolkit:Popup.Resources>

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Özellikler

Ekinlikler

Örnekler

Bu özelliğin bir örneğini .NET MAUI Community Toolkit Örnek Uygulaması'nda çalışır durumda bulabilirsiniz.

API

üzerinde için Popupkaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.