ImageTouchBehavior

Artikel
01/09/2025

Die ImageTouchBehavior erweitert die TouchBehavior, indem sie die Möglichkeit bietet, Image Elemente basierend auf Toucheingaben, Mausklick- und Mauszeigerereignissen anzupassen. Die ImageTouchBehavior-Implementierung ermöglicht es, die Source-Eigenschaft des Image-Elements anzupassen, an das es angefügt ist.

Anmerkung

Weitere Anpassungsoptionen in der ImageTouchBehavior finden Sie in der TouchBehavior-Implementierung, die dieses Behavior erweitert.

Wichtig

.NET MAUI Community Toolkit Behaviors legt den BindingContext eines Verhaltens nicht fest, da Verhalten über Stile freigegeben und auf mehrere Steuerelemente angewendet werden können. Weitere Informationen finden Sie unter .NET MAUI Behaviors.

Syntax

Die folgenden Beispiele zeigen, wie Sie den ImageTouchBehavior einem Image hinzufügen und zwischen dem DefaultImageSource, HoveredImageSource und dem PressedImageSource hin- und herschalten, wenn die Benutzer mit dem Bild durch touchbasierte oder mausbasierte Interaktionen interagieren.

XAML

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Der folgende Abschnitt:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Würde dann geändert werden, um xmlns einzubinden:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Verwenden des ImageTouchBehavior

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.TouchBehaviorPage"
    x:Name="Page">

    <Image HeightRequest="100" WidthRequest="100">
        <Image.Behaviors>
            <toolkit:ImageTouchBehavior
                Command="{Binding Source={x:Reference Page}, Path=BindingContext.IncreaseTouchCountCommand, x:DataType=ContentPage}"
                DefaultImageSource="button.png"
                HoveredImageSource="button_hovered.png"
                PressedImageSource="button_pressed.png" />
        </Image.Behaviors>
    </Image>

</ContentPage>

C#

Die ImageTouchBehavior kann wie folgt in C# verwendet werden:

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        InitializeComponent();

        var image = new Image
        {
            HeightRequest = 100,
            WidthRequest = 100
        };

        var imageTouchBehavior = new ImageTouchBehavior
        {
            Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
            DefaultImageSource = "button.png",
            HoveredImageSource = "button_hovered.png",
            PressedImageSource = "button_pressed.png"
        };

        image.Behaviors.Add(imageTouchBehavior);

        Content = label;
    }
}

C#-Markup

Unser CommunityToolkit.Maui.Markup-Paket bietet eine viel präzisere Möglichkeit, diese Behavior in C# zu verwenden.

using CommunityToolkit.Maui.Markup;

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        Content = new Image()
            .Size(100, 100)
            .Behaviors(new ImageTouchBehavior
            {
                Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
                DefaultImageSource = "button.png",
                HoveredImageSource = "button_hovered.png",
                PressedImageSource = "button_pressed.png"
            });
    }
}

Eigenschaften

Eigentum	type	Beschreibung
DefaultImageAspect	`Aspect`	Ruft den `Aspect`-Standardmodus der Interaktion ab oder legt ihn fest. Dies ist im Wesentlichen keine Interaktion.
Standardbildquelle	`ImageSource`	Ruft den `ImageSource`-Standardmodus der Interaktion ab oder legt ihn fest. Dies ist im Wesentlichen keine Interaktion.
HoveredImageAspect	`Aspect`	Ruft den `Aspect` ab, wenn der Mauszeiger über die `VisualElement` dieses `Behavior` angefügt wird, oder legt diesen fest.
HoveredImageSource	`ImageSource`	Ruft den `ImageSource` ab, wenn der Mauszeiger über die `VisualElement` dieses `Behavior` angefügt wird, oder legt diesen fest.
PressedImageAspect	`Aspect`	Dient zum Abrufen oder Festlegen des `Aspect`, wenn der Benutzer mit der Fingereingabe oder der Maus auf dem `VisualElement` dieses `Behavior` verbunden ist.
PressedImageSource	`ImageSource`	Dient zum Abrufen oder Festlegen des `ImageSource`, wenn der Benutzer mit der Fingereingabe oder der Maus auf dem `VisualElement` dieses `Behavior` verbunden ist.
ShouldSetImageOnAnimationEnd	`bool`	Dient zum Abrufen oder Festlegen eines Werts, der angibt, ob das Bild festgelegt werden soll, wenn die Animation endet.

Weitere Informationen zu den verfügbaren Eigenschaften finden Sie im Abschnitt TouchBehavior-Eigenschaften.

Beispiele

Sie finden ein Beispiel für dieses Verhalten in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für ImageTouchBehavior über das GitHub-Repository für das .NET MAUI Community Toolkit.

Freigeben über