Aracılığıyla paylaş


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.

Not

Kullanıcıya daha ince bir şey sunmak istiyorsanız Tost ve Snackbar seçeneklerimize göz atın.

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();
    }
}

Önemli

Dosyasının arkasındaki kod çağrısıyla InitializeComponent birlikte oluşturulmazsa, öğesini Popupgörüntülemeye çalışırken bir özel durum oluşturulur.

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.

Önemli

A Popup yalnızca öğesinden devralan Pagebir Page veya uygulamasından görüntülenebilir.

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.

Not

Close() bir fire-and-forget yöntemidir. İşlem tamamlanır ve işletim sistemi ekranı kapatmadan önce çağıran iş parçacığına Popup döner. İşletim sistemi ekranı kapatana Popup kadar kodunuzun yürütülmesini duraklatmanız gerekiyorsa, bunun yerine CloseAsync()kullanın.

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
            }
        }
    }
}

Not

Sonucu beklerken bir Popup dışından dokunmayı işlemek için özelliği aracılığıyla ResultWhenUserTapsOutsideOfPopup döndürülen değeri değiştirebilirsiniz.

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>

Not

Hedef alan Style bir Popup oluştururken ve örnek gibi SimplePopup özel açılır pencerelere uygulanmasını istiyorsanız, tanımında özelliğini ayarladığınızdan ApplyToDerivedTypesStyle emin olun.

Özellikler

Özellik Türü Açıklama
Anchor View Tutturucuyu View alır veya ayarlar. Tutturucu, Açılan Pencere'nin en yakın şekilde işlendiği yerdir. Yer işareti yapılandırıldığında açılır pencere bu denetimin üzerinde ortalanmış veya mümkün olduğunca yakın görünür.
CanBeDismissedByTappingOutsideOfPopup bool Açılan pencere dışına dokunarak açılan pencere kapatılıp kapatılamayacağını belirten bir değer alır veya ayarlar. Android'de - false olduğunda donanım geri düğmesi devre dışı bırakılır.
Color Color Açılır Pencere'nin öğesini Color alır veya ayarlar. Bu renk, içinde Popupyapılandırılan herhangi bir arka plan renginden bağımsız olarak yerel arka plan rengini Contentayarlar.
Content View içinde Viewişlenmek Popup üzere içeriği alır veya ayarlar.
HorizontalOptions LayoutAlignment Yatay olarak ekrana konumlandırmak LayoutAlignment için öğesini alır veya ayarlarPopup.
Result Task<object?> Kapatılan Popupöğesinin nihai sonucunu alır.
Size Size Açılır Ekran'ı Size alır veya ayarlar. Açılan Pencere, belirtilmemişsePopup, öğesinin Size gerçek boyutunu Her zaman Görünümün boyutuyla sınırlamaya çalışır. Popup varsayılan olmayan veya HorizontalOptions özelliklerini kullanıyorsa VerticalOptions bu Size özellik gereklidir.
VerticalOptions LayoutAlignment Dikey olarak ekrana konumlandırmak LayoutAlignment için öğesini alır veya ayarlarPopup.

Ekinlikler

Olay Açıklama
Closed kapatıldığında Popup gerçekleşir.
Opened Popup açıldığında gerçekleşir.

Ö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.