ImageButton

L’affichage .NET Multi-Platform App UI (.NET MAUI) ImageButton associe l’affichage Button et l’affichage Image pour créer un bouton dont le contenu est une image. Lorsque vous appuyez sur le ImageButton avec un doigt ou que vous cliquez dessus avec une souris, il ordonne à l’application d’effectuer une tâche. Toutefois, contrairement au Button, l’affichage ImageButton n’a aucun concept de texte ni l’apparence d’un texte.

ImageButton définit les propriétés suivantes :

• Aspect, de type Aspect, détermine la façon dont l’image est mise à l’échelle pour correspondre à la zone d’affichage.
• BorderColor, de type Color, décrit la couleur de bordure du bouton.
• BorderWidth, de type double, définit la largeur de la bordure du bouton.
• Command, de type ICommand, définit la commande exécutée quand l’utilisateur appuie sur le bouton.
• CommandParameter, de type object, est le paramètre transmis à Command.
• CornerRadius, de type int, décrit le rayon d’angle de la bordure du bouton.
• IsLoading, de type bool, représente l’état de chargement de l’image. La valeur par défaut de cette propriété est false.
• IsOpaque, de type bool, détermine si .NET MAUI doit traiter l’image comme étant opaque lors de son rendu. La valeur par défaut de cette propriété est false.
• IsPressed, de type bool, indique si le bouton est appuyé. La valeur par défaut de cette propriété est false.
• Padding, de type Thickness, détermine le remplissage du bouton.
• Source, de type ImageSource, spécifie une image à afficher comme contenu du bouton.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

La propriété Aspect peut être définie comme étant l’un des membres de l’énumération Aspect :

• Fill : étire l’image pour remplir complètement et exactement le ImageButton. Cette opération peut entraîner une distorsion de l’image.
• AspectFill : taille l’image pour qu’elle remplisse le ImageButton tout en conservant les proportions.
• AspectFit : encadre l’image (le cas échéant) afin que l’image entière s’intègre dans le ImageButton, avec un espace vide ajouté en haut/bas ou sur les côtés en fonction de la largeur ou de la hauteur de l’image. Il s’agit de la valeur par défaut de l’énumération Aspect.
• Center : centre l’image dans le ImageButton tout en conservant les proportions.

En outre, ImageButton définit des événements Clicked, Pressed et Released. L’événement Clicked est déclenché quand un appui sur ImageButton avec un doigt ou un pointeur de souris est libéré de la surface du bouton. L’événement Pressed est déclenché quand un doigt appuie sur un ImageButton ou quand un bouton de souris est appuyé avec le pointeur positionné sur ImageButton. L’événement Released est déclenché quand le doigt ou le bouton de souris est libéré. En règle générale, un événement Clicked est également déclenché en même temps que l’événement Released, mais si le doigt ou le pointeur de souris s’éloigne de la surface du ImageButton avant d’être libéré, il est possible que l’événement Clicked ne se produise pas.

Créer un ImageButton

Pour créer un bouton d’image, créez un objet ImageButton, définissez sa propriété Source et gérez son événement Clicked.

L’exemple de XAML suivant montre comment créer un ImageButton :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

La propriété Source spécifie l’image qui s’affiche dans le ImageButton. L’événement Clicked est défini sur un gestionnaire d’événements nommé OnImageButtonClicked. Ce gestionnaire d’événements se trouve dans le fichier code-behind :

public partial class ImageButtonDemoPage : ContentPage
{
    int clickTotal;

    public ImageButtonDemoPage()
    {
        InitializeComponent();
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

Dans cet exemple, quand le ImageButton est pressé, la méthode OnImageButtonClicked s’exécute. L’argument sender est le ImageButton responsable de cet événement. Vous pouvez l’utiliser pour accéder à l’objet ImageButton ou pour faire la distinction entre plusieurs objets ImageButton qui partagent le même événement Clicked. Le gestionnaire Clicked incrémente un compteur et affiche la valeur du compteur dans une Label :

Le code en C# équivalent pour créer un ImageButton est :

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

Utiliser l’interface de commande

Une application peut répondre aux appuis de ImageButton sans gérer l’événement Clicked. Elle ImageButton implémente un autre mécanisme de notification appelé interface de commande ou d’exécution de commandes. Cette opération comprend deux propriétés :

• Command de type ICommand, une interface définie dans l’espace de noms System.Windows.Input.
• Une propriété CommandParameter de type Object.

Cette approche convient en lien avec la liaison de données, et en particulier lors de l’implémentation du modèle d’architecture MVVM (modèle-vue-vue modèle). Pour obtenir plus d’informations sur l’exécution de commandes, consultez Utiliser l’interface de commande dans l’article Bouton.

Appuyer et libérer un ImageButton

L’événement Pressed est déclenché quand un doigt appuie sur un ImageButton ou quand un bouton de souris est appuyé avec le pointeur positionné sur ImageButton. L’événement Released est déclenché quand le doigt ou le bouton de souris est libéré. En règle générale, l’événement Clicked est également déclenché en même temps que l’événement Released, mais si le doigt ou le pointeur de souris s’éloigne de la surface du ImageButton avant d’être libéré, il est possible que l’événement Clicked ne se produise pas.

Pour obtenir plus d’informations sur ces événements, consultez Appuyer et libérer le bouton dans l’article Bouton.

États visuels d’ImageButton

ImageButton a un élément Pressed VisualState qui peut être utilisé pour initier une modification visuelle au ImageButton une fois appuyé, s’il est activé.

L’exemple de XAML suivant montre comment définir un état visuel pour l’état Pressed :

<ImageButton Source="image.png"
             ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="0.8" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PointerOver" />            
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

Dans cet exemple, l’état Pressed VisualState spécifie que lorsque le ImageButton est appuyé, sa propriété Scale est modifiée en remplaçant la valeur par défaut de 1 par 0,8. L’élément Normal VisualState spécifie que lorsque le ImageButton est dans un état normal, sa propriété Scale est définie sur 1. Par conséquent, l’effet global est que lorsque le ImageButton est appuyé, il est remis à une échelle afin d’être légèrement plus petit, et quand le ImageButton est libéré, il est remis à sa taille par défaut.

Pour plus d’informations sur les états visuels, consultez États visuels.

Désactiver un ImageButton

Une application entre parfois dans un état dans lequel un clic sur un ImageButton n’est pas une opération valide. Dans ce cas, vous devez désactiver le ImageButton en définissant sa propriété IsEnabled sur false.