ImageTouchBehavior

Artikel
01/04/2025

De ImageTouchBehavior breidt de TouchBehavior uit door de mogelijkheid te bieden om Image-elementen aan te passen op basis van aanraak-, klik- en zweefgebeurtenissen. De ImageTouchBehavior-implementatie maakt het mogelijk om de eigenschap Source van het Image element waaraan het is gekoppeld, aan te passen.

Notitie

Raadpleeg de TouchBehavior-implementatie die deze Behavior uitbreidt voor verdere aanpassingsopties in de ImageTouchBehavior.

Belangrijk

De .NET MAUI Community Toolkit Behaviors stellen de BindingContext van een gedrag niet in, omdat gedragingen kunnen worden gedeeld en toegepast op meerdere controles via stijlen. Raadpleeg voor meer informatie .NET MAUI-gedragingen

Syntaxis

In de volgende voorbeelden ziet u hoe u de ImageTouchBehavior toevoegt aan een Image en wisselt tussen de DefaultImageSource, HoveredImageSource en de PressedImageSource wanneer de gebruikers met de afbeelding werken door interacties op basis van aanraking of muis.

XAML

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

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

Daarom volgt het volgende:

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

Zou als volgt worden gewijzigd om de xmlns op te nemen:

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

ImageTouchBehavior gebruiken

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

De ImageTouchBehavior kan als volgt worden gebruikt in C#:

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

Ons CommunityToolkit.Maui.Markup pakket biedt een veel beknoptere manier om deze Behavior in C# te gebruiken.

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

Eigenschappen

Eigendom	Type	Beschrijving
DefaultImageAspect	`Aspect`	Hiermee haalt of stelt u de `Aspect` in in de standaardmodus van interactie, wat in feite geen interactie is.
StandaardAfbeeldingsbron	`ImageSource`	Hiermee haalt u de `ImageSource` op of stelt u deze in in de standaardinteractiemodus, wat in wezen geen interactie betekent.
HoveredImageAspect	`Aspect`	Stelt de `Aspect` in of haalt deze op wanneer de muis boven de `VisualElement` zweeft waaraan deze `Behavior` is gekoppeld.
HoveredImageSource	`ImageSource`	Haalt of stelt de `ImageSource` in wanneer de muis zich boven de `VisualElement` bevindt waarop deze `Behavior` is gekoppeld.
PressedImageAspect	`Aspect`	Hiermee haalt u de `Aspect` op of stelt u deze in wanneer de gebruiker heeft gedrukt met aanraking of met de muis op de `VisualElement` waaraan deze `Behavior` is gekoppeld.
PressedImageSource	`ImageSource`	Hiermee kunt u de `ImageSource` ophalen of instellen wanneer de gebruiker met aanraken of de muis op de `VisualElement` drukt waarop deze `Behavior` is gekoppeld.
AfbeeldingInstellenNaEindeAnimatie	`bool`	Hiermee wordt een waarde opgehaald of ingesteld die aangeeft of de afbeelding moet worden ingesteld wanneer de animatie eindigt.

Raadpleeg de TouchBehavior-eigenschappen sectie voor de rest van de beschikbare eigenschappen.

Voorbeelden

Je kunt een voorbeeld van dit gedrag in de praktijk vinden in de .NET MAUI Community Toolkit Voorbeeldtoepassing.

API

U vindt de broncode voor ImageTouchBehavior in de gitHub-opslagplaats van .NETHUB Community Toolkit.

Delen via