TouchBehavior

Artikel
04/07/2024

Das TouchBehavior ist ein Behavior, das die Möglichkeit bietet, mit jeder VisualElement basierend auf Touch-, Mausklick- und Hoverereignissen zu interagieren. Die TouchBehavior-Implementierung ermöglicht es, viele verschiedene visuelle Eigenschaften der VisualElement, die and diese angefügt ist, anzupassen, z. B. die BackgroundColor, Opacity, Rotation und Scale, sowie viele andere Eigenschaften.

Hinweis

Das Toolkit bietet auch die ImageTouchBehavior-Implementierung, die diese TouchBehavior erweitert, indem es auch die Möglichkeit bietet, die Source eines Image-Elements anzupassen.

Wichtig

.NET MAUI Community Toolkit Behaviors legt den BindingContext eines Verhaltens nicht fest, da Verhalten über Stile freigegeben und auf mehrere Steuerelemente angewendet werden können. Weitere Informationen finden Sie unter .NET MAUI Behaviors.

Syntax

Die folgenden Beispiele zeigen, wie sie TouchBehavior einem übergeordneten Element HorizontalStackLayout hinzufügen und die folgenden Animationen ausführen, wenn ein Benutzer die HorizontalStackLayout untergeordneten Elemente berührt oder klickt:

animiert über einen Zeitraum von 250 Millisekunden
wendet CubicInOut Easing an
ändert die Opacity in 0,6
ändert die Scale in 0,8

XAML

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Der folgende Abschnitt:

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

Würde dann geändert werden, um xmlns einzubinden:

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

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

TouchBehavior kann wie folgt in C# verwendet werden:

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

Das Paket CommunityToolkit.Maui.Markup bietet eine viel präzisere Möglichkeit, dieses Behavior in C# zu verwenden.

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

Weitere Beispiele

Behandeln von Hoverinteraktionen

Die TouchBehavior bietet die Möglichkeit, die Eigenschaften der angefügten VisualElement anzupassen, je nachdem, ob der Mauszeiger über dem Element bewegt wird.

Das folgende Beispiel zeigt, wie Sie die TouchBehavior an eine HorizontalStackLayout anfügen und die BackgroundColor und Scale der HorizontalStackLayout ändern, wenn ein Benutzer mit dem Mauszeiger auf das Layout und alle untergeordneten Elemente zeigt.

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

Behandeln von Interaktionen mit langem Drücken

Die TouchBehavior bietet die Möglichkeit, das Szenario zu behandeln, wenn ein Benutzer über einen längeren Zeitraum drückt. Dieser Zeitraum kann durch LongPressDuration definiert werden, das in Millisekunden angegeben wird.

Das folgende Beispiel zeigt, wie Sie die TouchBehavior einem HorizontalStackLayouthinzufügen, die LongPressCommand an die im Sicherungsansichtsmodell definierten IncreaseLongPressCountCommand binden und die LongPressDuration auf 750 Millisekunden festlegen.

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

Eigenschaften

Eigenschaft	Typ	Beschreibung
Get-Help	`ICommand`	Ruft die `ICommand` ab, die aufgerufen werden soll, wenn der Benutzer eine Touchgeste abgeschlossen hat, oder legt diese fest.
CommandParameter	`object`	Dient zum Abrufen oder Festlegen des Parameters, der an die `Command`-Eigenschaft übergeben werden soll.
CurrentHoverState	`HoverState`	Dient zum Abrufen oder Festlegen des aktuellen `HoverState`-Verhaltens.
CurrentHoverStatus	`HoverStatus`	Dient zum Abrufen oder Festlegen des aktuellen `HoverStatus`-Verhaltens.
CurrentInteractionStatus	`TouchInteractionStatus`	Dient zum Abrufen oder Festlegen des aktuellen `TouchInteractionStatus`-Verhaltens.
CurrentTouchState	`TouchState`	Dient zum Abrufen oder Festlegen des aktuellen `TouchState`-Verhaltens.
CurrentTouchStatus	`TouchStatus`	Dient zum Abrufen oder Festlegen des aktuellen `TouchStatus`-Verhaltens.
DefaultAnimationDuration	`int`	Ruft die Dauer der Animation ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist, oder legt sie fest.
DefaultAnimationEasing	`Easing`	Dient zum Abrufen oder Festlegen der Beschleunigung der Animation, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DefaultBackgroundColor	`Color`	Dient zum Abrufen oder Festlegen der Hintergrundfarbe des Elements, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DefaultOpacity	`double`	Dient zum Abrufen oder Festlegen der Deckkraft des Elements, wenn die `CurrentTouchState` Eigenschaft `TouchState.Default` ist.
DefaultRotation	`double`	Ruft die Drehung um die X- und Y-Achsen des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DefaultRotationX	`double`	Ruft die Drehung um die X-Achse des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DefaultRotationY	`double`	Ruft die Drehung um die Y-Achse des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DefaultScale	`double`	Ruft die Skalierung des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist, oder legt diese fest.
DefaultTranslationX	`double`	Ruft die X-Übersetzung des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist, oder legt diese fest.
DefaultTranslationY	`double`	Dient zum Abrufen oder Festlegen der Y-Übersetzung des Elements, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Default` ist.
DisallowTouchThreshold	`int`	Ruft den Schwellenwert zum Aufheben der Fingereingabe ab oder legt ihn fest.
HoveredAnimationDuration	`int`	Ruft die Dauer der Animation ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist, oder legt sie fest.
HoveredAnimationEasing	`Easing`	Dient zum Abrufen oder Festlegen der Beschleunigung der Animation, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredBackgroundColor	`Color`	Dient zum Abrufen oder Festlegen der Hintergrundfarbe des Elements, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredOpacity	`double`	Dient zum Abrufen oder Festlegen der Deckkraft des Elements, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredRotation	`double`	Ruft die Drehung um die X- und Y-Achsen des Elements ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredRotationX	`double`	Ruft die Drehung um die X-Achse des Elements ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredRotationY	`double`	Ruft die Drehung um die Y-Achse des Elements ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
HoveredScale	`double`	Ruft die Skalierung des Elements ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist, oder legt diese fest.
HoveredTranslationX	`double`	Ruft die X-Übersetzung des Elements ab, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist, oder legt diese fest.
HoveredTranslationY	`double`	Dient zum Abrufen oder Festlegen der Y-Übersetzung des Elements, wenn die `CurrentHoverState`-Eigenschaft `HoverState.Hovered` ist.
IsEnabled	`bool`	Ruft einen Wert ab, der angibt, ob das Verhalten aktiviert ist, oder legt diesen fest.
LongPressCommand	`ICommand`	Ruft den `ICommand` ab, der aufgerufen werden soll, wenn der Benutzer ein langes Drücken abgeschlossen hat, oder legt diesen fest.
LongPressCommandParameter	`object`	Dient zum Abrufen oder Festlegen des Parameters, der an die `LongPressCommand`-Eigenschaft übergeben werden soll.
LongPressDuration	`int`	Ruft die Dauer in Millisekunden ab, die zum Auslösen der langen Druckgeste erforderlich ist, oder legt sie fest.
PressedAnimationDuration	`int`	Ruft die Dauer der Animation ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist, oder legt sie fest.
PressedAnimationEasing	`Easing`	Dient zum Abrufen oder Festlegen der Beschleunigung der Animation, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedBackgroundColor	`Color`	Dient zum Abrufen oder Festlegen der Hintergrundfarbe des Elements, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedOpacity	`double`	Dient zum Abrufen oder Festlegen der Deckkraft des Elements, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedRotation	`double`	Ruft die Drehung um die X- und Y-Achsen des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedRotationX	`double`	Ruft die Drehung um die X-Achse des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedRotationY	`double`	Ruft die Drehung um die Y-Achse des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
PressedScale	`double`	Ruft die Skalierung des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist, oder legt diese fest.
PressedTranslationX	`double`	Ruft die X-Übersetzung des Elements ab, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist, oder legt diese fest.
PressedTranslationY	`double`	Dient zum Abrufen oder Festlegen der Y-Übersetzung des Elements, wenn die `CurrentTouchState`-Eigenschaft `TouchState.Pressed` ist.
ShouldMakeChildrenInputTransparent	`bool`	Dient zum Abrufen oder Festlegen eines Werts, der angibt, ob die untergeordneten Elemente des Elements eingabetransparent gemacht werden sollen.

Ereignisse

Event	Beschreibung
`CurrentTouchStateChanged`	Wird ausgelöst, wenn sich `CurrentTouchState` ändert.
`CurrentTouchStatusChanged`	Wird ausgelöst, wenn sich `CurrentTouchStatus` ändert.
`HoverStateChanged`	Wird ausgelöst, wenn sich `CurrentHoverState` ändert.
`HoverStatusChanged`	Wird ausgelöst, wenn sich `CurrentHoverStatus` ändert.
`InteractionStatusChanged`	Wird ausgelöst, wenn sich `CurrentInteractionStatus` ändert.
`LongPressCompleted`	Wird ausgelöst, wenn eine lange Druckgeste abgeschlossen wurde.
`TouchGestureCompleted`	Wird ausgelöst, wenn eine Touchgeste abgeschlossen wurde.

Beispiele

Sie finden ein Beispiel für dieses Verhalten in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für TouchBehavior über das GitHub-Repository für das .NET MAUI Community Toolkit.

Migrieren von Xamarin Community Toolkit

Im Xamarin Community Toolkit gab es TouchEffect, wenn Sie ein Upgrade für eine App von Xamarin.Forms auf .NET MAUI durchführen, gibt es einige Breaking Changes, die Sie beachten sollten:

API-Namensänderungen
TouchBehavior ist jetzt implementiert als PlatformBehavior

API-Namensänderungen

Name im Xamarin Community Toolkit	Name im 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 (in `ImageTouchBehavior` verschoben)
NormalBackgroundImageAspect	DefaultImageAspect (In `ImageTouchBehavior` verschoben)

TouchBehavior ist jetzt implementiert als `PlatformBehavior`

Im Xamarin Community Toolkit wurde TouchEffect als AttachedEffect implementiert. Um den Effekt zu verwenden, verwenden Sie die angefügten Eigenschaften und wenden sie auf jedes VisualElement an

Weitere Informationen zur Implementierung von TouchBehavior in .NET MAUI als PlatformBehavior, was jetzt auf die Elementverhaltenssammlung angewendet wird, finden Sie unter Platform Behaviors.

Hinweis: In .NET MAUI wird PlatformBehavior die Eigenschaft BindingContext nicht standardmäßig festgelegen. Dies liegt daran, dass Behaviors in Formatvorlagen freigegeben werden kann. TouchBehavior legt die Eigenschaft BindingContext gleich VisualElement fest, auf das sie angewendet wird. Dies bedeutet, dass Sie TouchBehavior nicht zwischen Elementen über Formatvorlagen teilen sollten.

Nachfolgend finden Sie ein Beispiel für einen TouchEffect, der auf eine Ansicht in Xamarin.Forms angewendet wird:

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

Das Äquivalent TouchBehavior in .NET MAUI würde wie folgt aussehen:

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

Freigeben über

TouchBehavior

Syntax

XAML

Einbinden des XAML-Namespace

Verwenden von TouchBehavior

C#

C#-Markup

Weitere Beispiele

Behandeln von Hoverinteraktionen

Behandeln von Interaktionen mit langem Drücken

Eigenschaften

Ereignisse

Beispiele

API

Migrieren von Xamarin Community Toolkit

API-Namensänderungen

TouchBehavior ist jetzt implementiert als `PlatformBehavior`

Zusätzliche Ressourcen

Freigeben über

TouchBehavior

Syntax

XAML

Einbinden des XAML-Namespace

Verwenden von TouchBehavior

C#

C#-Markup

Weitere Beispiele

Behandeln von Hoverinteraktionen

Behandeln von Interaktionen mit langem Drücken

Eigenschaften

Ereignisse

Beispiele

API

Migrieren von Xamarin Community Toolkit

API-Namensänderungen

TouchBehavior ist jetzt implementiert als PlatformBehavior

Zusätzliche Ressourcen

TouchBehavior ist jetzt implementiert als `PlatformBehavior`