ImageTouchBehavior

Articolo
04/02/2024

Estende ImageTouchBehavior l'oggetto TouchBehavior offrendo la possibilità di personalizzare Image gli elementi in base agli eventi tocco, clic del mouse e passaggio del mouse. L'implementazione ImageTouchBehavior consente di personalizzare la Source proprietà dell'elemento Image a cui è associato.

Nota

Per altre opzioni di personalizzazione, ImageTouchBehavior vedere l'implementazione TouchBehavior estesa Behavior .

Importante

I comportamenti di .NET MAUI Community Toolkit non impostano l'oggetto BindingContext di un comportamento, perché i comportamenti possono essere condivisi e applicati a più controlli tramite stili. Per altre informazioni, vedere Comportamenti MAUI di .NET

Sintassi

Gli esempi seguenti illustrano come aggiungere ImageTouchBehavior a un Image oggetto e alternare HoveredImageSourceDefaultImageSourcetra e e PressedImageSource quando gli utenti interagiscono con l'immagine tramite interazioni basate sul tocco o basate sul mouse.

XAML

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

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

Uso di AnimationBehavior

<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}"
                DefaultImageSource="button.png"
                HoveredImageSource="button_hovered.png"
                PressedImageSource="button_pressed.png" />
        </Image.Behaviors>
    </Image>

</ContentPage>

C#

Può ImageTouchBehavior essere usato come indicato di seguito 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# Markup

Il CommunityToolkit.Maui.Markup pacchetto offre un modo molto più conciso per usarlo Behavior in C#.

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

Proprietà

Proprietà	Type	Descrizione
DefaultImageAspect	`Aspect`	Ottiene o imposta l'oggetto `Aspect` nella modalità predefinita di interazione, che essenzialmente non è alcuna interazione.
DefaultImageSource	`ImageSource`	Ottiene o imposta l'oggetto `ImageSource` nella modalità predefinita di interazione, che essenzialmente non è alcuna interazione.
HoveredImageAspect	`Aspect`	Ottiene o imposta l'oggetto `Aspect` quando si posiziona il puntatore del mouse sull'oggetto `VisualElementBehavior` a cui è collegato.
HoveredImageSource	`ImageSource`	Ottiene o imposta l'oggetto `ImageSource` quando si posiziona il puntatore del mouse sull'oggetto `VisualElementBehavior` a cui è collegato.
PressedImageAspect	`Aspect`	Ottiene o imposta l'oggetto `Aspect` quando l'utente ha premuto il tocco o il mouse sull'oggetto `VisualElement` a cui `Behavior` è collegato.
PressedImageSource	`ImageSource`	Ottiene o imposta l'oggetto `ImageSource` quando l'utente ha premuto il tocco o il mouse sull'oggetto `VisualElement` a cui `Behavior` è collegato.
ShouldSetImageOnAnimationEnd	`bool`	Ottiene o imposta un valore che indica se l'immagine deve essere impostata al termine dell'animazione.

Per le altre proprietà disponibili, vedere la sezione proprietà TouchBehavior.

Esempi

È possibile trovare un esempio di questo comportamento in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per ImageTouchBehavior over nel repository GitHub di .NET MAUI Community Toolkit.

Condividi tramite