Développeur du kit de ressources de la communauté Xamarin

  • Article

Télécharger l’exemple. Télécharger l’exemple

Le contrôle Xamarin.CommunityToolkit Expander fournit un conteneur extensible pour héberger tout contenu. Le contrôle a un en-tête et un contenu, et le contenu est affiché ou masqué en appuyant sur l’en-tête Expander . Lorsque seul l’en-tête Expander est affiché, il Expander est réduit. Lorsque le contenu est visible, Expander le Expander contenu est développé.

Notes

Le Expander contrôle est connu pour afficher un comportement indésirable lorsqu’il est utilisé dans un ListView ou CollectionView. À ce stade, nous vous recommandons de ne pas utiliser un Expander de ces contrôles.

Les captures d’écran suivantes montrent un Expander état réduit et développé, avec des zones rouges indiquant l’en-tête et le contenu :

Capture d’écran d’un expandeur dans les états réduits et développés, sur iOS et Android.

Notes

Le Expander contrôle est entièrement implémenté dans le code multiplateforme. Par conséquent, il est disponible sur toutes les plateformes prises en charge par Xamarin.Forms.

Le Expander contrôle définit les propriétés suivantes :

  • AnimationEasing, de type Easing, qui représente la fonction d’accélération à appliquer au Expander contenu lorsqu’il est en expansion/collapsing si ExpandAnimationEasing/CollapseAnimationEasing n’est pas défini.
  • AnimationLength, de type uint, qui définit la durée de l’animation lors de l’expansion Expander /de la réduction. La valeur par défaut de cette propriété est de 250ms.
  • CollapseAnimationEasing, de type Easing, qui représente la fonction d’accélération à appliquer au Expander contenu lorsqu’il s’agit d’une réduction.
  • CollapseAnimationLength, de type uint, qui définit la durée de l’animation lors de l’effondrement Expander . Si cette propriété n’est pas définie, la valeur AnimationLength est appliquée.
  • Command, de type ICommand, qui est exécuté lorsque l’en-tête Expander est taché.
  • CommandParameter, de type object : paramètre passé à la commande Command.
  • Content, de type View, qui définit le contenu à afficher lorsque le Expander développe.
  • ContentTemplate, de type DataTemplate, qui est le modèle utilisé pour gonfler dynamiquement le contenu du Expander.
  • ExpandAnimationEasing, de type Easing, qui représente la fonction d’accélération à appliquer au contenu pendant l’expansion Expander .
  • ExpandAnimationLength, de type uint, qui définit la durée de l’animation lorsque le Expander développe. Si cette propriété n’est pas définie, la valeur AnimationLength est appliquée.
  • ForceUpdateSizeCommand, de type ICommand, qui définit la commande exécutée lorsque la taille du fichier Expander est mise à jour. Cette propriété utilise le OneWayToSource mode de liaison.
  • Header, de type View, qui définit le contenu de l’en-tête.
  • IsExpanded, de type bool, qui détermine si le Expander fichier est développé . Cette propriété utilise le TwoWay mode de liaison et a une valeur par défaut .false
  • State, de type ExpandState, qui représente l’état du Expander. Cette propriété utilise le OneWayToSource mode de liaison.
  • TouchCaptureView, de type View, qui stocke l’affichage responsable du déclenchement de l’animation d’expansion/de collapsing, en appuyant sur.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et de style.

Notes

La Content propriété est la propriété de contenu de la Expander classe et n’a donc pas besoin d’être définie explicitement à partir de XAML.

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

  • Expanding indique que le Expander développement est en cours.
  • Expanded indique que le fichier Expander est développé.
  • Collapsing indique que l’opération Expander est réductible.
  • Collapsed indique que la valeur Expander est réduite.

Le Expander contrôle définit également un Tapped événement déclenché lorsque l’en-tête Expander est taché. En outre, Expander inclut une ForceUpdateSize méthode qui peut être appelée pour redimensionner par programmation le redimensionnement au moment de l’exécution Expander .

Important

Le Expander fait partie de Xamarin.Forms et a été déplacé vers Xamarin.CommunityToolkit. Dans le cadre de ce déplacement, l’énumération ExpanderState a été renommée ExpandState

Créer un expandeur

L’exemple suivant montre comment instancier un Expander en XAML :

<Expander>
    <Expander.Header>
        <Label Text="Baboon"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <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 Grid.Column="1"
               Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
               FontAttributes="Italic" />
    </Grid>
</Expander>

Dans cet exemple, la Expander valeur est réduite par défaut et affiche un Label en-tête. L’appui sur l’en-tête entraîne le Expander développement pour révéler son contenu, qui est un Grid contrôle enfant contenant. Lorsque le Expander fichier est développé, le fait d’appuyer sur son en-tête réduit le Expander.

Important

Lors de la définition de la Expander.Content propriété, implicitement ou explicitement, le Expander contenu est créé lorsque la page contenant celle-ci est accédée, même si celle-ci Expander est réduite. Toutefois, la Expander.ContentTemplate propriété peut être définie sur le contenu qui n’est gonflé que lorsque le Expander développement se développe pour la première fois. Pour plus d’informations, consultez Créer du contenu Expander à la demande.

Vous pouvez également créer un Expander code :

Expander expander = new Expander
{
    Header = new Label
    {
        Text = "Baboon",
        FontAttributes = FontAttributes.Bold,
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
    }
};

Grid grid = new Grid
{
    Padding = new Thickness(10),
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};

grid.Children.Add(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
});

grid.Children.Add(new Label
{
    Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
    FontAttributes = FontAttributes.Italic
}, 1, 0);

expander.Content = grid;

Créer du contenu de l’éditeur à la demande

Expander le contenu peut être créé à la Expander demande, en réponse au développement. Pour ce faire, définissez la Expander.ContentTemplate propriété sur une DataTemplate propriété qui contient le contenu :

<Expander>
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

Dans cet exemple, le Expander contenu n’est gonflé que lorsque le Expander contenu s’étend pour la première fois.

L’avantage de cette approche est que lorsqu’une page contient plusieurs Expander objets, le contenu d’un objet Expander est créé uniquement lorsqu’il est développé pour la première fois par l’utilisateur.

Ajouter un indicateur d’expansion

Un Image élément peut être ajouté à un Expander en-tête pour fournir une indication visuelle de l’état d’expansion. Un DataTrigger peut être attaché au Image, qui modifie la Source propriété en fonction de la valeur de la Expander.IsExpanded propriété :

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="{Binding Name}"
                   FontAttributes="Bold"
                   FontSize="Medium" />
            <Image Source="expand.png"
                   HorizontalOptions="End"
                   VerticalOptions="Start">
                <Image.Triggers>
                    <DataTrigger TargetType="Image"
                                 Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                                 Value="True">
                        <Setter Property="Source"
                                Value="collapse.png" />
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

Dans cet exemple, l’icône Image affiche l’icône expand par défaut :

Capture d’écran d’une icône Expander en état réduit, sur iOS et Android.

La IsExpanded propriété devient true lorsque l’en-tête Expander est tapé, ce qui entraîne l’affichage de l’icône collapse :

Capture d’écran d’une icône Expander en état de développement, sur iOS et Android.

Pour plus d’informations sur les déclencheurs, consultez Xamarin.Forms Triggers.

Incorporer un expandeur dans un développeur

Le contenu d’un contrôle Expander peut être défini sur un autre Expander contrôle pour activer plusieurs niveaux d’expansion. Le code XAML suivant montre un Expander objet dont le contenu est un autre Expander objet :

<Expander>
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander Padding="10">
        <Expander.Header>
            <Label Text="{Binding Location}"
                   FontSize="Medium" />
        </Expander.Header>
            <Expander.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="120"
                               WidthRequest="120" />
                        <Label Grid.Column="1"
                               Text="{Binding Details}"
                               FontAttributes="Italic" />
                    </Grid>
                </DataTemplate>
            </Expander.ContentTemplate>
    </Expander>
</Expander>

Dans cet exemple, l’appui sur l’en-tête racine Expander révèle l’en-tête pour l’enfant Expander:

Capture d’écran d’un expandeur incorporé, sur iOS et Android (réduit).

En appuyant sur l’en-tête enfant Expander , son contenu est gonflé et affiché :

Capture d’écran d’un expandeur incorporé, sur iOS et Android (développé).

Définir l’animation de développement et de réduction

L’animation qui se produit lorsqu’un Expander développement ou une réduction peut être définie en définissant les propriétés et CollapseAnimationEasing les ExpandAnimationEasing fonctions d’accélération incluses dans Xamarin.Forms ou les fonctions d’accélération personnalisées. Par défaut, les animations de développement et de réduction se produisent sur plus de 250 ms. Toutefois, ces durées peuvent être modifiées en définissant les ExpandAnimationLength valeurs et CollapseAnimationLength les propriétés sur uint les valeurs.

Le code XAML suivant montre un exemple de définition de l’animation qui se produit lorsque l’utilisateur Expander est développé ou réduit :

<Expander ExpandAnimationEasing="{CubicIn}"
          ExpandAnimationLength="500"
          CollapseAnimationEasing="{CubicOut}"
          CollapseAnimationLength="500">
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

Dans cet exemple, la CubicIn fonction d’accélération accélère lentement l’animation de développement sur 500ms, et la CubicOut fonction d’accélération décélét rapidement l’animation de réduction sur 500 m.

Pour plus d’informations sur les fonctions d’accélération, consultez Xamarin.Forms Easing Functions.

Redimensionner un expandeur au moment de l’exécution

Une Expander opération peut être redimensionnée par programmation au moment de l’exécution avec la ForceUpdateSize méthode.

Compte tenu d’un Expander nom expander, dont le contenu inclut un TapGestureRecognizerLabel associé à celui-ci, l’exemple de code suivant montre comment appeler la ForceUpdateSize méthode :

void OnLabelTapped(object sender, EventArgs e)
{
    Label label = sender as Label;
    Expander expander = label.Parent.Parent.Parent as Expander;

    if (label.FontSize == Device.GetNamedSize(NamedSize.Default, label))
    {
        label.FontSize = Device.GetNamedSize(NamedSize.Large, label);
    }
    else
    {
        label.FontSize = Device.GetNamedSize(NamedSize.Default, label);
    }
    expander.ForceUpdateSize();
}

Dans cet exemple, les FontSize modifications apportées lors de l’utilisation Label de l’objet Label sont tachées. En raison de la taille de la police qui change, il est nécessaire de mettre à jour la taille de la Expander police en appelant sa ForceUpdateSize méthode.

Désactiver un expandeur

Une application peut entrer un état dans lequel le développement d’un Expander n’est pas une opération valide. Dans ce cas, il Expander peut être désactivé en définissant sa IsEnabled propriété sur false. Cela empêchera les utilisateurs de développer ou de réduire le Expander.