Xamarin.Forms ImageButton

ImageButton affiche une image et répond à un appui ou un clic qui dirige une application pour effectuer une tâche particulière.

La ImageButton vue combine l’affichage et Image l’affichage pour créer un bouton dont le Button contenu est une image. L’utilisateur appuie sur le ImageButton doigt ou clique dessus avec une souris pour diriger l’application pour effectuer une tâche particulière. Toutefois, contrairement à la vue, la ImageButton vue n’a pas de Button concept de texte et d’apparence de texte.

Définition de la source de l’image

ImageButton définit une Source propriété qui doit être définie sur l’image à afficher dans le bouton, avec la source de l’image étant un fichier, un URI, une ressource ou un flux. Pour plus d’informations sur le chargement d’images à partir de différentes sources, consultez Images dans Xamarin.Forms.

L'exemple suivant montre comment instancier une ImageButton dans XAML :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

La propriété Source spécifie l’image qui s’affiche dans le ImageButton. Dans cet exemple, il est défini sur un fichier local qui sera chargé à partir de chaque projet de plateforme, ce qui entraîne les captures d’écran suivantes :

Par défaut, la ImageButton valeur est rectangulaire, mais vous pouvez lui donner des angles arrondis à l’aide de la CornerRadius propriété. Pour plus d’informations sur l’apparence, consultez l’apparence ImageButtonImageButton.

L’exemple suivant montre comment créer une page qui est fonctionnellement équivalente à l’exemple XAML précédent, mais entièrement en C# :

public class ImageButtonDemoPage : ContentPage
{
    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children = { header, imageButton }
        };
    }
}

Gestion des clics ImageButton

ImageButton définit un Clicked événement déclenché lorsque l’utilisateur appuie sur l’utilisateur ImageButton avec un doigt ou un pointeur de souris. L’événement est déclenché lorsque le doigt ou le bouton de la souris est libéré de la surface du ImageButton. La ImageButton propriété doit être IsEnabled définie pour true répondre aux appuis.

L’exemple suivant montre comment instancier un ImageButton en XAML et gérer son Clicked événement :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnImageButtonClicked" />

        <Label x:Name="label"
               Text="0 ImageButton clicks"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

L’événement Clicked est défini sur un gestionnaire d’événements nommé OnImageButtonClicked qui 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")}";
    }
}

Lorsque vous appuyez sur ImageButton, 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.

Ce gestionnaire particulier Clicked incrémente un compteur et affiche la valeur du compteur dans un Label:

L’exemple suivant montre comment créer une page qui est fonctionnellement équivalente à l’exemple XAML précédent, mais entièrement en C# :

public class ImageButtonDemoPage : ContentPage
{
    Label label;
    int clickTotal = 0;

    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };
        imageButton.Clicked += OnImageButtonClicked;

        label = new Label
        {
            Text = "0 ImageButton clicks",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children =
            {
                header,
                imageButton,
                label
            }
        };
    }

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

Désactivation de l’imageButton

Parfois, une application est dans un état particulier où un clic particulier 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.

Utilisation de l’interface de commande

Il est possible qu’une application réponde aux ImageButton appuis 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 de l’architecture Model-View-ViewModel (MVVM).

Pour plus d’informations sur l’utilisation de l’interface de commande, consultez Utilisation de l’interface de commande dans le guide du bouton .

Appuyer et libérer l’ImageButton

Outre l’événement Clicked, ImageButton définit également les événements Pressed et Released. L’événement Pressed se produit lorsqu’un doigt appuie sur un ImageButtonbouton , ou qu’un bouton de la souris est enfoncé avec le pointeur positionné sur le ImageButton. L’événement Released se produit lorsque le doigt ou le bouton de la 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 la souris s’éloigne de la surface de l’événement ImageButton avant d’être libéré, l’événement Clicked peut ne pas se produire.

Pour plus d’informations sur ces événements, consultez Appuyer et libérer le bouton dans le guide du bouton.

Apparence ImageButton

Outre les propriétés qui ImageButton héritent de la View classe, ImageButton définit également plusieurs propriétés qui affectent son apparence :

• Aspect est la façon dont l’image sera mise à l’échelle pour s’adapter à la zone d’affichage.
• BorderColor est la couleur d’une zone entourant le ImageButton.
• BorderWidth est la largeur de la bordure.
• CornerRadius est le rayon d’angle du ImageButton.

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.

États visuels d’ImageButton

ImageButton a un Pressed VisualState élément qui peut être utilisé pour initier une modification ImageButton visuelle au moment où il est appuyé par l’utilisateur, à condition qu’il soit activé.

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

<ImageButton Source="XamarinLogo.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>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

Indique Pressed VisualState que lorsque l’utilisateur ImageButton appuie, sa Scale propriété est remplacée par sa valeur par défaut de 1 à 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 Le Xamarin.Forms Gestionnaire d’état visuel.