ImageButton

Die .NET Multi-Platform App UI (.NET MAUI) ImageButton-Ansicht kombiniert die Button-Ansicht und die Image-Ansicht, um eine Schaltfläche mit einem Bild als Inhalt zu erstellen. Wenn Sie mit einem Finger auf den ImageButton drücken oder mit der Maus darauf klicken, weist er die App an, eine Aufgabe auszuführen. Im Unterschied zum Button beinhaltet die ImageButton-Ansicht jedoch kein Konzept für Text und Textdarstellung.

ImageButton definiert die folgenden Eigenschaften:

• Aspect vom Typ Aspect legt fest, wie das Bild skaliert wird, damit es in den Anzeigebereich passt.
• BorderColor vom Typ Color beschreibt die Farbe des Rahmens der Schaltfläche.
• BorderWidth vom Typ double definiert die Breite des Rahmens der Schaltfläche.
• Command vom Typ ICommand definiert den Befehl, der ausgeführt wird, wenn die Schaltfläche angetippt wird.
• CommandParameter vom Typ object ist der Parameter, der an den Command übergeben wird.
• CornerRadius vom Typ int beschreibt den Eckenradius der Schaltfläche.
• IsLoading vom Typ bool steht für den Ladestatus des Bildes. Der Standardwert dieser Eigenschaft ist false.
• IsOpaque vom Typ bool legt fest, ob .NET MAUI das Bild beim Rendern als „nicht transparent“ behandeln soll. Der Standardwert dieser Eigenschaft ist false.
• IsPressed vom Typ bool zeigt an, ob die Schaltfläche gedrückt ist. Der Standardwert dieser Eigenschaft ist false.
• Padding vom Typ Thickness bestimmt den Abstand der Schaltfläche.
• Source vom Typ ImageSource gibt ein Bild an, das als Inhalt der Schaltfläche angezeigt wird.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

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

• Fill – streckt das Bild so, dass es den ImageButton vollständig und exakt ausfüllt. Dies kann zu einer Verzerrung des Bildes führen.
• AspectFill – beschneidet das Bild so, dass es den ImageButton ausfüllt und das Seitenverhältnis dabei beibehalten wird.
• AspectFit wendet (falls erforderlich) das Letterboxformat auf das Bild an, damit das Bild in den ImageButton passt, wobei abhängig davon, ob das Bild breit oder hoch ist, Leerraum am oberen bzw. unteren Rand oder seitlich hinzugefügt wird. Dies ist der Standardwert der Aspect-Enumeration.
• Center zentriert das Bild im ImageButton unter Beibehaltung des Seitenverhältnisses.

Darüber hinaus definiert er ImageButton-, Clicked-, Pressed- und Released-Ereignisse. Das Clicked-Ereignis wird beim-Antippen des ImageButton mit einem Finger oder Mauszeiger in dem Moment ausgelöst, in dem sich der Finger oder der Mauszeiger von der Oberfläche der Schaltfläche löst. Das Pressed-Ereignis wird ausgelöst, wenn ein Finger auf einen ImageButton drückt oder eine Maustaste gedrückt wird, während 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 ein Clicked-Ereignis auch gleichzeitig mit dem Released-Ereignis ausgelöst. Wenn der Finger oder der Mauszeiger jedoch vor dem Loslassen von der Oberfläche des ImageButton weg gleitet, tritt das Clicked-Ereignis möglicherweise nicht auf.

Wichtig

Die IsEnabled-Eigenschaft eines ImageButton muss auf true festgelegt sein, damit er auf Tippen reagiert.

Erstellen eines ImageButton

Um eine Bildschaltfläche zu erstellen, erstellen Sie ein ImageButton-Objekt, legen Sie dessen Source-Eigenschaft und einen Handler für dessen Clicked-Ereignis fest.

Das folgende XAML-Beispiel zeigt, wie eine 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 das Bild an, das auf dem ImageButton angezeigt wird. Das Clicked-Ereignis wird auf einen Ereignishandler mit dem Namen OnImageButtonClicked festgelegt. Dieser Handler befindet sich in der CodeBehind-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 den ImageButton getippt wird, wird die OnImageButtonClicked-Methode ausgeführt. Das sender-Argument ist der ImageButton, der für dieses Ereignis verantwortlich ist. Sie können dies verwenden, um auf das ImageButton-Objekt zuzugreifen oder zwischen mehreren ImageButton-Objekten mit dem gleichen Clicked-Ereignis zu unterscheiden. Der Clicked-Handler erhöht einen Zähler und zeigt den Zählerwert in einem Label an:

Der entsprechende C#-Code zum Erstellen eines ImageButton 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 Clicked-Ereignis zu behandeln. Der ImageButton implementiert einen alternativen Benachrichtigungsmechanismus, der als Befehls- oder Kommandoschnittstelle bezeichnet wird. Dies besteht aus zwei Eigenschaften:

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

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

Drücken und Freigeben eines ImageButton-Ereignisses

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

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

Visuelle Zustände von ImageButton

ImageButton verfügt über einen Pressed VisualState, der verwendet werden kann, um beim Drücken eine visuelle Änderung an der ImageButton zu initiieren, wenn sie 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>
            <VisualState x:Name="PointerOver" />            
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

In diesem Beispiel gibt der Pressed VisualState an, dass beim Drücken von ImageButton die Eigenschaft Scale von ihrem Standardwert 1 auf 0,8 geändert wird. Der Normal VisualState gibt an, dass die Eigenschaft Scale der ImageButton auf 1 festgelegt wird, wenn sie sich in einem normalen Zustand befindet. Daher ist der Gesamteffekt, dass beim Drücken von ImageButton die Skalierung etwas kleiner ist. Wenn ImageButton losgelassen wird, wird wieder auf die Standardgröße skaliert.

Wichtig

Damit ImageButton wieder in den Normal-Zustand zurückkehrt, muss auch VisualStateGroup einen PointerOver-Zustand definieren. Wenn Sie die von der Projektvorlage der .NET MAUI-App erstellten ResourceDictionary-Formatvorlagen verwenden, verfügen Sie bereits über eine implizite ImageButton-Formatvorlage, die den PointerOver-Zustand definiert.

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

Deaktivieren eines ImageButton-Elements

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