Aracılığıyla paylaş

Genişletici

  • Makale

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:

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.

Screenshot of an Expander in collapsed and expanded states

Temel kullanım

Aşağıdaki örneklerde, özelliği bir Label denetim ve HorizontalStackLayoutContent 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 Commandparametre.
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 falsesahiptir.

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 ExpanderIsExpanded 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 Expanderkaynak kodunu .NET MAUI Community Toolkit GitHub deposunda bulabilirsiniz.