TouchBehavior

Článek
04/05/2024

Jedná TouchBehavior se o možnost Behavior interakce s libovolnými VisualElement událostmi na základě dotykového ovládání, kliknutí myší a najetí myší. Implementace TouchBehavior umožňuje přizpůsobit mnoho různých vizuálních VisualElement vlastností, ke kterým je připojen, jako BackgroundColorje například , OpacityRotation a Scale, a mnoho dalších vlastností.

Poznámka:

Sada nástrojů také poskytuje implementaci ImageTouchBehavior , která ji TouchBehavior rozšiřuje, a poskytuje také možnost přizpůsobit Source Image prvek.

Důležité

Chování sady nástrojů .NET MAUI Community Toolkit nenastavuje BindingContext chování, protože chování lze sdílet a použít u více ovládacích prvků prostřednictvím stylů. Další informace najdete v tématu Chování rozhraní .NET MAUI.

Syntaxe

Následující příklady ukazují, jak přidat TouchBehavior do nadřazeného objektu a HorizontalStackLayout provést následující animace, když se uživatel dotkne nebo klikne na HorizontalStackLayout některou z podřízených položek:

animace za období 250 milisekund
CubicInOut použije Easing
Opacity změní na 0.6.
Scale změní na 0,8.

XAML

Zahrnutí oboru názvů XAML

Pokud chcete použít sadu nástrojů v XAML, musíte do stránky nebo zobrazení přidat následující xmlns položky:

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

Proto platí následující:

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

Bylo by změněno tak, aby zahrnovalo xmlns následující:

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

Použití TouchBehavioru

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

V TouchBehavior jazyce C# je možné ho použít následujícím způsobem:

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

Revize jazyka C#

Náš CommunityToolkit.Maui.Markup balíček nabízí mnohem stručnější způsob použití Behavior v jazyce 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
            });
    }
}

Další příklady

Zpracování interakce přechodu myší

Poskytuje TouchBehavior možnost přizpůsobit vlastnosti připojeného VisualElement na základě toho, zda myš najede myší na prvek.

Následující příklad ukazuje, jak připojit TouchBehavior k HorizontalStackLayout a změnit BackgroundColor a Scale kdy HorizontalStackLayout uživatel najede myší na rozložení a všechny podřízené prvky.

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

Zpracování dlouhé interakce s lisem

Poskytuje TouchBehavior možnost zpracovávat scénář, když uživatel po dlouhou dobu stiskne. Toto časové období může být definováno v LongPressDuration jednotkách milisekund.

Následující příklad ukazuje, jak přidat TouchBehavior do objektu HorizontalStackLayout, vytvořit vazbu LongPressCommand na IncreaseLongPressCountCommand definovaný v modelu backing view a nastavit LongPressDuration na 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>

Vlastnosti

Vlastnost	Type	Popis
Command	`ICommand`	Získá nebo nastaví `ICommand` vyvolání, když uživatel dokončí dotykové gesto.
CommandParameter	`object`	Získá nebo nastaví parametr předat do `Command` vlastnosti.
CurrentHoverState	`HoverState`	Získá nebo nastaví aktuální `HoverState` chování.
CurrentHoverStatus	`HoverStatus`	Získá nebo nastaví aktuální `HoverStatus` chování.
CurrentInteractionStatus	`TouchInteractionStatus`	Získá nebo nastaví aktuální `TouchInteractionStatus` chování.
CurrentTouchState	`TouchState`	Získá nebo nastaví aktuální `TouchState` chování.
CurrentTouchStatus	`TouchStatus`	Získá nebo nastaví aktuální `TouchStatus` chování.
DefaultAnimationDuration	`int`	Získá nebo nastaví dobu trvání animace, když `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultAnimationEasing	`Easing`	Získá nebo nastaví easing animace při `CurrentTouchState` vlastnosti je `TouchState.Default`.
DefaultBackgroundColor	`Color`	Získá nebo nastaví barvu pozadí prvku, když `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultOpacity	`double`	Získá nebo nastaví neprůhlednost prvku při `CurrentTouchState` vlastnosti je `TouchState.Default`.
Výchozírotace	`double`	Získá nebo nastaví otočení kolem osy X a Y prvku, pokud `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultRotationX	`double`	Získá nebo nastaví otočení kolem osy X prvku, pokud `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultRotationY	`double`	Získá nebo nastaví otočení kolem osy Y prvku, když `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultScale	`double`	Získá nebo nastaví měřítko prvku při `CurrentTouchState` vlastnosti je `TouchState.Default`.
DefaultTranslationX	`double`	Získá nebo nastaví X překlad prvku, když `CurrentTouchState` je `TouchState.Default`vlastnost .
DefaultTranslationY	`double`	Získá nebo nastaví Y překlad prvku, když `CurrentTouchState` je `TouchState.Default`vlastnost .
DisallowTouchThreshold	`int`	Získá nebo nastaví prahovou hodnotu pro zakázání dotykového ovládání.
HoveredAnimationDuration	`int`	Získá nebo nastaví dobu trvání animace, když `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredAnimationEasing	`Easing`	Získá nebo nastaví easing animace při `CurrentHoverState` vlastnosti je `HoverState.Hovered`.
HoveredBackgroundColor	`Color`	Získá nebo nastaví barvu pozadí prvku, když `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredOpacity	`double`	Získá nebo nastaví neprůhlednost prvku při `CurrentHoverState` vlastnosti je `HoverState.Hovered`.
HoveredRotation	`double`	Získá nebo nastaví otočení kolem osy X a Y prvku, pokud `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredRotationX	`double`	Získá nebo nastaví otočení kolem osy X prvku, pokud `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredRotationY	`double`	Získá nebo nastaví otočení kolem osy Y prvku, když `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredScale	`double`	Získá nebo nastaví měřítko prvku při `CurrentHoverState` vlastnosti je `HoverState.Hovered`.
HoveredTranslationX	`double`	Získá nebo nastaví X překlad prvku, když `CurrentHoverState` je `HoverState.Hovered`vlastnost .
HoveredTranslationY	`double`	Získá nebo nastaví Y překlad prvku, když `CurrentHoverState` je `HoverState.Hovered`vlastnost .
IsEnabled	`bool`	Získá nebo nastaví hodnotu označující, zda je chování povoleno.
LongPressCommand	`ICommand`	Získá nebo nastaví `ICommand` vyvolání, když uživatel dokončí dlouhé stisknutí.
LongPressCommandParameter	`object`	Získá nebo nastaví parametr předat do `LongPressCommand` vlastnosti.
LongPressDuration	`int`	Získá nebo nastaví dobu trvání v milisekundách potřebných k aktivaci dlouhého stisknutí gesta.
PressedAnimationDuration	`int`	Získá nebo nastaví dobu trvání animace, když `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedAnimationEasing	`Easing`	Získá nebo nastaví easing animace při `CurrentTouchState` vlastnosti je `TouchState.Pressed`.
PressedBackgroundColor	`Color`	Získá nebo nastaví barvu pozadí prvku, když `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedOpacity	`double`	Získá nebo nastaví neprůhlednost prvku při `CurrentTouchState` vlastnosti je `TouchState.Pressed`.
PressedRotation	`double`	Získá nebo nastaví otočení kolem osy X a Y prvku, pokud `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedRotationX	`double`	Získá nebo nastaví otočení kolem osy X prvku, pokud `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedRotationY	`double`	Získá nebo nastaví otočení kolem osy Y prvku, když `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedScale	`double`	Získá nebo nastaví měřítko prvku při `CurrentTouchState` vlastnosti je `TouchState.Pressed`.
PressedTranslationX	`double`	Získá nebo nastaví X překlad prvku, když `CurrentTouchState` je `TouchState.Pressed`vlastnost .
PressedTranslationY	`double`	Získá nebo nastaví Y překlad prvku, když `CurrentTouchState` je `TouchState.Pressed`vlastnost .
ShouldMakeChildrenInputTransparent	`bool`	Získá nebo nastaví hodnotu určující, zda podřízené položky prvku by měly být vstupní transparentní.

Události

Událost	Popis
`CurrentTouchStateChanged`	Aktivuje se při `CurrentTouchState` změnách.
`CurrentTouchStatusChanged`	Aktivuje se při `CurrentTouchStatus` změnách.
`HoverStateChanged`	Aktivuje se při `CurrentHoverState` změnách.
`HoverStatusChanged`	Aktivuje se při `CurrentHoverStatus` změnách.
`InteractionStatusChanged`	Aktivuje se při `CurrentInteractionStatus` změnách.
`LongPressCompleted`	Aktivuje se, když se dokončilo dlouhé gesto stisknutí.
`TouchGestureCompleted`	Aktivuje se, když se dokončí dotykové gesto.

Příklady

Příklad tohoto chování v akci najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód TouchBehavior najdete v úložišti .NET MAUI Community Toolkit na GitHubu.

Migrace ze sady nástrojů Xamarin Community Toolkit

V sadě nástrojů Xamarin Community Toolkit došlo k TouchEffect tomu, že pokud upgradujete aplikaci z Xamarin.Forms na .NET MAUI, měli byste vědět o některých zásadních změnách:

Změny názvu rozhraní API
TouchBehavior je teď implementovaný jako PlatformBehavior

Změny názvu rozhraní API

Název v sadě nástrojů Xamarin Community Toolkit	Název v komunitní sadě nástrojů MAUI
TouchEffect	TouchBehavior
NormalBackgroundColor	DefaultBackgroundColor
NormalScale	DefaultScale
NormalOpacity	DefaultOpacity
NormalTranslationX	DefaultTranslationX
NormalTranslationY	DefaultTranslationY
NormalRotation	Výchozírotace
NormalRotationX	DefaultRotationX
NormalRotationY	DefaultRotationY
NormalAnimationDuration	DefaultAnimationDuration
NormalAnimationEasing	DefaultAnimationEasing
NormalBackgroundImageSource	DefaultImageSource (přesunuto do `ImageTouchBehavior`)
NormalBackgroundImageAspect	DefaultImageAspect (přesunuto do `ImageTouchBehavior` )

TouchBehavior je teď implementovaný jako `PlatformBehavior`

V Xamarin Community Toolkit byla TouchEffect implementována jako AttachedEffect. Pokud chcete použít efekt, použijete připojené vlastnosti a použijete ho u všech VisualElement

V rozhraní .NET MAUI TouchBehavior se implementuje jako PlatformBehavior objekt, který je nyní použit pro kolekci chování prvků, viz Chování platformy další informace.

Poznámka: Ve výchozím nastavení v rozhraní .NET MAUI PlatformBehaviors vlastnost nenastaví BindingContext , je to proto, že chování lze sdílet ve stylech. BindingContext Nastaví TouchBehavior vlastnost, která VisualElement se rovná vlastnosti, na které se použije. To znamená, že byste neměli TouchBehavior sdílet mezi prvky prostřednictvím stylů.

Níže je příklad TouchEffect použití v zobrazení v 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);

Ekvivalent TouchBehavior v rozhraní .NET MAUI by vypadal takto:

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

Sdílet prostřednictvím

TouchBehavior

Syntaxe

XAML

Zahrnutí oboru názvů XAML

Použití TouchBehavioru

C#

Revize jazyka C#

Další příklady

Zpracování interakce přechodu myší

Zpracování dlouhé interakce s lisem

Vlastnosti

Události

Příklady

rozhraní API

Migrace ze sady nástrojů Xamarin Community Toolkit

Změny názvu rozhraní API

TouchBehavior je teď implementovaný jako `PlatformBehavior`

Další materiály

Sdílet prostřednictvím

TouchBehavior

Syntaxe

XAML

Zahrnutí oboru názvů XAML

Použití TouchBehavioru

C#

Revize jazyka C#

Další příklady

Zpracování interakce přechodu myší

Zpracování dlouhé interakce s lisem

Vlastnosti

Události

Příklady

rozhraní API

Migrace ze sady nástrojů Xamarin Community Toolkit

Změny názvu rozhraní API

TouchBehavior je teď implementovaný jako PlatformBehavior

Další materiály

TouchBehavior je teď implementovaný jako `PlatformBehavior`