ImageTouchBehavior

[アーティクル]
01/06/2025

ImageTouchBehavior は、タッチ、マウスクリック、ホバーイベントに基づいて Image 要素をカスタマイズする機能を提供することで、TouchBehavior を拡張します。 ImageTouchBehavior 実装により、アタッチされている Image 要素の Source プロパティをカスタマイズできます。

手記

ImageTouchBehavior のその他のカスタマイズオプションについては、この Behavior が拡張する TouchBehavior 実装を参照してください。

重要

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

構文

次の例では、ImageTouchBehavior を Image に追加し、ユーザーがタッチベースまたはマウスベースの操作で画像を操作するときに、DefaultImageSource、HoveredImageSource、および PressedImageSource を切り替える方法を示します。

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>

ImageTouchBehavior の使用

<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"
    x:Name="Page">

    <Image HeightRequest="100" WidthRequest="100">
        <Image.Behaviors>
            <toolkit:ImageTouchBehavior
                Command="{Binding Source={x:Reference Page}, Path=BindingContext.IncreaseTouchCountCommand, x:DataType=ContentPage}"
                DefaultImageSource="button.png"
                HoveredImageSource="button_hovered.png"
                PressedImageSource="button_pressed.png" />
        </Image.Behaviors>
    </Image>

</ContentPage>

C#

ImageTouchBehavior は、C# で次のように使用できます。

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        InitializeComponent();

        var image = new Image
        {
            HeightRequest = 100,
            WidthRequest = 100
        };

        var imageTouchBehavior = new ImageTouchBehavior
        {
            Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
            DefaultImageSource = "button.png",
            HoveredImageSource = "button_hovered.png",
            PressedImageSource = "button_pressed.png"
        };

        image.Behaviors.Add(imageTouchBehavior);

        Content = label;
    }
}

C# マークアップ

CommunityToolkit.Maui.Markup パッケージは、C# でこの Behavior を使用するためのより簡潔な方法を提供します。

using CommunityToolkit.Maui.Markup;

class TouchBehaviorPage : ContentPage
{
    public TouchBehaviorPage()
    {
        Content = new Image()
            .Size(100, 100)
            .Behaviors(new ImageTouchBehavior
            {
                Command = ((TouchBehaviorBehaviorViewModel)BindingContext).IncreaseTouchCountCommand,
                DefaultImageSource = "button.png",
                HoveredImageSource = "button_hovered.png",
                PressedImageSource = "button_pressed.png"
            });
    }
}

プロパティ

財産	種類	説明
DefaultImageAspect	`Aspect`	既定の対話モードの `Aspect` を取得または設定します。これは基本的に相互作用がありません。
既定の画像ソース	`ImageSource`	既定の対話モードの `ImageSource` を取得または設定します。これは基本的に相互作用がありません。
HoveredImageAspect	`Aspect`	この `Behavior` がアタッチされている `VisualElement` にマウスポインターを合わせたときに `Aspect` を取得または設定します。
HoveredImageSource	`ImageSource`	この `Behavior` がアタッチされている `VisualElement` にマウスポインターを合わせたときに `ImageSource` を取得または設定します。
PressedImageAspect	`Aspect`	この `Behavior` がアタッチされている `VisualElement` をユーザーがタッチ操作またはマウスで押したときの `Aspect` を取得または設定します。
PressedImageSource	`ImageSource`	この `Behavior` がアタッチされている `VisualElement` をユーザーがタッチ操作またはマウスで押したときの `ImageSource` を取得または設定します。
アニメーション終了時に画像を設定する	`bool`	アニメーションの終了時にイメージを設定するかどうかを示す値を取得または設定します。

使用可能なプロパティの残りの部分については、「touchBehavior プロパティの」セクションを参照してください。

使用例

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

API（アプリケーション・プログラミング・インターフェイス）

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

次の方法で共有