Xamarin.Forms Imagebutton

Article
12/04/2019

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.

Remarque

Bien que la Button vue définit une Image propriété, qui vous permet d’afficher une image sur le Button, cette propriété est destinée à être utilisée lors de l’affichage d’une petite icône en regard du Button 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 un ImageButton instanciation en 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 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.

Remarque

Alors qu’une ImageButton image GIF animée peut charger une image GIF animée, elle affiche uniquement le premier cadre 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 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 ou pour faire la ImageButton 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:

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 ces cas, le ImageButton paramètre doit être désactivé en définissant sa IsEnabled propriété 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 . Il ImageButton implémente un autre mécanisme de notification appelé interface de commande ou de commande. Il s’agit de deux propriétés :

Command de type ICommand, interface définie dans l’espace System.Windows.Input de noms.
CommandParameter propriété 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 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 - extrait l’image afin qu’elle remplisse le ImageButton tout en préservant le rapport d’aspect.
AspectFit - les boîtes à lettres de l’image (si nécessaire) de sorte que l’image entière s’intègre dans l’espace ImageButtonvide 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 .

Remarque

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

États visuels d’ImageButton

ImageButton a un PressedVisualState é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 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 PressedVisualState que lorsque l’utilisateur ImageButton appuie, sa Scale propriété est remplacée par sa valeur par défaut de 1 à 0,8. Spécifie NormalVisualState que lorsque l’état ImageButton est normal, sa Scale propriété est définie sur 1. Par conséquent, l’effet global est que lorsque la ImageButton pression est enfoncée, elle est rescaled pour être légèrement plus petite, et quand la ImageButton mise à l’échelle est libérée, elle est rescaled à sa taille par défaut.

Pour plus d’informations sur les états visuels, consultez Le Xamarin.Forms Gestionnaire d’état visuel.

Partager via

Xamarin.Forms Imagebutton

Définition de la source de l’image

Gestion des clics ImageButton

Désactivation de l’imageButton

Utilisation de l’interface de commande

Appuyer et libérer l’ImageButton

Apparence ImageButton

États visuels d’ImageButton

Ressources supplémentaires