TouchBehavior

Articolo
04/05/2024

TouchBehavior è un oggetto Behavior che consente di interagire con qualsiasi VisualElement evento in base al tocco, al clic del mouse e al passaggio del mouse. L'implementazione TouchBehavior consente di personalizzare molte proprietà visive diverse dell'oggetto VisualElement a cui è associato, ad esempio BackgroundColor, Rotation Opacitye Scale, nonché molte altre proprietà.

Nota

Il toolkit fornisce anche l'implementazione ImageTouchBehavior che estende questa TouchBehavior funzionalità offrendo anche la possibilità di personalizzare l'oggetto Source di un Image elemento.

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 l'oggetto TouchBehavior a un elemento padre HorizontalStackLayout ed eseguire le animazioni seguenti quando un utente tocca o fa clic su HorizontalStackLayout o su uno dei relativi elementi figlio:

anima in un periodo di 250 millisecondi
applica l'oggetto CubicInOut Easing
modifica l'oggetto in Opacity 0.6
modifica l'oggetto in Scale 0.8

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 TouchBehavior

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

   <HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <HorizontalStackLayout.Behaviors>
            <toolkit:TouchBehavior
                DefaultAnimationDuration="250"
                DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                PressedOpacity="0.6"
                PressedScale="0.8" />
        </HorizontalStackLayout.Behaviors>

        <ContentView
            HeightRequest="100"
            WidthRequest="10"
            BackgroundColor="Gold" />
        <Label Text="The entire layout receives touches" VerticalOptions="Center" LineBreakMode="TailTruncation"/>
        <ContentView
            HeightRequest="100"
            WidthRequest="10"
            BackgroundColor="Gold" />
    </HorizontalStackLayout>

</ContentPage>

C#

Può TouchBehavior essere usato come indicato di seguito in C#:

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        var firstContent = new ContentView
        {
            HeightRequest = 100,
            WidthRequest = 10,
            BackgroundColor = Colors.Gold
        };

        var label = new Label
        {
            Text = "The entire layout receives touches",
            VerticalOptions = LayoutOptions.Center,
            LineBreakMode = LineBreakMode.TailTruncation
        };

        var secondContent = new ContentView
        {
            HeightRequest = 100,
            WidthRequest = 10,
            BackgroundColor = Colors.Gold
        };

        var layout = new HorizontalStackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            Children = 
            {
                firstContent,
                label,
                secondContent
            }
        }

        var touchBehavior = new TouchBehavior
        {
            DefaultAnimationDuration = 250,
            DefaultAnimationEasing = Easing.CubicInOut,
            PressedOpacity = 0.6,
            PressedScale = 0.8
        };

        layout.Behaviors.Add(touchBehavior);

        Content = layout;
    }
}

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 HorizontalStackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            Children = 
            {
                new ContentView()
                    .Size(10, 100)
                    .BackgroundColor(Colors.Gold),

                new Label
                {
                    LineBreakMode = LineBreakMode.TailTruncation
                }
                    .Text("The entire layout receives touches"
                    .CenterVertical(),

                new ContentView()
                    .Size(10, 100)
                    .BackgroundColor(Colors.Gold)
            }
        }
            .Behaviors(new TouchBehavior
            {
                DefaultAnimationDuration = 250,
                DefaultAnimationEasing = Easing.CubicInOut,
                PressedOpacity = 0.6,
                PressedScale = 0.8
            });
    }
}

Esempi aggiuntivi

Gestione dell'interazione al passaggio del mouse

TouchBehavior Offre la possibilità di personalizzare le proprietà dell'oggetto associato VisualElement in base al fatto che il puntatore del mouse si posiziona sull'elemento.

Nell'esempio seguente viene illustrato come collegare l'oggetto TouchBehavior a un HorizontalStackLayout oggetto e modificare e BackgroundColor Scale di HorizontalStackLayout quando un utente passa il puntatore del mouse sul layout e su qualsiasi elemento figlio.

<HorizontalStackLayout
    Padding="20"
    Background="Black"
    HorizontalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            HoveredBackgroundColor="{StaticResource Gray900}"
            HoveredScale="1.2" />
    </HorizontalStackLayout.Behaviors>
</HorizontalStackLayout>

Gestione dell'interazione con pressione prolungata

TouchBehavior offre la possibilità di gestire lo scenario quando un utente preme per un lungo periodo di tempo. Questo periodo di tempo può essere definito da , LongPressDuration espresso in unità di millisecondi.

Nell'esempio TouchBehavior seguente viene illustrato come aggiungere a un HorizontalStackLayoutoggetto , associare l'oggetto LongPressCommand all'oggetto IncreaseLongPressCountCommand definito nel modello di visualizzazione di backup e impostare su LongPressDuration 750 millisecondi.

<HorizontalStackLayout
    Padding="20"
    Background="Black"
    HorizontalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            LongPressDuration="750"
            LongPressCommand="{Binding Source={x:Reference Page}, Path=BindingContext.IncreaseLongPressCountCommand}"/>
    </HorizontalStackLayout.Behaviors>
</HorizontalStackLayout>

Proprietà

Proprietà	Type	Descrizione
Comando	`ICommand`	Ottiene o imposta l'oggetto `ICommand` da richiamare quando l'utente ha completato un movimento di tocco.
CommandParameter	`object`	Ottiene o imposta il parametro da passare alla `Command` proprietà .
CurrentHoverState	`HoverState`	Ottiene o imposta l'oggetto corrente `HoverState` del comportamento.
CurrentHoverStatus	`HoverStatus`	Ottiene o imposta l'oggetto corrente `HoverStatus` del comportamento.
CurrentInteractionStatus	`TouchInteractionStatus`	Ottiene o imposta l'oggetto corrente `TouchInteractionStatus` del comportamento.
CurrentTouchState	`TouchState`	Ottiene o imposta l'oggetto corrente `TouchState` del comportamento.
CurrentTouchStatus	`TouchStatus`	Ottiene o imposta l'oggetto corrente `TouchStatus` del comportamento.
DefaultAnimationDuration	`int`	Ottiene o imposta la durata dell'animazione quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultAnimationEasing	`Easing`	Ottiene o imposta l'interpolazione dell'animazione quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultBackgroundColor	`Color`	Ottiene o imposta il colore di sfondo dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultOpacity	`double`	Ottiene o imposta l'opacità dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultRotation	`double`	Ottiene o imposta la rotazione intorno agli assi X e Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultRotationX	`double`	Ottiene o imposta la rotazione attorno all'asse X dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultRotationY	`double`	Ottiene o imposta la rotazione attorno all'asse Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultScale	`double`	Ottiene o imposta la scala dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultTranslationX	`double`	Ottiene o imposta la conversione X dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DefaultTranslationY	`double`	Ottiene o imposta la conversione Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Default`.
DisallowTouchThreshold	`int`	Ottiene o imposta la soglia per impedire il tocco.
HoveredAnimationDuration	`int`	Ottiene o imposta la durata dell'animazione quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredAnimationEasing	`Easing`	Ottiene o imposta l'interpolazione dell'animazione quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredBackgroundColor	`Color`	Ottiene o imposta il colore di sfondo dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredOpacity	`double`	Ottiene o imposta l'opacità dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredRotation	`double`	Ottiene o imposta la rotazione intorno agli assi X e Y dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredRotationX	`double`	Ottiene o imposta la rotazione attorno all'asse X dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredRotationY	`double`	Ottiene o imposta la rotazione attorno all'asse Y dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredScale	`double`	Ottiene o imposta la scala dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredTranslationX	`double`	Ottiene o imposta la conversione X dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
HoveredTranslationY	`double`	Ottiene o imposta la conversione Y dell'elemento quando la `CurrentHoverState` proprietà è `HoverState.Hovered`.
IsEnabled	`bool`	Ottiene o imposta un valore che indica se il comportamento è abilitato.
LongPressCommand	`ICommand`	Ottiene o imposta l'oggetto `ICommand` da richiamare quando l'utente ha completato una pressione lunga.
LongPressCommandParameter	`object`	Ottiene o imposta il parametro da passare alla `LongPressCommand` proprietà .
LongPressDuration	`int`	Ottiene o imposta la durata in millisecondi necessaria per attivare il movimento di pressione prolungata.
PressedAnimationDuration	`int`	Ottiene o imposta la durata dell'animazione quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedAnimationEasing	`Easing`	Ottiene o imposta l'interpolazione dell'animazione quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedBackgroundColor	`Color`	Ottiene o imposta il colore di sfondo dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedOpacity	`double`	Ottiene o imposta l'opacità dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedRotation	`double`	Ottiene o imposta la rotazione intorno agli assi X e Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedRotationX	`double`	Ottiene o imposta la rotazione attorno all'asse X dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedRotationY	`double`	Ottiene o imposta la rotazione attorno all'asse Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedScale	`double`	Ottiene o imposta la scala dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedTranslationX	`double`	Ottiene o imposta la conversione X dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
PressedTranslationY	`double`	Ottiene o imposta la conversione Y dell'elemento quando la `CurrentTouchState` proprietà è `TouchState.Pressed`.
ShouldMakeChildrenInputTransparent	`bool`	Ottiene o imposta un valore che indica se gli elementi figlio dell'elemento devono essere resi trasparenti per l'input.

Eventi

Evento	Descrizione
`CurrentTouchStateChanged`	Viene generato quando `CurrentTouchState` cambia.
`CurrentTouchStatusChanged`	Viene generato quando `CurrentTouchStatus` cambia.
`HoverStateChanged`	Viene generato quando `CurrentHoverState` cambia.
`HoverStatusChanged`	Viene generato quando `CurrentHoverStatus` cambia.
`InteractionStatusChanged`	Viene generato quando `CurrentInteractionStatus` cambia.
`LongPressCompleted`	Viene generato quando un movimento di pressione lungo è stato completato.
`TouchGestureCompleted`	Viene generato quando un movimento di tocco è stato completato.

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 TouchBehavior over nel repository GitHub di .NET MAUI Community Toolkit.

Migrazione da Xamarin Community Toolkit

In Xamarin Community Toolkit è presente TouchEffect se si esegue l'aggiornamento di un'app da Xamarin.Forms a .NET MAUI sono state apportate alcune modifiche di rilievo che è necessario tenere presente:

Modifiche al nome dell'API
TouchBehavior è ora implementato come PlatformBehavior

Modifiche al nome dell'API

Nome in Xamarin Community Toolkit	Nome in MAUI Community Toolkit
TouchEffect	TouchBehavior
NormalBackgroundColor	DefaultBackgroundColor
NormalScale	DefaultScale
NormalOpacity	DefaultOpacity
NormalTranslationX	DefaultTranslationX
NormalTranslationY	DefaultTranslationY
NormalRotation	DefaultRotation
NormalRotationX	DefaultRotationX
NormalRotationY	DefaultRotationY
NormalAnimationDuration	DefaultAnimationDuration
NormalAnimationEasing	DefaultAnimationEasing
NormalBackgroundImageSource	DefaultImageSource (spostato in `ImageTouchBehavior`)
NormalBackgroundImageAspect	DefaultImageAspect (spostato in `ImageTouchBehavior` )

TouchBehavior è ora implementato come `PlatformBehavior`

In Xamarin Community Toolkit è TouchEffect stato implementato come AttachedEffect. Per usare l'effetto si userebbero le proprietà associate e si applicano a qualsiasi VisualElement

In .NET MAUI TouchBehavior viene implementato come che PlatformBehavior viene ora applicato alla raccolta di comportamenti degli elementi, vedere Comportamenti della piattaforma per altre informazioni.

Nota: per impostazione predefinita in .NET MAUI PlatformBehaviors non imposta la BindingContext proprietà , perché i comportamenti possono essere condivisi negli stili. L'oggetto TouchBehavior imposta la BindingContext proprietà uguale all'oggetto VisualElement a cui viene applicato. Ciò significa che non è consigliabile condividere tra gli TouchBehavior elementi tramite stili.

Di seguito è riportato un esempio di applicazione TouchEffect a una vista in Xamarin.Forms:

XAML
C#

<StackLayout Orientation="Horizontal"
            HorizontalOptions="CenterAndExpand"
            xct:TouchEffect.AnimationDuration="250"
            xct:TouchEffect.AnimationEasing="{x:Static Easing.CubicInOut}"
            xct:TouchEffect.PressedScale="0.8"
            xct:TouchEffect.PressedOpacity="0.6"
            xct:TouchEffect.Command="{Binding Command}">
    <BoxView Color="Gold" />
    <Label Text="The entire layout receives touches" />
    <BoxView Color="Gold"/>
</StackLayout>

var stackLayout = new StackLayout()
{
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    Orientation = StackOrientation.Horizontal,
    Children =
    {
        new BoxView() { Color = Color.Gold, },
        new Label() { Text = "The entire layout receives touches", },
        new BoxView() { Color = Color.Gold, },
    }
};

TouchEffect.SetAnimationDuration(stackLayout, 250);
TouchEffect.SetAnimationEasing(stackLayout, Easing.CubicInOut);
TouchEffect.SetPressedScale(stackLayout, 0.8);
TouchEffect.SetPressedOpacity(stackLayout, 0.6);
TouchEffect.SetCommand(stackLayout, command);

L'equivalente TouchBehavior in .NET MAUI sarà simile al seguente:

XAML
C#

<HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            DefaultAnimationDuration="250"
            DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
            PressedOpacity="0.6"
            PressedScale="0.8"
            Command="{Binding Command}" />
    </HorizontalStackLayout.Behaviors>

    <ContentView
        BackgroundColor="Gold"
        HeightRequest="100"
        WidthRequest="10" />
    <Label
        LineBreakMode="TailTruncation"
        Text="The entire layout receives touches"
        VerticalOptions="Center" />
    <ContentView
        BackgroundColor="Gold"
        HeightRequest="100"
        WidthRequest="10" />
</HorizontalStackLayout>

var stackLayout = new HorizontalStackLayout()
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Children =
    {
        new ContentView()
        {
            BackgroundColor = Colors.Gold,
            HeightRequest = 100,
            WidthRequest = 10,
        },
        new Label()
        {
            LineBreakMode = LineBreakMode.TailTruncation,
            Text = "The entire layout receives touches",
            VerticalOptions = LayoutOptions.Center,
        },
        new ContentView()
        {
            BackgroundColor = Colors.Gold,
            HeightRequest = 100,
            WidthRequest = 10,
        },
    },
    Behaviors =
    {
        new TouchBehavior()
        {
            DefaultAnimationDuration = 250,
            DefaultAnimationEasing = Easing.CubicInOut,
            PressedOpacity = 0.6,
            PressedScale = 0.8,
            Command = command,
        }
    }
};

Condividi tramite

TouchBehavior

Sintassi

XAML

Inclusione dello spazio dei nomi XAML

Uso di TouchBehavior

C#

C# Markup

Esempi aggiuntivi

Gestione dell'interazione al passaggio del mouse

Gestione dell'interazione con pressione prolungata

Proprietà

Eventi

Esempi

API

Migrazione da Xamarin Community Toolkit

Modifiche al nome dell'API

TouchBehavior è ora implementato come `PlatformBehavior`

Risorse aggiuntive

Condividi tramite

TouchBehavior

Sintassi

XAML

Inclusione dello spazio dei nomi XAML

Uso di TouchBehavior

C#

C# Markup

Esempi aggiuntivi

Gestione dell'interazione al passaggio del mouse

Gestione dell'interazione con pressione prolungata

Proprietà

Eventi

Esempi

API

Migrazione da Xamarin Community Toolkit

Modifiche al nome dell'API

TouchBehavior è ora implementato come PlatformBehavior

Risorse aggiuntive

TouchBehavior è ora implementato come `PlatformBehavior`