Xamarin.Forms Imagebutton

Artikel
07/13/2023

Der ImageButton zeigt ein Bild an und reagiert auf ein Tippen oder Klicken, das eine Anwendung anweisen wird, eine bestimmte Aufgabe auszuführen.

Die ImageButton Ansicht kombiniert die Ansicht und Image die Button Ansicht, um eine Schaltfläche zu erstellen, deren Inhalt ein Bild ist. Der Benutzer drückt die ImageButton mit einem Finger oder klickt es mit der Maus, um die Anwendung anweisen, eine bestimmte Aufgabe auszuführen. Im Gegensatz zur Button Ansicht hat die ImageButton Ansicht jedoch kein Konzept der Text- und Textdarstellung.

Hinweis

Während die Button Ansicht eine Image Eigenschaft definiert, mit der Sie ein Bild auf dem Buttonanzeigen können, soll diese Eigenschaft verwendet werden, wenn ein kleines Symbol neben dem Button Text angezeigt wird.

Die Codebeispiele in diesem Handbuch stammen aus dem FormsGallery-Beispiel.

Festlegen der Bildquelle

ImageButton definiert eine Source Eigenschaft, die auf das bild festgelegt werden soll, das in der Schaltfläche angezeigt werden soll, wobei die Bildquelle entweder eine Datei, ein URI, eine Ressource oder ein Stream ist. Weitere Informationen zum Laden von Bildern aus verschiedenen Quellen finden Sie unter Images in Xamarin.Forms.

Das folgende Beispiel zeigt, wie ein ImageButton in XAML instanziieren wird:

<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>

Die Source -Eigenschaft gibt das Bild an, das in ImageButtonangezeigt wird. In diesem Beispiel ist es auf eine lokale Datei festgelegt, die aus jedem Plattformprojekt geladen wird, was zu den folgenden Screenshots führt:

Standardmäßig ist das ImageButton rechteckig, aber Sie können ihm mit der CornerRadius -Eigenschaft abgerundete Ecken geben. Weitere Informationen zur ImageButton Darstellung finden Sie unter ImageButton-Darstellung.

Hinweis

Ein ImageButton kann zwar eine animierte GIF-Datei laden, zeigt jedoch nur den ersten Frame der GIF an.

Das folgende Beispiel zeigt, wie Sie eine Seite erstellen, die funktional dem vorherigen XAML-Beispiel entspricht, aber vollständig in 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 }
        };
    }
}

Behandeln von ImageButton-Klicks

ImageButton definiert ein Clicked Ereignis, das ausgelöst wird, wenn der Benutzer mit einem ImageButton Finger- oder Mauszeiger darauf tippt. Das Ereignis wird ausgelöst, wenn der Finger oder die Maustaste von der Oberfläche des ImageButtonfreigegeben wird. Die ImageButton -Eigenschaft muss auf true festgelegt seinIsEnabled, um auf Tippen zu reagieren.

Das folgende Beispiel zeigt, wie ein ImageButton in XAML instanziieren und dessen Ereignis behandelt wird Clicked :

<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>

Das Clicked Ereignis ist auf einen Ereignishandler namens OnImageButtonClicked festgelegt, der sich in der CodeBehind-Datei befindet:

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")}";
    }
}

Wenn die ImageButton angetippt wird, wird die OnImageButtonClicked-Methode ausgeführt. Das sender Argument ist ImageButton für dieses Ereignis verantwortlich. Sie können dies verwenden, um auf das ImageButton -Objekt zuzugreifen oder zwischen mehreren ImageButton Objekten zu unterscheiden, die dasselbe Clicked Ereignis gemeinsam nutzen.

Dieser spezielle Clicked Handler erhöht einen Zähler und zeigt den Zählerwert in einem an Label:

Das folgende Beispiel zeigt, wie Sie eine Seite erstellen, die funktional dem vorherigen XAML-Beispiel entspricht, aber vollständig in 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")}";
    }
}

Deaktivieren des ImageButton-Steuerelements

Manchmal befindet sich eine Anwendung in einem bestimmten Zustand, in dem ein bestimmter ImageButton Klick kein gültiger Vorgang ist. In diesen Fällen sollte der ImageButton deaktiviert werden, indem die IsEnabled -Eigenschaft auf falsefestgelegt wird.

Verwenden der Befehlsschnittstelle

Es ist möglich, dass eine Anwendung auf ImageButton Tippen reagiert, ohne das Clicked Ereignis zu behandeln. Implementiert ImageButton einen alternativen Benachrichtigungsmechanismus, der als Befehl oder Befehlsschnittstelle bezeichnet wird. Dies besteht aus zwei Eigenschaften:

Command vom Typ ICommand, eine im System.Windows.Input Namespace definierte Schnittstelle.
CommandParameter -Eigenschaft vom Typ Object.

Dieser Ansatz eignet sich im Zusammenhang mit der Datenbindung und insbesondere bei der Implementierung der MVVM-Architektur (Model-ViewModel).

Weitere Informationen zur Verwendung der Befehlsschnittstelle finden Sie unter Verwenden der Befehlsschnittstelle im Button-Leitfaden .

Drücken und Freigeben des ImageButton

Neben dem Clicked-Ereignis definiert das ImageButton-Element auch die Ereignisse Pressed und Released. Das Pressed -Ereignis tritt auf, wenn ein Finger auf einen ImageButtondrückt oder eine Maustaste gedrückt wird, wobei der Zeiger über den ImageButtonpositioniert wird. Das Released Ereignis tritt auf, wenn der Finger oder die Maustaste losgelassen wird. Im Allgemeinen wird das Clicked Ereignis auch zur gleichen Zeit wie das Released Ereignis ausgelöst, aber wenn der Finger- oder Mauszeiger von der Oberfläche des ImageButton entfernt wird, bevor er freigegeben wird, tritt das Clicked Ereignis möglicherweise nicht auf.

Weitere Informationen zu diesen Ereignissen finden Sie unter Drücken und Freigeben der Schaltfläche im Button-Leitfaden .

ImageButton-Darstellung

Zusätzlich zu den Eigenschaften, die ImageButton von der View -Klasse erbt, definiert auch mehrere Eigenschaften, ImageButton die sich auf die Darstellung auswirken:

Aspect wird das Bild so skaliert, dass es dem Anzeigebereich entspricht.
BorderColor ist die Farbe eines Bereichs, der den umgibt ImageButton.
BorderWidth ist die Breite des Rahmens.
CornerRadius ist der Eckradius von ImageButton.

Die Aspect -Eigenschaft kann auf eines der Member der Aspect Enumeration festgelegt werden:

Fill - dehnt das Bild, um vollständig und genau zu ImageButtonfüllen. Dies kann dazu führen, dass das Bild verzerrt wird.
AspectFill – Klammern des Bilds, sodass es das ImageButton Bild füllt, während das Seitenverhältnis beibehalten wird.
AspectFit - Das Bild wird (falls erforderlich) in Briefkästen so eingefügt, dass das gesamte Bild in das ImageButtonpasst, wobei oben/unten oder an den Seiten leer leer ist, je nachdem, ob das Bild breit oder hoch ist. Dies ist der Standardwert der Aspect Enumeration.

Hinweis

Die ImageButton -Klasse verfügt auch über Margin - und Padding -Eigenschaften, die das Layoutverhalten von ImageButtonsteuern. Weitere Informationen finden Sie unter Ränder und Abstände.

Visuelle ImageButton-Zustände

ImageButton verfügt über eine PressedVisualState , die verwendet werden kann, um eine visuelle Änderung am zu ImageButton initiieren, wenn vom Benutzer gedrückt wird, vorausgesetzt, es ist aktiviert.

Das folgende XAML-Beispiel zeigt, wie ein visueller Zustand für den Pressed Zustand definiert wird:

<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>

Gibt PressedVisualState an, Scale dass die ImageButton -Eigenschaft beim Drücken von vom Standardwert 1 auf 0,8 geändert wird. Gibt NormalVisualState an, dass seine Eigenschaft auf 1 festgelegt wird, Scale wenn sich die ImageButton Eigenschaft in einem normalen Zustand befindet. Daher besteht der Gesamteffekt darin, dass beim Drücken von etwas ImageButton kleiner skaliert wird, und wenn der ImageButton freigegeben wird, es auf seine Standardgröße neu skaliert wird.

Weitere Informationen zu visuellen Zuständen finden Sie unter Visual Xamarin.Forms State Manager.

FormsGallery-Beispiel

Xamarin.Forms Imagebutton

Festlegen der Bildquelle

Behandeln von ImageButton-Klicks

Deaktivieren des ImageButton-Steuerelements

Verwenden der Befehlsschnittstelle

Drücken und Freigeben des ImageButton

ImageButton-Darstellung

Visuelle ImageButton-Zustände

Verwandte Links

Zusätzliche Ressourcen