TouchBehavior

Artykuł
04/05/2024

Jest TouchBehavior to element Behavior , który zapewnia możliwość interakcji z dowolnymi VisualElement na podstawie dotyku, kliknięcia myszy i aktywowania zdarzeń. Implementacja TouchBehavior umożliwia dostosowanie wielu różnych właściwości wizualnychVisualElement, do których jest dołączony, takich jak BackgroundColor, OpacityRotation i Scale, oraz wiele innych właściwości.

Uwaga

Zestaw narzędzi udostępnia również implementację ImageTouchBehavior , która rozszerza tę TouchBehavior funkcję, zapewniając również możliwość dostosowywania Source Image elementu.

Ważne

Zachowania zestawu narzędzi .NET MAUI Community Toolkit nie ustawiają BindingContext zachowania, ponieważ zachowania mogą być współużytkowane i stosowane do wielu kontrolek za pomocą stylów. Aby uzyskać więcej informacji, zobacz Zachowania maUI platformy .NET

Składnia

W poniższych przykładach pokazano, jak dodać element TouchBehavior do elementu nadrzędnego HorizontalStackLayout i wykonać następujące animacje, gdy użytkownik dotknie lub kliknie HorizontalStackLayout element podrzędny lub którykolwiek z jego elementów podrzędnych:

animuje w ciągu 250 milisekund
CubicInOut stosuje Easing
zmienia wartość Opacity na 0.6
zmienia wartość Scale na 0.8

XAML

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

W związku z tym następujące elementy:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Korzystanie z funkcji 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#

Można TouchBehavior go użyć w następujący sposób w języku 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;
    }
}

Znaczniki języka C#

Nasz CommunityToolkit.Maui.Markup pakiet zapewnia znacznie bardziej zwięzły sposób korzystania z niego Behavior w języku 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
            });
    }
}

Dodatkowe przykłady

Obsługa interakcji aktywowania

Zapewnia TouchBehavior możliwość dostosowania właściwości dołączonego VisualElement elementu na podstawie tego, czy wskaźnik myszy zatrzymał się na elemecie.

W poniższym przykładzie pokazano, jak dołączyć element TouchBehavior do elementu HorizontalStackLayout i zmienić BackgroundColor wartości i HorizontalStackLayout Scale, gdy użytkownik umieści kursor myszy nad układem i wszystkimi elementami podrzędnymi.

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

Obsługa długiej interakcji z prasą

Zapewnia TouchBehavior możliwość obsługi scenariusza, gdy użytkownik naciska przez długi czas. Ten okres czasu można zdefiniować w LongPressDuration jednostkach milisekund.

W poniższym przykładzie pokazano, jak dodać element TouchBehavior do elementu , powiązać LongPressCommand element z IncreaseLongPressCountCommand elementem HorizontalStackLayoutzdefiniowanym w modelu widoku kopii zapasowej i ustawić wartość LongPressDuration 750 milisekund.

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

Właściwości

Właściwości	Type	Opis
Command	`ICommand`	Pobiera lub ustawia `ICommand` element do wywołania, gdy użytkownik wykonał gest dotykowy.
Parametr polecenia	`object`	Pobiera lub ustawia parametr do przekazania do `Command` właściwości .
CurrentHoverState	`HoverState`	Pobiera lub ustawia bieżące `HoverState` zachowanie.
CurrentHoverStatus	`HoverStatus`	Pobiera lub ustawia bieżące `HoverStatus` zachowanie.
CurrentInteractionStatus	`TouchInteractionStatus`	Pobiera lub ustawia bieżące `TouchInteractionStatus` zachowanie.
CurrentTouchState	`TouchState`	Pobiera lub ustawia bieżące `TouchState` zachowanie.
CurrentTouchStatus	`TouchStatus`	Pobiera lub ustawia bieżące `TouchStatus` zachowanie.
DefaultAnimationDuration	`int`	Pobiera lub ustawia czas trwania animacji, gdy `CurrentTouchState` właściwość to `TouchState.Default`.
DefaultAnimationEasing	`Easing`	Pobiera lub ustawia złagodzenie animacji, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
DefaultBackgroundColor	`Color`	Pobiera lub ustawia kolor tła elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
Nieprzezroczystość domyślna	`double`	Pobiera lub ustawia nieprzezroczystość elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
Domyślnarotacja	`double`	Pobiera lub ustawia obrót wokół osi X i Y elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
DefaultRotationX	`double`	Pobiera lub ustawia rotację wokół osi X elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
DefaultRotationY	`double`	Pobiera lub ustawia obrót wokół osi Y elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
Domyślna skala	`double`	Pobiera lub ustawia skalę elementu, gdy `CurrentTouchState` właściwość ma wartość `TouchState.Default`.
DefaultTranslationX	`double`	Pobiera lub ustawia translacja X elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
DefaultTranslationY	`double`	Pobiera lub ustawia tłumaczenie elementu Y, gdy `CurrentTouchState` właściwość ma `TouchState.Default`wartość .
Nie zezwalaj na to, abyTouchThreshold	`int`	Pobiera lub ustawia próg, aby uniemożliwić dotyk.
HoveredAnimationDuration	`int`	Pobiera lub ustawia czas trwania animacji, gdy `CurrentHoverState` właściwość to `HoverState.Hovered`.
HoveredAnimationEasing	`Easing`	Pobiera lub ustawia złagodzenie animacji, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
HoveredBackgroundColor	`Color`	Pobiera lub ustawia kolor tła elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
Umieść kursor na nieprzezroczystości	`double`	Pobiera lub ustawia nieprzezroczystość elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
Zatrzymanie wskaźnika myszy	`double`	Pobiera lub ustawia obrót wokół osi X i Y elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
HoveredRotationX	`double`	Pobiera lub ustawia rotację wokół osi X elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
HoveredRotationY	`double`	Pobiera lub ustawia obrót wokół osi Y elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
HoveredScale	`double`	Pobiera lub ustawia skalę elementu, gdy `CurrentHoverState` właściwość ma wartość `HoverState.Hovered`.
HoveredTranslationX	`double`	Pobiera lub ustawia translacja X elementu, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
HoveredTranslationY	`double`	Pobiera lub ustawia tłumaczenie elementu Y, gdy `CurrentHoverState` właściwość ma `HoverState.Hovered`wartość .
IsEnabled	`bool`	Pobiera lub ustawia wartość wskazującą, czy zachowanie jest włączone.
LongPressCommand	`ICommand`	Pobiera lub ustawia `ICommand` element do wywołania po zakończeniu długiego naciśnięcia przez użytkownika.
LongPressCommandParameter	`object`	Pobiera lub ustawia parametr do przekazania do `LongPressCommand` właściwości .
LongPressDuration	`int`	Pobiera lub ustawia czas trwania w milisekundach wymaganych do wyzwolenia długiego gestu naciśnięcia.
PressedAnimationDuration	`int`	Pobiera lub ustawia czas trwania animacji, gdy `CurrentTouchState` właściwość to `TouchState.Pressed`.
PressedAnimationEasing	`Easing`	Pobiera lub ustawia złagodzenie animacji, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
PressedBackgroundColor	`Color`	Pobiera lub ustawia kolor tła elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
Naciśnięcie nieprzezroczystości	`double`	Pobiera lub ustawia nieprzezroczystość elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
Naciśnięcie klawiszaRotation	`double`	Pobiera lub ustawia obrót wokół osi X i Y elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
PressedRotationX	`double`	Pobiera lub ustawia rotację wokół osi X elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
PressedRotationY	`double`	Pobiera lub ustawia obrót wokół osi Y elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
Naciśnięty skalowanie	`double`	Pobiera lub ustawia skalę elementu, gdy `CurrentTouchState` właściwość ma wartość `TouchState.Pressed`.
PressedTranslationX	`double`	Pobiera lub ustawia translacja X elementu, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
PressedTranslationY	`double`	Pobiera lub ustawia tłumaczenie elementu Y, gdy `CurrentTouchState` właściwość ma `TouchState.Pressed`wartość .
ShouldMakeChildrenInputTransparent	`bool`	Pobiera lub ustawia wartość wskazującą, czy elementy podrzędne elementu powinny być wprowadzone jako przezroczyste.

Zdarzenia

Wydarzenie	opis
`CurrentTouchStateChanged`	Uruchamia się w przypadku `CurrentTouchState` zmian.
`CurrentTouchStatusChanged`	Uruchamia się w przypadku `CurrentTouchStatus` zmian.
`HoverStateChanged`	Uruchamia się w przypadku `CurrentHoverState` zmian.
`HoverStatusChanged`	Uruchamia się w przypadku `CurrentHoverStatus` zmian.
`InteractionStatusChanged`	Uruchamia się w przypadku `CurrentInteractionStatus` zmian.
`LongPressCompleted`	Uruchamia się po zakończeniu długiego gestu naciśnięcia.
`TouchGestureCompleted`	Uruchamia się po zakończeniu gestu dotykowego.

Przykłady

Przykład tego zachowania można znaleźć w przykładzie przykładowym aplikacji zestawu narzędzi .NET MAUI Community Toolkit.

interfejs API

Kod źródłowy można TouchBehavior znaleźć w repozytorium GitHub zestawu narzędzi .NET MAUI Community Toolkit.

Migrowanie z zestawu narzędzi Xamarin Community Toolkit

W zestawie narzędzi Xamarin Community Toolkit wystąpiły TouchEffect następujące zmiany, jeśli uaktualniasz aplikację z zestawu narzędzi Xamarin.Forms do platformy .NET MAUI, o których należy pamiętać:

Zmiany nazwy interfejsu API
Funkcja TouchBehavior jest teraz implementowana jako element PlatformBehavior

Zmiany nazwy interfejsu API

Nazwa w zestawie narzędzi Xamarin Community Toolkit	Nazwa w zestawie narzędzi MAUI Community Toolkit
TouchEffect	TouchBehavior
NormalBackgroundColor	DefaultBackgroundColor
NormalScale	Domyślna skala
Normalna nieprzezroczystość	Nieprzezroczystość domyślna
NormalTranslationX	DefaultTranslationX
NormalTranslationY	DefaultTranslationY
NormalRotation	Domyślnarotacja
NormalRotationX	DefaultRotationX
NormalRotationY	DefaultRotationY
NormalAnimationDuration	DefaultAnimationDuration
NormalAnimationEasing	DefaultAnimationEasing
NormalBackgroundImageSource	DefaultImageSource (przeniesiono do `ImageTouchBehavior`)
NormalBackgroundImageAspect	DefaultImageAspect (przeniesiony do `ImageTouchBehavior` )

Funkcja TouchBehavior jest teraz implementowana jako element `PlatformBehavior`

W zestawie narzędzi Xamarin Community Toolkit TouchEffect element został zaimplementowany jako element AttachedEffect. Aby użyć efektu, należy użyć dołączonych właściwości i zastosować do dowolnych VisualElement

W programie .NET MAUI TouchBehavior element jest implementowany jako PlatformBehavior element, który jest teraz stosowany do kolekcji zachowań elementów, zobacz Zachowania platformy , aby uzyskać więcej informacji.

Uwaga: domyślnie w programie .NET MAUI PlatformBehaviornie ustawi BindingContext właściwości, ponieważ zachowania mogą być współużytkowane w stylach. Właściwość TouchBehavior zostanie ustawiona na wartość równą BindingContext zastosowanej VisualElement właściwości . Oznacza to, że nie należy udostępniać TouchBehavior elementów za pośrednictwem stylów.

Poniżej przedstawiono przykład TouchEffect zastosowania do widoku na platformie 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);

Odpowiednik TouchBehavior w programie .NET MAUI wygląda następująco:

XAML
C#

<HorizontalStackLayout 
    HorizontalOptions="Center" 
    VerticalOptions="Center"
    x:Name="TouchableHorizontalLayout">
    <HorizontalStackLayout.Behaviors>
        <toolkit:TouchBehavior
            DefaultAnimationDuration="250"
            DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
            PressedOpacity="0.6"
            PressedScale="0.8"
            BindingContext="{Binding Path=BindingContext, Source={x:Reference TouchableHorizontalLayout}, x:DataType=HorizontalStackLayout}"
            Command="{Binding LayoutTappedCommand}" />
    </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,
            BindingContext = this.BindingContext
        }
    }
};

Udostępnij za pośrednictwem

TouchBehavior

Składnia

XAML

Dołączanie przestrzeni nazw XAML

Korzystanie z funkcji TouchBehavior

C#

Znaczniki języka C#

Dodatkowe przykłady

Obsługa interakcji aktywowania

Obsługa długiej interakcji z prasą

Właściwości

Zdarzenia

Przykłady

interfejs API

Migrowanie z zestawu narzędzi Xamarin Community Toolkit

Zmiany nazwy interfejsu API

Funkcja TouchBehavior jest teraz implementowana jako element `PlatformBehavior`

Dodatkowe zasoby

Udostępnij za pośrednictwem

TouchBehavior

Składnia

XAML

Dołączanie przestrzeni nazw XAML

Korzystanie z funkcji TouchBehavior

C#

Znaczniki języka C#

Dodatkowe przykłady

Obsługa interakcji aktywowania

Obsługa długiej interakcji z prasą

Właściwości

Zdarzenia

Przykłady

interfejs API

Migrowanie z zestawu narzędzi Xamarin Community Toolkit

Zmiany nazwy interfejsu API

Funkcja TouchBehavior jest teraz implementowana jako element PlatformBehavior

Dodatkowe zasoby

Funkcja TouchBehavior jest teraz implementowana jako element `PlatformBehavior`