Expander

Le contrôle Expander fournit un conteneur extensible pour héberger tout contenu. Le contrôle a deux propriétés principales pour stocker votre contenu :

En-tête

Cette propriété Header peut être fournie avec n’importe quelle vue pour permettre une personnalisation complète. Le Header sera toujours visible et le fait d’interagir avec lui (en cliquant ou en appuyant) affichera/réduira le Content.

Contenu

Il s’agit du contenu principal qui s’affiche lorsque l’on interagit avec la propriété Header (en cliquant ou en appuyant) ou lorsque la propriété IsExpanded est modifiée.

Utilisation de base

Les exemples suivants montrent comment utiliser la vue Expander en définissant la propriété Header en tant que contrôle du Label et en définissant le Content sur une disposition HorizontalStackLayout avec une Image et un Label à l’intérieur.

XAML

Y compris l’espace de noms XAML

Pour utiliser le kit de ressources dans XAML, le xmlns suivant doit être ajouté à votre page ou à votre affichage :

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

Il en résulte ce qui suit :

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

Serait modifié pour inclure le xmlns de la manière suivante :

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

Utilisation de l’Expander

L’exemple suivant montre comment ajouter une vue Expander en XAML.

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

L’exemple suivant montre comment ajouter une vue Expander en C#.

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

Balisage C#

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

Propriétés

L’énumération ExpandDirection définit les membres suivants :

Le contrôle Expander définit également un événement ExpandedChanged qui est déclenché lorsque l’on appuie sur l’en-tête Expander.

ExpandedChangedEventArgs

Argument d’événement contenant l’état ExpanderIsExpanded.

Propriétés

Exemples

Vous trouverez un exemple de cette fonctionnalité en action dans l’exemple d’application du kit d’outils de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deExpander sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.