Expander

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

Cette Header propriété peut être fournie avec n’importe quelle vue pour permettre une personnalisation complète. Le Header sera toujours visible, et cliquer ou appuyer dessus affichera ou réduira le Content.

Note

Il n’est pas recommandé de placer des contrôles à l’intérieur de l’en-tête qui autorisent l’interaction utilisateur.

Content

Il s’agit du contenu principal qui s’affiche lorsque la Header propriété est interagissante avec elle (cliqué ou appuyé) ou que la IsExpanded propriété est modifiée.

Note

Expander peut fonctionner de manière inattendue s’il est placé à l’intérieur ListView ou CollectionView. Toutefois, il peut être contrôlé avec l’implémentation personnalisée en définissant public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Cette action est exécutée chaque fois que l’en-tête est touché. Veuillez prêter attention, en modifiant cette action, vous pouvez recevoir un comportement différent dans CollectionView et ListView sur toutes les plateformes.

Capture d’écran d’un Expander à l’état réduit et développé

Utilisation de base

Les exemples suivants montrent comment utiliser la vue Expander en définissant la propriété Header sur un contrôle Label et Content sur un HorizontalStackLayout avec un 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"

Par conséquent, 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 du expandeur

L’exemple suivant montre comment ajouter une Expander vue 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 Expander vue 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

Propriété Type Description
Command ICommand S’exécute lorsque l’en-tête Expander est appuyé.
CommandParameter object Le paramètre transmis à Command.
Direction ExpandDirection Définit le sens du expandeur.
Content IView? Définit le contenu à afficher lorsque Expander se déplie.
Header IView? Définit le contenu de l’en-tête.
IsExpanded bool Détermine si la valeur Expander est développée. Cette propriété utilise le TwoWay mode de liaison et a la valeur falsepar défaut .

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

Value Description
Down Indique que le Expander contenu se trouve sous l’en-tête.
Up Indique que le contenu Expander est au-dessus de l’en-tête.

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

ExpandedChangedEventArgs

Argument d’événement qui contient l’état ExpanderIsExpanded.

Propriétés

Propriété Type Description
IsExpanded bool Détermine si la valeur Expander est développée.

Exemples

Vous trouverez un exemple de cette fonctionnalité en action dans l’exemple d’application .NET MAUI Community Toolkit.

API

Vous trouverez le code source de Expander sur le dépôt .NET MAUI Community Toolkit GitHub.

  • Last updated on