ImageTouchBehavior

Articolo
01/04/2025

Il ImageTouchBehavior estende il TouchBehavior offrendo la possibilità di personalizzare gli elementi di Image in base agli eventi tocco, clic del mouse e passaggio con il mouse. L'implementazione ImageTouchBehavior consente di personalizzare la proprietà Source dell'elemento Image a cui è collegata.

Nota

Per ulteriori opzioni di personalizzazione nella ImageTouchBehavior, fare riferimento all'implementazione TouchBehavior da cui questa Behavior estende.

Importante

I comportamenti di .NET MAUI Community Toolkit non impostano la BindingContext di un comportamento, perché i comportamenti possono essere condivisi e applicati a più controlli tramite stili. Per ulteriori informazioni, fare riferimento a Comportamenti di .NET MAUI

Sintassi

Gli esempi seguenti illustrano come aggiungere il ImageTouchBehavior a un Image e alternare tra l'DefaultImageSource, HoveredImageSource e il 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 il seguente xmlns nella tua pagina o 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 il 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 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#

Il ImageTouchBehavior può 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 pacchetto CommunityToolkit.Maui.Markup offre un modo molto più conciso per usare questa 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à	Digitare	Descrizione
AspettoPredefinitoImmagine	`Aspect`	Ottiene o imposta il `Aspect` nella modalità predefinita di interazione, che in pratica non comporta alcuna interazione.
FonteImmaginePredefinita	`ImageSource`	Ottiene o imposta il `ImageSource` nella modalità predefinita di interazione, che in sostanza significa assenza di interazione.
HoveredImageAspect	`Aspect`	Ottiene o imposta il `Aspect` quando il puntatore del mouse è sopra la `VisualElement` a cui è collegato questo `Behavior`.
HoveredImageSource	`ImageSource`	Ottiene o imposta il `ImageSource` quando il mouse passa sopra il `VisualElement` a cui questa `Behavior` è collegata.
PressedImageAspect	`Aspect`	Ottiene o imposta il `Aspect` quando l'utente ha premuto con il tocco o con il mouse su cui questo `Behavior` è collegato `VisualElement`.
PressedImageSource	`ImageSource`	Ottiene o imposta il `ImageSource` quando l'utente ha premuto con il tocco o con il mouse sul `VisualElement` a cui questo `Behavior` è collegato.
ImpostaImmagineSuFineAnimazione	`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 le proprietà di TouchBehavior.

Esempi

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

API (Interfaccia di Programmazione delle Applicazioni)

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

Condividi tramite