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 Popup
gö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 Page
bir 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ı CloseAsync
Popup
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 Close
olay işleyicisinde, bu program aracılığıyla öğesini Popup
kapatı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 CloseAsync
sonuç 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 ApplyToDerivedTypes
Style
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 Popup yapılandırılan herhangi bir arka plan renginden bağımsız olarak yerel arka plan rengini Content ayarlar. |
Content |
View |
içinde View iş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 Popup
kaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.
.NET MAUI Community Toolkit