Genişletici
Denetim, Expander
içeriği barındırmak için genişletilebilir bir kapsayıcı sağlar. Denetimin içeriğinizi depolamak için iki ana özelliği vardır:
Üst bilgi
Bu Header
özellik, tam özelleştirmeye izin vermek için herhangi bir görünümle sağlanabilir. Header
her zaman görünür olur ve bununla etkileşim kurarken (tıklama veya dokunma) öğesini gösterir/daraltacaktırContent
.
Not
Üst bilgi içine kullanıcı etkileşimine izin veren denetimlerin yerleştirilmemesi önerilir.
Content
Bu, özellik ile etkileşime geçtiğinde (tıklandığında veya dokunulduğunda Header
) veya IsExpanded
özellik değiştirildiğinde gösterilecek ana içeriktir.
Not
Expander
iOS/MacCatalyst üzerinde içinde ListView
desteklenmez ve NotSupportedException oluşturur. Ancak, ayarıyla public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }
özel uygulamayla değiştirilebilir. Üst bilgi her dokunulduğunda bu eylem yürütülür. Lütfen dikkat edin, bu eylemi değiştirerek tüm platformlarda ve ListView
platformlarda CollectionView
farklı davranışlar alabilirsiniz.
Temel kullanım
Aşağıdaki örneklerde, özelliği bir Label
denetim ve HorizontalStackLayout
Content
ile ve Image
içinde olarak ayarlayarak Header
görünümün nasıl kullanılacağı Expander
gösterilmektedirLabel
.
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>
Genişleticiyi Kullanma
Aşağıdaki örnekte XAML'de bir Expander
görünümün nasıl ekleneceği gösterilmektedir.
<toolkit:Expander>
<toolkit:Expander.Header>
<Label Text="Baboon"
FontAttributes="Bold"
FontSize="Medium" />
</toolkit:Expander.Header>
<HorizontalStackLayout Padding="10">
<Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
Aspect="AspectFill"
HeightRequest="120"
WidthRequest="120" />
<Label Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
FontAttributes="Italic" />
</HorizontalStackLayout>
</toolkit:Expander>
C#
Aşağıdaki örnekte C# dilinde bir Expander
görünümün nasıl ekleneceği gösterilmektedir.
using CommunityToolkit.Maui.Views;
var expander = new Expander
{
Header = new Label
{
Text = "Baboon",
FontAttributes = FontAttributes.Bold,
FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
}
};
expander.Content = new HorizontalStackLayout
{
Padding = new Thickness(10),
Children =
{
new Image
{
Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
Aspect = Aspect.AspectFill,
HeightRequest = 120,
WidthRequest = 120
},
new Label
{
Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
FontAttributes = FontAttributes.Italic
}
}
};
C# İşaretlemeyi
using CommunityToolkit.Maui.Views;
Content = new Expander
{
Header = new Label()
.Text("Baboon")
.Font(bold: true, size: 18),
Content = new HorizontalStackLayout
{
new Image()
.Source("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg")
.Size(120)
.Aspect(Aspect.AspectFill),
new Label()
.Text("Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.")
.Font(italic: true)
}.Padding(10)
}.CenterHorizontal();
Özellikler
Özellik | Türü | Açıklama |
---|---|---|
Command |
ICommand |
Üst bilgi dokunulduğunda Expander yürütülür. |
CommandParameter |
object |
öğesine geçirilen Command parametre. |
Direction |
ExpandDirection |
Genişletici yönünü tanımlar. |
Content |
IView? |
Genişletildiğinde Expander görüntülenecek içeriği tanımlar. |
Header |
IView? |
Üst bilgi içeriğini tanımlar. |
IsExpanded |
bool |
öğesinin Expander genişletilip genişletileceğini belirler. Bu özellik bağlama modunu kullanır TwoWay ve varsayılan değerine false sahiptir. |
Numaralandırma ExpandDirection
aşağıdaki üyeleri tanımlar:
Value | Açıklama |
---|---|
Down |
İçeriğin Expander üst bilgi altında olduğunu gösterir. |
Up |
İçeriğin Expander üst bilginin üzerinde olduğunu gösterir. |
Denetim Expander
ayrıca üst bilgi dokunulduğunda Expander
tetiklenen bir ExpandedChanged
olayı da tanımlar.
Expandedchangedeventargs
Durum içeren Expander
IsExpanded
olay bağımsız değişkeni.
Özellikler
Özellik | Türü | Açıklama |
---|---|---|
Isexpanded | bool |
öğesinin Expander genişletilip genişletileceğini belirler. |
Örnekler
Bu özelliğin bir örneğini .NET MAUI Community Toolkit Örnek Uygulaması'nda çalışır durumda bulabilirsiniz.
API
üzerinde için Expander
kaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.
.NET MAUI Community Toolkit