TouchBehavior

[アーティクル]
04/08/2024

TouchBehavior は、タッチ、マウスクリック、ホバーイベントに基づいて、あらゆる VisualElement とやり取りする機能を提供する Behavior です。 TouchBehavior 実装を使用すると、BackgroundColor、Opacity、Rotation、Scale や、他の多くのプロパティにアタッチされている VisualElement のさまざまなビジュアルプロパティをカスタマイズできます。

Note

ツールキットには、Image 要素の Source をカスタマイズする機能も提供することで、この TouchBehavior を拡張する ImageTouchBehavior 実装も用意されています。

重要

.NET MAUI Community Toolkit のビヘイビアーでは、ビヘイビアーの BindingContext は設定されません。ビヘイビアーはスタイルを利用して共有し、複数のコントロールに適用できるためです。詳細については、「.NET MAUI のビヘイビアー」を参照してください

構文

次の例は、TouchBehavior を親 HorizontalStackLayout に追加し、ユーザーが HorizontalStackLayout またはその子をタッチまたはクリックしたときに次のアニメーションを実行する方法を示しています。

250 ミリ秒間にわたってアニメーション化されます
CubicInOut Easing を適用する
Opacity を 0.6 に変更します
Scale を 0.8 に変更します

XAML

XAML 名前空間を含める

XAML でこのツールキットを使用するには、次の xmlns をページまたはビューに追加する必要があります。

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

したがって、以下のコードは、

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

次のように、xmlns を含むように変更されます。

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

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

この CommunityToolkit.Maui.Markup パッケージを使うと、より簡潔な方法でこの Behavior を 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
            });
    }
}

追加の例

ホバー操作の処理

TouchBehavior は、要素の上にマウスポインターが置かれているかどうかに基づいて、アタッチされた VisualElement のプロパティをカスタマイズする機能を提供します。

次の例では、TouchBehavior を HorizontalStackLayout にアタッチし、ユーザーがマウスカーソルをレイアウトといずれかの子要素の上に置いたときに、 HorizontalStackLayout の BackgroundColor と Scale を変更する方法を示します。

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

長押し操作の処理

TouchBehavior は、ユーザーが長時間押したときにシナリオを処理する機能を提供します。この期間は、ミリ秒単位の LongPressDuration で定義できます。

次の例に、TouchBehavior を HorizontalStackLayout に追加し、バッキングビューモデルで定義されている IncreaseLongPressCountCommand に LongPressCommand をバインドし、LongPressDuration を 750 ミリ秒に設定する方法を示します。

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

Properties

プロパティ	タイプ	説明
コマンド	`ICommand`	ユーザーがタッチジェスチャを完了したときに呼び出す `ICommand` を取得または設定します。
CommandParameter	`object`	`Command` プロパティに渡すパラメーターを取得または設定します。
CurrentHoverState	`HoverState`	動作の現在の `HoverState` を取得または設定します。
CurrentHoverStatus	`HoverStatus`	動作の現在の `HoverStatus` を取得または設定します。
CurrentInteractionStatus	`TouchInteractionStatus`	動作の現在の `TouchInteractionStatus` を取得または設定します。
CurrentTouchState	`TouchState`	動作の現在の `TouchState` を取得または設定します。
CurrentTouchStatus	`TouchStatus`	動作の現在の `TouchStatus` を取得または設定します。
DefaultAnimationDuration	`int`	`CurrentTouchState` プロパティが `TouchState.Default` の場合のアニメーションの継続時間を取得または設定します。
DefaultAnimationEasing	`Easing`	`CurrentTouchState` プロパティが `TouchState.Default` の場合のアニメーションのイージングを取得または設定します。
DefaultBackgroundColor	`Color`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の要素の背景色を取得または設定します。
DefaultOpacity	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の要素の不透明度を取得または設定します。
DefaultRotation	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の、要素の X および Y 軸の両方を中心とした回転を取得または設定します。
DefaultRotationX	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の、要素の X 軸を中心とした回転を取得または設定します。
DefaultRotationY	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の、要素の Y 軸を中心とした回転を取得または設定します。
DefaultScale	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の要素のスケールを取得または設定します。
DefaultTranslationX	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の要素の X 変換を取得または設定します。
DefaultTranslationY	`double`	`CurrentTouchState` プロパティが `TouchState.Default` の場合の要素の Y 変換を取得または設定します。
DisallowTouchThreshold	`int`	タッチを禁止するしきい値を取得または設定します。
HoveredAnimationDuration	`int`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合のアニメーションの継続時間を取得または設定します。
HoveredAnimationEasing	`Easing`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合のアニメーションのイージングを取得または設定します。
HoveredBackgroundColor	`Color`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の要素の背景色を取得または設定します。
HoveredOpacity	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の要素の不透明度を取得または設定します。
HoveredRotation	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の、要素の X および Y 軸の両方を中心とした回転を取得または設定します。
HoveredRotationX	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の、要素の X 軸を中心とした回転を取得または設定します。
HoveredRotationY	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の、要素の Y 軸を中心とした回転を取得または設定します。
HoveredScale	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の要素のスケールを取得または設定します。
HoveredTranslationX	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の要素の X 変換を取得または設定します。
HoveredTranslationY	`double`	`CurrentHoverState` プロパティが `HoverState.Hovered` の場合の要素の Y 変換を取得または設定します。
IsEnabled	`bool`	動作が有効であるどうかを示す値を取得または設定します。
LongPressCommand	`ICommand`	ユーザーが長押しを完了したときに呼び出す `ICommand` を取得または設定します。
LongPressCommandParameter	`object`	`LongPressCommand` プロパティに渡すパラメーターを取得または設定します。
LongPressDuration	`int`	長押しジェスチャをトリガーするために必要な時間 (ミリ秒単位) を取得または設定します。
PressedAnimationDuration	`int`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合のアニメーションの継続時間を取得または設定します。
PressedAnimationEasing	`Easing`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合のアニメーションのイージングを取得または設定します。
PressedBackgroundColor	`Color`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の要素の背景色を取得または設定します。
PressedOpacity	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の要素の不透明度を取得または設定します。
PressedRotation	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の、要素の X および Y 軸の両方を中心とした回転を取得または設定します。
PressedRotationX	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の、要素の X 軸を中心とした回転を取得または設定します。
PressedRotationY	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の、要素の Y 軸を中心とした回転を取得または設定します。
PressedScale	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の要素のスケールを取得または設定します。
PressedTranslationX	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の要素の X 変換を取得または設定します。
PressedTranslationY	`double`	`CurrentTouchState` プロパティが `TouchState.Pressed` の場合の要素の Y 変換を取得または設定します。
ShouldMakeChildrenInputTransparent	`bool`	要素の子で、入力を透過的にするかどうかを示す値を取得または設定します。

Events

Event	説明
`CurrentTouchStateChanged`	`CurrentTouchState` が変更されたときに発生します。
`CurrentTouchStatusChanged`	`CurrentTouchStatus` が変更されたときに発生します。
`HoverStateChanged`	`CurrentHoverState` が変更されたときに発生します。
`HoverStatusChanged`	`CurrentHoverStatus` が変更されたときに発生します。
`InteractionStatusChanged`	`CurrentInteractionStatus` が変更されたときに発生します。
`LongPressCompleted`	長押しジェスチャが完了すると発生します。
`TouchGestureCompleted`	タッチジェスチャが完了すると発生します。

例

このビヘイビアーの動作の例は .NET MAUI Community Toolkit サンプルアプリケーションで確認できます。

API

TouchBehavior のソースコードは、.NET MAUI Community Toolkit の GitHub リポジトリにあります。

Xamarin Community Toolkit からの移行

Xamarin Community Toolkit には、アプリを Xamarin.Forms から .NET MAUI にアップグレードする場合、次のように注意すべき破壊的変更がいくつかある TouchEffect がありました。

API 名の変更
TouchBehavior は PlatformBehavior として実装されるようになりました

API 名の変更

Xamarin Community Toolkit での名前	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 (`ImageTouchBehavior` に移動されました)
NormalBackgroundImageAspect	DefaultImageAspect (`ImageTouchBehavior` に移動されました)

TouchBehavior は `PlatformBehavior` として実装されるようになりました

Xamarin Community Toolkit では、TouchEffect は AttachedEffect として実装されていました。この効果を使うには、添付プロパティを使い、任意の VisualElement に適用します

.NET MAUI では、TouchBehavior は PlatformBehavior として実装されます。これは、要素の動作コレクションに適用されるようになりました。詳細については、「プラットフォームの動作」を参照してください。

注: .NET MAUI の既定では、PlatformBehavior は BindingContext プロパティを設定しません。これは、ビヘイビアーをスタイルで共有できるためです。 TouchBehavior は、適用先の VisualElement と同じ BindingContext プロパティを設定します。つまり、スタイルを介して要素間で TouchBehavior を共有 "しないでください"。

Xamarin.Forms のビューに適用される TouchEffect の例を次に示します。

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

.NET MAUI の同等の TouchBehavior は次のようになります。

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

次の方法で共有

TouchBehavior

構文

XAML

XAML 名前空間を含める

TouchBehavior の使用

C#

C# Markup

追加の例

ホバー操作の処理

長押し操作の処理

Properties

Events

例

API

Xamarin Community Toolkit からの移行

API 名の変更

TouchBehavior は `PlatformBehavior` として実装されるようになりました

その他のリソース

次の方法で共有

TouchBehavior

構文

XAML

XAML 名前空間を含める

TouchBehavior の使用

C#

C# Markup

追加の例

ホバー操作の処理

長押し操作の処理

Properties

Events

例

API

Xamarin Community Toolkit からの移行

API 名の変更

TouchBehavior は PlatformBehavior として実装されるようになりました

その他のリソース

TouchBehavior は `PlatformBehavior` として実装されるようになりました