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.
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 ImageButton
ImageButton.
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 typeICommand
, interface définie dans l’espaceSystem.Windows.Input
de noms.CommandParameter
propriété de typeObject
.
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 ImageButton
bouton , 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 leImageButton
.BorderWidth
est la largeur de la bordure.CornerRadius
est le rayon d’angle duImageButton
.
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 leImageButton
. Cela peut entraîner une déformation de l’image.AspectFill
- extrait l’image afin qu’elle remplisse leImageButton
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’espaceImageButton
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érationAspect
.
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 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 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. Spécifie Normal
VisualState
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.