TouchBehavior

Das TouchBehavior ist ein Behavior, das die Interaktion mit jedem VisualElement über Touch-, Mausklick- und Hover-Ereignisse ermöglicht. Die TouchBehavior-Implementierung ermöglicht es, viele verschiedene visuelle Eigenschaften des VisualElement, an das sie angefügt ist, anzupassen, z. B. die BackgroundColor, Opacity, Rotation und Scale sowie viele andere Eigenschaften.

Syntax

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

• animiert über einen Zeitraum von 250 Millisekunden
• wendet CubicInOutEasing an
• ändert die Opacity auf 0,6
• ändert 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"

Daher Folgendes:

<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 geändert werden, um xmlns wie folgt einzufügen:

<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

Umgang mit Mouseover-Interaktionen

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 anhängen und die BackgroundColor und Scale der HorizontalStackLayout ändern, wenn ein Benutzer den Mauszeiger über das Layout und beliebige untergeordnete Elemente bewegt.

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

Umgang mit der Interaktion durch langes 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

Ereignisse

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:

1. API-Namensänderungen
2. TouchBehavior ist jetzt implementiert als PlatformBehavior

API-Namensänderungen

TouchBehavior ist jetzt als PlatformBehavior implementiert.

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: Standardmäßig legen PlatformBehaviors in .NET MAUI die Eigenschaft BindingContext nicht fest, da Behaviors in Formatvorlagen gemeinsam verwendet werden können. TouchBehavior legt die Eigenschaft BindingContext gleich VisualElement fest, auf das sie angewendet wird. Dies bedeutet, dass Sie das TouchBehavior zwischen Elementen über Formatvorlagen nicht teilen sollten.

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

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

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