Xamarin.Forms Imagebutton

  • Article

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

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

Notes

Bien que la Button vue définisse une Image propriété, qui vous permet d’afficher une image sur , cette propriété est destinée à être utilisée lors de l’affichage Buttond’une petite icône en regard du Button texte.

Les exemples de code de ce guide sont tirés de l’exemple FormsGallery.

Définition de la source d’image

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

L’exemple suivant montre comment instancier un 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 Source propriété spécifie l’image qui apparaît dans .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 :

De base ImageButton

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

Notes

Bien qu’un ImageButton puisse charger un GIF animé, il affiche uniquement la première image du GIF.

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 avec ImageButton 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. ImageButton Sa propriété doit être IsEnabled définie sur true pour répondre aux pressions.

L’exemple suivant montre comment instancier un ImageButton dans 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 responsable ImageButton de cet événement. Vous pouvez l’utiliser pour accéder à l’objet ImageButton ou pour faire la distinction entre plusieurs ImageButton objets partageant le même Clicked événement.

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

Image de baseButton Cliquez sur

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 se trouve dans un état particulier où un clic particulier ImageButton n’est pas une opération valide. Dans ce cas, le ImageButton doit être désactivé en définissant sa IsEnabled propriété sur false.

Utilisation de l’interface de commande

Il est possible pour une application de répondre aux ImageButton pressions sans gérer l’événement Clicked . Implémente ImageButton un autre mécanisme de notification appelé la commande ou l’interface de commande . Il se compose de deux propriétés :

Cette approche convient en lien avec la liaison de données, et en particulier lors de l’implémentation de l’architecture MVVM (Model-ViewModel).

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

Appuyez et relâchez 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 ImageButton, ou qu’un bouton de la souris est enfoncé avec le pointeur positionné sur .ImageButton L’événement Released se produit lorsque le bouton du doigt ou de la souris est relâché. 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 pointeur du doigt ou de la souris s’éloigne de la surface du avant d’être ImageButton libéré, l’événement Clicked peut ne pas se produire.

Pour plus d’informations sur ces événements, consultez Appuyer et relâcher le bouton dans le guide Bouton .

Apparence ImageButton

En plus des 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.
  • BorderColorest la couleur d’une zone entourant .ImageButton
  • BorderWidth est la largeur de la bordure.
  • CornerRadius est le rayon d’angle du ImageButton.

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

  • Fill - étire l’image pour remplir complètement et exactement le ImageButton. Cela peut entraîner une déformation de l’image.
  • AspectFill - clipse l’image de sorte qu’elle remplit le ImageButton tout en préservant le rapport d’aspect.
  • AspectFit - boîtes aux lettres de l’image (si nécessaire) afin que l’ensemble de l’image s’intègre dans , ImageButtonavec un espace vide ajouté au haut/bas ou aux côtés selon que l’image est large ou haute. Il s’agit de la valeur par défaut de l’énumération Aspect .

Notes

La ImageButton classe a Margin également des propriétés et Padding qui contrôlent le comportement de disposition ImageButtondu . Pour plus d’informations, consultez la page Marge et remplissage.

États visuels ImageButton

ImageButton a un PressedVisualState qui peut être utilisé pour lancer une modification ImageButton visuelle du en cas d’appui de l’utilisateur, à condition qu’il soit activé.

L’exemple 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>

spécifie PressedVisualState que lorsque la ImageButton touche est enfoncée, sa Scale propriété passe de sa valeur par défaut de 1 à 0,8. spécifie NormalVisualState que lorsque le ImageButton est dans un état normal, sa Scale propriété est définie sur 1. Par conséquent, l’effet global est que lorsque le ImageButton est enfoncé, il est redimensionné pour être légèrement plus petit, et lorsque le ImageButton est libéré, il est redimensionné à sa taille par défaut.

Pour plus d’informations sur les états visuels, consultez Visual Xamarin.Forms State Manager.