新增撥動手勢辨識器

發行項
07/13/2023

撥動手勢會在手指以水平或垂直方向橫跨畫面移動時發生，且通常用於起始內容的導覽。本文中的程式代碼範例取自撥動手勢範例。

若要讓 View 辨識撥動手勢，請建立 SwipeGestureRecognizer 執行個體，將 Direction 屬性設為 SwipeDirection 列舉值 (Left、Right、Up 或 Down)，選擇性地設定 Threshold 屬性，處理 Swiped 事件，並將新的手勢辨識器新增至檢視上的 GestureRecognizers 集合。下列程式碼範例顯示附加至 BoxView 的 SwipeGestureRecognizer：

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

以下是對等的 C# 程式碼：

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

boxView.GestureRecognizers.Add(leftSwipeGesture);

SwipeGestureRecognizer 類別也包含 Threshold 屬性，您可以選擇性地將其設為 uint 值，以代表為了辨識撥動必須達到的最小撥動距離 (裝置獨立單位)。這個屬性的預設值為 100，表示撥動距離 (裝置獨立單位) 低於 100 的撥動將會被忽略。

辨識撥動方向

上述範例會將 Direction 屬性設定為從 SwipeDirection 列舉中選擇單一值。不過，您也可將此屬性設定為從 SwipeDirection 列舉中選擇多個值，以便引發 Swiped 事件以回應多個方向的撥動。不過，條件約束是單一 SwipeGestureRecognizer 只能辨識發生在同一個軸上的撥動。因此，您可以將 Direction 屬性設定為 Left 和 Right 以辨識發生在水平軸上的撥動：

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

同樣地，您可以將 Direction 屬性設定為 Up 和 Down 以辨識發生在垂直軸上的撥動：

var 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# 程式碼：

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
leftSwipeGesture.Swiped += OnSwiped;
var rightSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Right };
rightSwipeGesture.Swiped += OnSwiped;
var upSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Up };
upSwipeGesture.Swiped += OnSwiped;
var 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 事件的引發。不過，每個 SwipeGestureRecognizer 執行個體都可以視需要使用不同的事件處理常式。

撥動的回應

下列範例顯示 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 屬性 (若已定義) 的值。

使用命令

SwipeGestureRecognizer 類別也包含 Command 和 CommandParameter 屬性。這些屬性通常用於使用 Model-View-ViewModel (MVVM) 模式的應用程式。 Command 屬性定義要在辨識撥動手勢後叫用的 ICommand，CommandParameter 屬性則定義要傳遞至 ICommand. 的物件。下列程式碼範例示範如何將 Command 屬性繫結至檢視模型中定義的 ICommand，而該模型的執行個體已設定為頁面 BindingContext：

var boxView = new BoxView { Color = Color.Teal, ... };
var leftSwipeGesture = new SwipeGestureRecognizer { Direction = SwipeDirection.Left, CommandParameter = "Left" };
leftSwipeGesture.SetBinding(SwipeGestureRecognizer.CommandProperty, "SwipeCommand");
boxView.GestureRecognizers.Add(leftSwipeGesture);

對等的 XAML 程式碼如下：

<BoxView Color="Teal" ...>
    <BoxView.GestureRecognizers>
        <SwipeGestureRecognizer Direction="Left" Command="{Binding SwipeCommand}" CommandParameter="Left" />
    </BoxView.GestureRecognizers>
</BoxView>

SwipeCommand 是檢視模型執行個體中定義的 ICommand 類型屬性，該檢視模型執行個體已設定為頁面 BindingContext。辨識撥動手勢之後，將會執行 SwipeCommand 物件的 Execute 方法。 Execute 方法的引數就是 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)
    {
        var swipe = new SwipeGestureRecognizer { Direction = direction };
        swipe.Swiped += (sender, e) => Swipe?.Invoke(this, e);
        return swipe;
    }
}

SwipeContainer 類別會為所有四個撥動方向建立 SwipeGestureRecognizer 物件，並附加 Swipe 事件處理常式。這些事件處理常式會叫用 SwipeContainer 所定義的 Swipe 事件。

下列 XAML 程式碼範例會顯示包裝 BoxView 的 SwipeContainer 類別：

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

下列程式碼範例顯示 SwipeContainer 如何在 C# 頁面中包裝 BoxView：

public class SwipeContainerPageCS : ContentPage
{
    public SwipeContainerPageCS()
    {
        var boxView = new BoxView { Color = Color.Teal, ... };
        var swipeContainer = new SwipeContainer { Content = boxView, ... };
        swipeContainer.Swipe += (sender, e) =>
        {
          // Handle the swipe
        };

        Content = new StackLayout
        {
            Children = { swipeContainer }
        };
    }
}

當 BoxView 收到撥動手勢時，會引發 SwipeGestureRecognizer 中的 Swiped 事件。這由 SwipeContainer 類別處理，而該類別會引發它自己的 Swipe 事件。這個 Swipe 事件會在頁面上處理。接著，即可檢查 SwipedEventArgs 以判斷撥動的方向，並使用自訂邏輯，視需要回應撥動。

新增撥動手勢辨識器

辨識撥動方向

撥動的回應

使用命令

建立撥動容器

相關連結

其他資源