ImageButton

  • Artikel

Die .NET Multi-Platform App UI (.NET MAUI) ImageButton Ansicht kombiniert die Button Ansicht und die Image Ansicht, um eine Schaltfläche zu erstellen, deren Inhalt ein Bild ist. Wenn Sie mit dem Finger auf ImageButton drücken oder mit der Maus darauf klicken, weisen Sie die App an, eine Aufgabe auszuführen. Im Gegensatz zur ButtonImageButton Ansicht gibt es jedoch kein Konzept für Text und Textdarstellung.

ImageButton definiert die folgenden Eigenschaften:

  • Aspect, vom Typ Aspect, bestimmt, wie das Bild skaliert wird, um den Anzeigebereich anzupassen.
  • BorderColor, vom Typ Color, beschreibt die Rahmenfarbe der Schaltfläche.
  • BorderWidth, vom Typ double, definiert die Breite des Rahmens der Schaltfläche.
  • Command, vom Typ ICommand, definiert den Befehl, der beim Tippen auf die Schaltfläche ausgeführt wird.
  • CommandParameter, vom Typ object: ist der Parameter, der an den Command übergeben wird.
  • CornerRadius, vom Typ int, beschreibt den Eckenradius des Rahmens der Schaltfläche.
  • IsLoading, vom Typ bool, stellt den Ladestatus des Bilds dar. Der Standardwert dieser Eigenschaft ist false.
  • IsOpaque, vom Typ bool, bestimmt, ob .NET MAUI das Bild beim Rendern als undurchsichtig behandeln soll. Der Standardwert dieser Eigenschaft ist false.
  • IsPressed, vom Typ bool, gibt an, ob die Schaltfläche gedrückt wird. Der Standardwert dieser Eigenschaft ist false.
  • Padding, vom Typ Thickness, bestimmt den Innenabstand der Schaltfläche.
  • Source, vom Typ ImageSource, gibt ein Bild an, das als Inhalt der Schaltfläche angezeigt werden soll.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Die Eigenschaft Aspect kann für eines der Mitglieder der Aufzählung Aspect festgelegt werden:

  • Fill – streckt das Bild, sodass es den Bereich ImageButton vollständig und genau ausfüllt. Das kann zu einer Verzerrung des Bilds führen.
  • AspectFill – schneidet das Bild so zu, dass es den ImageButton ausfüllt und das Seitenverhältnis erhalten bleibt.
  • AspectFit – wendet das Letterboxformat auf das Bild an (falls erforderlich), sodass das gesamte Bild in den Bereich ImageButton passt, wobei oben/unten oder an den Seiten Leerraum hinzugefügt wird, je nachdem, ob das Bild breit oder hoch ist. Das ist der Standardwert der Aspect-Enumeration.
  • Center – zentriert das Bild im ImageButton unter Beibehaltung des Seitenverhältnisses.

Darüber hinaus definiert ImageButton die Ereignisse Clicked, Pressed und Released. Das Clicked-Ereignis wird ausgelöst, wenn ein ImageButton-Tippen mit einem Finger oder Mauszeiger von der Oberfläche der Schaltfläche losgelassen wird. Das Pressed-Ereignis wird ausgelöst, wenn ein Finger auf eine ImageButton drückt oder eine Maustaste gedrückt wird, wobei der Mauszeiger über dem ImageButton positioniert ist. Das Ereignis Released wird ausgelöst, wenn der Finger nicht mehr drückt oder die Maustaste losgelassen wird. Im Allgemeinen wird gleichzeitig mit dem Released-Ereignis auch ein Clicked-Ereignis ausgelöst, aber wenn der Finger oder Mauszeiger von der Oberfläche des ImageButton weggleitet, bevor er losgelassen wird, tritt das Clicked-Ereignis möglicherweise nicht ein.

Wichtig

Für die IsEnabled-Eigenschaft des ImageButton muss true festgelegt sein, damit es auf Antippen reagieren kann.

Erstellen eines ImageButton-Steuerelements

Zum Erstellen einer Bildschaltfläche erstellen Sie ein ImageButton-Objekt, legen dessen Source Eigenschaft fest und handeln das Clicked-Ereignis.

Das folgende XAML-Beispiel zeigt, wie ein ImageButton erstellt wird:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Die Source-Eigenschaft gibt den Text an, der auf der ImageButton angezeigt wird. Das Ereignis Clicked wird auf einen Ereignishandler mit dem Namen OnImageButtonClicked festgelegt. Dieser Handler befindet sich in der Code-Behind-Datei:

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 auf ImageButton getippt wird, wird die OnImageButtonClicked-Methode ausgeführt. Das Argument sender ist das ImageButton, das für dieses Ereignis verantwortlich ist. Sie können damit auf das ImageButton-Objekt zugreifen oder zwischen mehreren ImageButton-Objekten unterscheiden, die dasselbe Clicked-Ereignis teilen. Der Clicked-Handler erhöht einen Zähler und zeigt den Zählerwert in einem Label an:

Screenshot of an ImageButton.

Der entsprechende C#-Code zum Erstellen einer ImageButton-Datei lautet:

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

Verwenden der Befehlsschnittstelle

Eine App kann auf ImageButton-Tippen reagieren, ohne das Ereignis Clicked zu handeln. Das ImageButton implementiert einen alternativen Benachrichtigungsmechanismus, der Schnittstelle Befehl oder Befehlsgebung genannt wird. Dieser besteht aus zwei Eigenschaften:

Dieser Ansatz eignet sich in Verbindung mit der Datenbindung und insbesondere bei der Implementierung des Model-View-ViewModel (MVVM)-Musters. Weitere Informationen zur Befehlsgebung finden Sie unter Benutzung der Befehlsschnittstelle im Artikel Schaltfläche.

Drücken und Freigeben einer Bildschaltfläche

Das Pressed-Ereignis wird ausgelöst, wenn ein Finger auf eine ImageButton drückt oder eine Maustaste gedrückt wird, wobei der Mauszeiger über dem ImageButton Zeiger positioniert ist. Das Ereignis Released wird ausgelöst, wenn der Finger nicht mehr drückt oder die Maustaste losgelassen wird. Im Allgemeinen wird auch das Ereignis Clicked gleichzeitig mit dem Ereignis Released ausgelöst, aber wenn der Finger oder Mauszeiger von der Oberfläche des ImageButton weggleitet, bevor er losgelassen wird, tritt das Ereignis Clicked möglicherweise nicht ein.

Weitere Informationen zu diesen Ereignissen finden Sie unter Drücken und Loslassen der Taste im Artikel Taste.

Visuelle Zustände von ImageButton

ImageButton hat ein PressedVisualState, das verwendet werden kann, um einen visuellen Wechsel zum ImageButton zu initiieren, wenn es gedrückt wird, falls es aktiviert ist.

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

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

In diesem Beispiel legt PressedVisualState fest, dass beim Drücken von ImageButton die Eigenschaft Scale von ihrem Standardwert 1 auf 0,8 geändert wird. Der NormalVisualState Wert gibt an, dass die ImageButton-Eigenschaft bei einem normalen Status Scale auf 1 festgelegt wird. Daher ist der Gesamteffekt, dass die Skalierung von ImageButton bei gedrückter Taste etwas kleiner ist und wenn ImageButton losgelassen wird, auf seine Standardgröße skaliert wird.

Weitere Informationen zu visuellen Zuständen finden Sie unter Visuelle Zustände.

Deaktivieren eines ImageButton-Elements

Manchmal wechselt eine App in einen Status, in dem ein ImageButton-Klick kein gültiger Vorgang ist. In diesen Fällen sollte ImageButton deaktiviert werden, indem die Eigenschaft IsEnabled auf false festgelegt wird.