使用 CollectionView 建立一個能以 GridView 呈現的效果

CollectionView 現階段還是在 Preview 階段，當 Xamarin.Forms 4.0 (現階段 Xamarin.Forms 的版本是 3.6) 正式推出的時候，將可以使用這個 CollectionView 檢視。這個檢視除了具有 ListView 的功能之外，它還可以使用 GridView 的模式來顯示出每筆資料，現在，就來實際建立這個專案來體驗設計過程吧。

該文件的專案原始碼可以透過 GitHub 來取得

建立一個 使使用 FlexLayout 專案

• 開啟 Visual Studio 2019 程式
• 當 Visual Studio 2019 開始 視窗 出現之後，請點選左下角的 [建立新專案] 選項
• 當 [建立新專案] 對話窗出現之後，請在中間最上方的搜尋文字輸入盒中輸入 [prism] 關鍵字，搜尋所有與 Prism 有關的專案樣板
• 請選擇 [Prism Blank App (Xamarin.Forms)] 這個專案樣板
• 當出現 [設定新的專案] 對話窗，請在 [專案名稱] 輸入 [XF3002]
• 最後點選該對話窗右下方的 [建立] 按鈕
• 現在將會看到 [PRISM PROJECT WIZARD] 對話窗，請勾選 ANDROID, iOS 這兩個行動裝置平台，接著在底下 [Container] 下拉選單，選擇 Unity 項目
• 最後，點選 [CREATE PROJECT] 按鈕，以便產生 Xamarin.Forms 專案

安裝需要用到的 PropertyChanged.Fody NuGet 套件

• 當這個 Xamarin.Forms 專案建立成功之後，請在該方案中，找到 Xamarin.Forms 使用的專案(這是一個 .NET Standard 類別庫，簡稱為 SCL )，請在該專案中，使用滑鼠右擊 [相依性] 節點，選擇 [管理 NuGet 套件] 選項
• 在 [NuGet: XXX] 視窗中，點選 [瀏覽] 標籤頁次，並且在下方的搜尋文字輸入盒中，輸入 [propertychanged.fody] 關鍵字，搜尋出這個 NuGet 套件
• 當出現 [PropertyChanged.Fody] NuGet 套件，請點選該套件，並且點選右方的 [安裝] 按鈕，將這個套件安裝到 Xamarin.Forms 專案內
• 請查看 Xamarin.Forms 專案內，並沒有 [FodyWeavers.xml] 這個檔案，因此，使用滑鼠右擊 Xamarin.Forms 專案節點，選擇 [建置] 選項
• 當建置完成之後，在這個 Xamarin.Forms 專案內將會出現 [FodyWeavers.xml] 檔案

安裝需要用到的 Xamarin.Essentials NuGet 套件

• 在 [NuGet: XXX] 視窗中，搜尋文字輸入盒中，輸入 [Xamarin.Essentials] 關鍵字，搜尋出這個 NuGet 套件
• 當出現 [Xamarin.Essentials] NuGet 套件，請點選該套件，並且點選右方的 [安裝] 按鈕，將這個套件安裝到 Xamarin.Forms 專案內

修正因為安裝 Xamarin.Essentials 帶來的錯誤

現在，可以從 Visual Studio 2019 的錯誤視窗中，看到底下的錯誤訊息

錯誤    NU1107    偵測到 Xamarin.Android.Support.Compat 有版本衝突。請將 Xamarin.Android.Support.Compat 28.0.0.1 直接安裝/參考到專案 XF3002.Android 來解決此問題。 
 XF3002.Android -> XF3002 -> Xamarin.Essentials 1.1.0 -> Xamarin.Android.Support.Compat (>= 28.0.0.1) 
 XF3002.Android -> Xamarin.Android.Support.Design 27.0.2.1 -> Xamarin.Android.Support.Compat (= 27.0.2.1).    XF3002.Android    D:\Vulcan\GitHub\XCourse19\XF3002\XF3002\XF3002.Android\XF3002.Android.csproj    1

想要解決此一問題：

• 使用滑鼠右擊方案節點(方案總管最上方的那個節點)，選擇 [管理方案的 NuGet 套件]
• 點選 [更新] 標籤頁次
• 勾選該標籤頁次內的所有項目
• 點選右上方的更新按鈕，就可以升級這些套件到最新版本了

升級 Xamarin.Forms 套件到 4.0 版本

• 同樣的，使用滑鼠右擊方案節點(方案總管最上方的那個節點)，選擇 [管理方案的 NuGet 套件]
• 點選 [已安裝] 標籤頁次
• 點選 [Xamarin.Forms] 套件項目
• 勾選 [包括搶鮮版] 檢查盒，要求顯示搶鮮版的套件清單
• 在右方的 Xamarin.Forms 套件清單中，勾選所有的專案
• 在下方的版本下拉選單中，選擇 4.0 以上的版本，現階段只能夠看到 4.0.0.346134-pre9 這個版本
• 點選右下方 [安裝] 按鈕，將這個 4.0 的 Xamarin.Forms 套件安裝到所有專案內

建立資料模型

• 滑鼠右擊 Xamarin.Forms 專案，選擇 [加入] > [新增資料夾]
• 將新增資料夾的名稱設定為 [Models]
• 滑鼠右擊剛剛建立的 [Models] 資料夾，選擇 [加入] > [類別]
• 在 [新增項目] 對話窗下方的 [名稱] 欄位中，輸入 [MyData]
• 點選右下方的 [新增] 按鈕
• 將底下程式碼填入到這個新建立的類別檔案內

public class MyData : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public string Name { get; set; }
    public int OrderId { get; set; }
}

修正該 Android 專案的 MainActivity.cs

因為現階段 CollectionView 還是在預覽階段，所以，需要在原生專案的進入點內，要執行 Xamarin.Forms.Forms.Init 這個方法前，要增加先執行底下的方法。

• 打開 [MainActivity.cs] 檔案
• 將第 18 行，此行沒有任何程式碼，在此加入這個 C# 敘述 Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

建立使用 CollectionView 的頁面與商業邏輯

• 在 [Views] 資料夾內，打開 [MainPage.xaml] 檔案
• 修正使用底下的 XAML 語言宣告

在這裡的 CollectionView 將會透過 [ItemsSource] 這個可綁定屬性，從 ViewModel 物件內取得要顯示的清單集合資料，並且使用 [SelectionMode] 屬性，設定使用者僅能夠使用單選的方式來選取，最後透過 [SelectionChangedCommand] 這個命令，綁定到 ViewModel 內的 ICommand 屬性，也就是當使用者點選任一項目之後，將會觸發這個命令。

在 CollectionView 內，可以使用 [CollectionView.ItemsLayout] 來設定此次要顯示的資料格式，在這裡將會使用 [GridItemsLayout] 這個屬性來指定使用 GridView 的模式來呈現，並且是以垂直方式來顯示資料。

<?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="XF3002.Views.MainPage"
             Title="CollectionView 的應用練習">

    <StackLayout
        >
        <CollectionView
            x:Name="cv"
            ItemsSource="{Binding myItemList}"
            SelectionMode="Single"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
            SelectionChangedCommand="{Binding SelectionChangedCommand}"
            >
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="70"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="150"/>
                            </Grid.ColumnDefinitions>
                            <Label
                                HorizontalOptions="Start"
                                Text="{Binding Name}"
                                FontAttributes="Bold"
                                FontSize="20"/>
                            <Label
                                HorizontalOptions="End" VerticalOptions="End"
                                Text="{Binding OrderId}"
                                TextColor="Red"
                                FontSize="16"/>
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

</ContentPage>

• 在 [ViewModels] 資料夾內，打開 [MainPageViewModel.xaml] 檔案
• 修正使用底下的 C# 程式碼

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XF3002.ViewModels
{
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    using XF3002.Models;

    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public ObservableCollection<MyData> myItemList { get; set; } = new ObservableCollection<MyData>();
        public MyData SelectedItem { get; set; }
        public int GridItemsLayoutSpan { get; set; } = 2;
        public DelegateCommand SelectionChangedCommand { get; set; }
        private readonly INavigationService navigationService;
        private readonly IPageDialogService dialogService;

        public MainPageViewModel()
        {
            ReadData();
        }
        public MainPageViewModel(INavigationService navigationService, IPageDialogService dialogService)
        {
            this.navigationService = navigationService;
            this.dialogService = dialogService;
            SelectionChangedCommand = new DelegateCommand(() =>
            {
                dialogService.DisplayAlertAsync("Info", SelectedItem.Name, "OK");
            });
        }

        public void OnNavigatedFrom(INavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(INavigationParameters parameters)
        {
            ReadData();
        }

        public void OnNavigatingTo(INavigationParameters parameters)
        {
        }
        public void ReadData()
        {
            int cc = 1;
            for (int i = 0; i < 10; i++)
            {
                myItemList.Add(new MyData() { Name = "Baboon", OrderId=cc++ });
                myItemList.Add(new MyData() { Name = "Capuchin Monkey", OrderId = cc++ });
                myItemList.Add(new MyData() { Name = "Blue Monkey", OrderId = cc++ });
                myItemList.Add(new MyData() { Name = "Squirrel Monkey", OrderId = cc++ });
                myItemList.Add(new MyData() { Name = "Golden Lion Tamarin", OrderId = cc++ });
                myItemList.Add(new MyData() { Name = "Howler Monkey", OrderId = cc++ });
                myItemList.Add(new MyData() { Name = "Japanese Macaque", OrderId = cc++ });
            }
        }
    }
}

執行結果