Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

就在上週， Visual Studio 2019 正式發表了，隨之而來的驚奇工作那就是要來體驗 Visual Studio 2019 這套新的開發工具所帶來的絕佳操作感覺，也就是說，在 2019年四月之後，我這裡所寫關於 Xamarin.Forms 的範例程式碼，將會全部改成使用 Xamarin.Forms 來設計。在這篇文章中，將會來測試 Xamarin.Forms 的手勢操作的設計上的問題，那就是可以在使用者控制項與版面配置上來使用 GestureRecognizers 屬性來指定其需要執行相對應手勢操作需要進行的綁定命令。可是，當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個使用者控制項到這個版面配置上，此時，該使用者控制項若有指定 GestureRecognizers ，那麼，是版面配置的 GestureRecognizers 會被觸發，還是使用者控制項的 GestureRecognizers 會被觸發呢？

因此，在我心中存在者許多疑問，便想要寫可個範例程式碼來逐一檢測底下的問題？

當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個使用者控制項到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間)，此時，該使用者控制項若有指定 GestureRecognizers ，那麼，當使用者點選該使用者控制項的時候，是哪個 GestureRecognizers 會被觸發呢？
當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個使用者控制項到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間)，此時，該使用者控制項若沒有指定 GestureRecognizers ，那麼，當使用者點選該使用者控制項的時候，是哪個 GestureRecognizers 會被觸發呢？
當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個按鈕到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間)，此時，該按鈕若有指定 Command ，那麼，當使用者點選該按鈕的時候，是否會觸發 Layout 的GestureRecognizers呢？
當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個按鈕到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間)，此時，該按鈕若沒有指定 Command ，那麼，當使用者點選該按鈕的時候，是否會觸發 Layout 的GestureRecognizers呢？
當在一個 Layout 上有指定 GestureRecognizers ，並且放置一個文字輸入盒到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間)，此時，若點選該文字輸入盒，是否會觸發 Layout 的GestureRecognizers呢？

為了要能夠了解這些疑問，所以，請依照底下步驟建立一個 Xamarin.Forms 測試專案，並且分別在 Android / iOS / UWP 底下來跑看看，看看這些問題的實際運作情況是如何，並且在不同作業系統平台下的表顯示否都是相同呢？

這篇文章所提到的範例程式碼，可以從 Github Xamarin2019 Repository 上取得。

使用 Visual Studio 產生一個 Xamarin.Forms for Prism 專案

開啟 Visual Studio 2019 程式
當 Visual Studio 2019 開始視窗出現之後，請點選左下角的 [建立新專案] 選項
當 [建立新專案] 對話窗出現之後，請在中間最上方的搜尋文字輸入盒中輸入 [prism] 關鍵字，搜尋所有與 Prism 有關的專案樣板
請選擇 [Prism Blank App (Xamarin.Forms)] 這個專案樣板
當出現 [設定新的專案] 對話窗，請在 [專案名稱] 輸入 [LayoutGesture]
最後點選該對話窗右下方的 [建立] 按鈕
現在將會看到 [PRISM PROJECT WIZARD] 對話窗，請勾選 ANDROID, iOS, UWP 三個行動裝置平台，接著在底下 [Container] 下拉選單，選擇 Unity 項目
最後，點選 [CREATE PROJECT] 按鈕，以便產生 Xamarin.Forms 專案
當這個 Xamarin.Forms 專案建立成功之後，請在該方案中，找到 Xamarin.Forms 使用的專案，這裡是名為 [LayoutGesture] 專案名稱，請在該專案中，使用滑鼠右擊 [相依性] 節點，選擇 [管理 NuGet 套件] 選項
在 [NuGet: LayoutGesture] 視窗中，點選 [瀏覽] 標籤頁次，並且在下方的搜尋文字輸入盒中，輸入 [propertychanged.fody] 關鍵字，搜尋出這個 NuGet 套件
當出現 [PropertyChanged.Fody] NuGet 套件，請點選該套件，並且點選右方的 [安裝] 按鈕，將這個套件安裝到 Xamarin.Forms 專案內
請查看 Xamarin.Forms 專案內，並沒有 [FodyWeavers.xml] 這個檔案，因此，使用滑鼠右擊 [LayoutGesture] 專案節點，選擇 [建置] 選項
當建置完成之後，在這個 Xamarin.Forms 專案內將會出現 [FodyWeavers.xml] 檔案

修正 View 與 ViewModel

在 Xamarin.Forms 專案內的 [Views] 資料夾內，找到 MainPage.xaml 檔案，並且打開它
使用底下 XAML 語言替換掉這個檔案內的 XAML 內容

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LayoutGesture.Views.MainPage"
             Title="版面配置的手勢操作">

    <Grid
       RowSpacing="0" ColumnSpacing="0"
       >
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.GestureRecognizers>
            <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="透明的 Grid 觸發點選手勢"/>
        </Grid.GestureRecognizers>

        <Label
            Grid.Row="0" Grid.Column="0"
            HorizontalOptions="Center" VerticalOptions="Center"
            Text="{Binding Hint}"/>

        <StackLayout
            Grid.Row="1"
            >
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="透明的 StackLayout 觸發點選手勢"/>
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout
            Grid.Row="2"
            BackgroundColor="LightBlue"
            >
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="藍色背景的 StackLayout 觸發點選手勢"/>
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <BoxView
            Grid.Row="3"
            Color="LightGreen"
            HorizontalOptions="Start" VerticalOptions="Center"
            WidthRequest="100" HeightRequest="50"/>

        <BoxView
            Grid.Row="3"
            Color="LightPink"
            HorizontalOptions="End" VerticalOptions="Center"
            WidthRequest="100" HeightRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="粉紅色背景的 BoxView 觸發點選手勢"/>
            </BoxView.GestureRecognizers>
        </BoxView>

        <Button
            Grid.Row="4"
            HorizontalOptions="Start" VerticalOptions="Center"
            Text="沒有設定 Command 的按鈕"/>

        <Button
            Grid.Row="4"
            HorizontalOptions="End" VerticalOptions="Center"
            Text="設定 Command 的按鈕"
            Command="{Binding TapCommand}"
            CommandParameter="設定 Command 的按鈕"/>

        <Entry
            Grid.Row="5"
            Placeholder="請在這裡輸入"
            HorizontalOptions="Center" VerticalOptions="Center"/>
    </Grid>

</ContentPage>

在 Xamarin.Forms 專案內的 [ViewModels] 資料夾內，找到 MainPageViewModel.cs 檔案，並且打開它
使用底下 C# 敘述替換掉這個檔案內的 C# 敘述

namespace LayoutGesture.ViewModels
{
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public DelegateCommand<string> TapCommand { get; set; }
        private readonly INavigationService navigationService;
        public string Hint { get; set; }
        public MainPageViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
            TapCommand = new DelegateCommand<string>(x =>
            {
                Hint = x;
            });
        }

        public void OnNavigatedFrom(INavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(INavigationParameters parameters)
        {
        }

        public void OnNavigatingTo(INavigationParameters parameters)
        {
        }

    }
}

建置與執行和測試結果

切換 Android 專案為預設起始專案，並且執行這個 Xamarin.Forms 到模擬器或者實體手機上
底下螢幕截圖為實際執行結果

現在，可以實際點選螢幕上的任何地方，並且觀察螢幕最上方的訊息文字，所以，可以得到底下結論：

Layout 版面配置與 View 檢視可以設定使用 GestureRecognizers 屬性，指定不同的手勢觸發命令
若有多個 Layout 版面配置重疊，且這些版面配置都有設定使用 GestureRecognizers 屬性，當點選多個重疊在最上方版面配置區域的時候，最上方的版面配置之手勢命令將會被觸發，在底層的手勢命令不會被觸發
若版面配置的背景顏色為透明色 Transparent ，還是依照上述的運作規則
若版面配置與檢視彼此重疊，也是依照上述的運作規則
若該檢視本身就具有手勢感應功能，例如，按鈕可以接收到使用者是否有點選這個按鈕、文字輸入盒可以接受使用者輸入文字等等，就算這些檢視沒有使用 GestureRecognizers 屬性，在底層的版面配置或者檢視也不會觸發相關手勢命令

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2019/04/08

Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

使用 Visual Studio 產生一個 Xamarin.Forms for Prism 專案

修正 View 與 ViewModel

建置與執行和測試結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2019/04/08

Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

使用 Visual Studio 產生一個 Xamarin.Forms for Prism 專案

修正 View 與 ViewModel

建置與執行和測試結果

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書