スワイプ ジェスチャの認識

.NET マルチプラットフォーム アプリ UI (.NET MAUI) のスワイプ ジェスチャ認識エンジンは、指が画面を水平方向または垂直方向に動いたことを検出し、コンテンツ内のナビゲーションを開始するためによく使用されます。

.NET MAUI では、ドラッグ ジェスチャの認識機能は SwipeGestureRecognizer クラスで提供されます。 このクラスでは、次のプロパティが定義されています。

• Command は ICommand 型で、スワイプ ジェスチャが認識されたときに実行されます。
• CommandParameter: object 型、Command に渡されるパラメーター。
• Direction は SwipeDirection で、方向を定義します。
• Threshold は uint 型で、デバイスに依存しない単位で、スワイプを認識するために達成する必要がある最小のスワイプ距離を表します。 このプロパティの既定値は 100 です。つまり、デバイスに依存しない単位で 100 未満のスワイプは無視されます。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

また、SwipeGestureRecognizer はスワイプが認識されたときに発生する Swiped イベントも定義します。 Swiped イベントに付随する SwipedEventArgs オブジェクトでは、次のプロパティが定義されています。

• Direction は SwipeDirection 型で、スワイプ ジェスチャの方向を示します。
• Parameter は object 型で、定義されている場合は、CommandParameter プロパティによって渡される値を示します。

SwipeGestureRecognizer を作成する

View にスワイプ ジェスチャを認識させるには、SwipeGestureRecognizer オブジェクトを作成し、Direction プロパティを SwipeDirection 列挙値 (Left、Right、Up、または Down) に設定し、必要に応じて Threshold プロパティを設定し、Swiped イベントを処理して、新しいジェスチャ認識エンジンをビューの GestureRecognizers コレクションに追加します。 次の例では、SwipeGestureRecognizer が BoxView にアタッチされています。

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

同等の C# コードを次に示します。

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);

スワイプの方向を認識する

SwipeGestureRecognizer.Direction プロパティは、SwipeDirection 列挙型の 1 つの値または複数の値に設定できます。 これにより、複数の方向のスワイプに応答して Swiped イベントを発生させることができるようになります。 ただし、1 つの SwipeGestureRecognizer では同じ軸上で発生するスワイプしか認識できないという制約があります。 したがって、水平軸上で発生するスワイプは、Direction プロパティに Left と Right を設定することによって認識できます。

<SwipeGestureRecognizer Direction="Left,Right" Swiped="OnSwiped"/>

同様に、垂直軸上で発生するスワイプは、Direction プロパティに Up と Down を設定することによって認識できます。

SwipeGestureRecognizer swipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up | SwipeDirection.Down };

または、各スワイプ方向に対する SwipeGestureRecognizer を作成すると、すべての方向のスワイプを認識することができます。

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Right" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Up" Swiped="OnSwiped"/>
        <SwipeGestureRecognizer Direction="Down" Swiped="OnSwiped"/>
    </BoxView.GestureRecognizers>
</BoxView>

同等の C# コードを次に示します。

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeGestureRecognizer leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
SwipeGestureRecognizer  downSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Down };
downSwipeGesture.Swiped += OnSwiped;

boxView.GestureRecognizers.Add(leftSwipeGesture);
boxView.GestureRecognizers.Add(rightSwipeGesture);
boxView.GestureRecognizers.Add(upSwipeGesture);
boxView.GestureRecognizers.Add(downSwipeGesture);

スワイプに応答する

認識されたスワイプは、Swiped イベントのハンドラーによって応答できます。

void OnSwiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction)
    {
        case SwipeDirection.Left:
            // Handle the swipe
            break;
        case SwipeDirection.Right:
            // Handle the swipe
            break;
        case SwipeDirection.Up:
            // Handle the swipe
            break;
        case SwipeDirection.Down:
            // Handle the swipe
            break;
    }
}

SwipedEventArgs を調べることでスワイプの方向を特定し、必要に応じてカスタム ロジックでスワイプに応答できます。 スワイプの方向は、イベント引数の Direction プロパティから取得できます。このプロパティには、SwipeDirection 列挙型の値のいずれかが設定されます。 さらに、イベント引数には Parameter プロパティもあり、CommandParameter プロパティ (定義されている場合) の値が設定されます。

スワイプ コンテナーを作成する

次の例で示されている SwipeContainer クラスは、スワイプ ジェスチャの認識を実行するために View にラップされる一般化されたスワイプ認識クラスです。

public class SwipeContainer : ContentView
{
    public event EventHandler<SwipedEventArgs> Swipe;

    public SwipeContainer()
    {
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Left));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Right));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Up));
        GestureRecognizers.Add(GetSwipeGestureRecognizer(SwipeDirection.Down));
    }

    SwipeGestureRecognizer GetSwipeGestureRecognizer(SwipeDirection direction)
    {
        SwipeGestureRecognizer swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

SwipeContainer クラスでは、4 つのスワイプ方向すべてに対して SwipeGestureRecognizer オブジェクトが作成されて、Swipe イベント ハンドラーが関連付けられます。 これらのイベント ハンドラーでは、SwipeContainer によって定義されている Swipe イベントが呼び出されます。

次に示すのは、BoxView をラップしている SwipeContainer クラスの XAML コード例です。

<StackLayout>
    <local:SwipeContainer Swipe="OnSwiped" ...>
        <BoxView Color="Teal" ... />
    </local:SwipeContainer>
</StackLayout>

この例では、BoxView がスワイプ ジェスチャを受け取ると、SwipeGestureRecognizer で Swiped イベントが発生します。 これは SwipeContainer クラスによって処理され、クラスで独自の Swipe イベントが発生します。 この Swipe イベントは、ページで処理されます。 その後、SwipedEventArgs を調べることでスワイプの方向を特定し、必要に応じてカスタム ロジックでスワイプに応答できます。

同等の C# コードを次に示します。

BoxView boxView = new BoxView { Color = Colors.Teal, ... };
SwipeContainer swipeContainer = new SwipeContainer { Content = boxView, ... };
swipeContainer.Swipe += (sender, e) =>
{
  // Handle the swipe
};

StackLayout stackLayout = new StackLayout();
stackLayout.Add(swipeContainer);