旋轉木馬 Carousel 控制項，這個需求是最多學員提出的問題需求，今天剛好有空，我就把如何在 Xamarin.Forms 專案中，開發出一個具有旋轉木馬效果的頁面程式，寫成這篇教學文章。

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

在這篇教學文章中，我們將要使用 CarouselView.FormsPlugin 這個第三方 NuGet 套件來幫助我們實踐這樣的需求，若您對於 CarouselView.FormsPlugin 這個套件想要更進一步的了解可以參考 CarouselView control for Xamarin Forms 的文件說明。

這篇文章的專案原始碼可以從 https://github.com/vulcanlee/xamarin-forms-sample2018/tree/master/XFCarousel 取得

建立一個 Xamarin Forms for Prism 專案

首先，我們打開 Visual Studio 2017 (任何一種版本 Visual Studio Community 2017 / Visual Studio Professional 2017 / Visual Studio Enterprise 2017皆可)
點選 Visual Studio 2017 功能表的 [檔案] > [新增] > [專案]
當出現 [新增專案] 對話窗，請依序選擇 [已安裝] > [Visual C#] > [Prism] > [Prism Blank App (Xamarin.Forms)]
請在最下方 [名稱] 文字輸入盒欄位，輸入您想要的專案名稱
最後，請點選 [確定] 按鈕
現在，Visual Studio 2017 將會顯示 [PRISM PROJECT WIZARD] 這個對話窗，您可以在這個對話窗中，選擇需要跨平台的目標，在這裡，您將會有三種選擇： ANDROID, iOS, UWP，請依照您的需求，勾選需要建立的專案類型。接著，請在下方 [Container] 下拉選單中，選擇 Unity 這個選項；最後，請點選 [CREATE PROJECT] 這個按鈕，請 Prism Template Pack 所提供的樣板精靈，幫助我們產生出可用於 Prism 框架的 Xamarin.Forms 方案與專案。

此時，Visual Studio 2017 的 Prism Template Pack 將會開始幫您建立起四個專案(假設我們在上個步驟，勾選的所有平台目標)，分別是：
- Xamarin.Android 原生專案
- Xamarin.iOS 原生專案
- Windows UWP 原生專案
- .NET Standard Class Library SCL 共用類別庫專案

CarouselView.FormsPlugin 的 NuGet 套件

請滑鼠右擊 SCL 專案節點，選擇 [管理方案的 NuGet 套件]
點選瀏覽標籤頁次，並在搜尋文字輸入盒中輸入 CarouselView.FormsPlugin
當出現搜尋結果之後，請勾選所有的專案檢查盒，將這個 CarouselView.FormsPlugin NuGet 套件，安裝到 SCL 的專案中

開始撰寫應用程式的 Models

滑鼠右擊 SCL 專案，選擇 [加入] > [新增資料夾]
在剛剛產生的資料夾節點中，輸入 Models
在剛剛產生的 Models 資料夾，使用滑鼠右擊
選擇 [加入] > [類別]
在 [新增項目] 對話窗，在最下方了名稱欄位中，輸入 MyItem
之後，請點選 [新增] 按鈕

使用底下的程式碼，替換掉剛剛產生的檔案內容
在這裡，我們定義出每個旋轉木馬要顯示項目的資料模型，其中，分別為該項目的名稱、背景顏色、圖片 URL

public class MyItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public string Name { get; set; }
    public Color Background { get; set; }
    public string ImageUrl { get; set; }
}

現在，請在 Views 資料夾中，滑鼠雙擊 MainPage.xaml 節點，開啟這個檔案
使用底下的程式碼，替換掉 MainPage.xaml 的檔案內容
從底下的 XAML 內容，我們可以看到我們使用了這個命名空間 CarouselView.FormsPlugin.Abstractions 的 CarouselViewControl 控制項，用來顯示在該頁面上，做為要顯示旋轉木馬的地方。
由於旋轉木馬顯示需求，是要能夠將一群集合資料，可以採用類似旋轉木馬的效果，顯示出來，因此，我們需要定義出 ItemsSource 這個控制項屬性，將其綁定到該頁面的檢視模型 ViewModel 上。
若想要知道使用者當時轉動到哪個項目了，我們需要使用 Prism 提供的行為 Behavior 擴充功能，使用 EventToCommandBehavior 這個行為，設定當 PositionSelected 這個事件被觸發的時候，需要執行 ViewModel 中的 MyPositionSelectedCommand 命令委派方法。
在這個 MyPositionSelectedCommand 命令中，我們會到過該選轉木馬控制項的 Position 屬性，綁定到 ViewModel 中的 MyPosition C# 屬性，透過這個 MyPosition C# Property 屬性，我們就可以知道，這個時候，使用者選轉到哪個集合紀錄上。
我們可以透過 CarouselViewControl.ItemTemplate 這個屬性，進行宣告這個旋轉木馬要出現的樣貌，您可以透過底下 XAML 中的這個標記區段的 XAML 內容，進行宣告每筆紀錄要出現樣貌，當然，善用資料綁定 (Data Binding) 或者數值轉換器 (Value Converter)，就可以做到每筆紀錄，根據當成 ViewModel 中實際資料內容，進而控制頁面顯示出不同的效果。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:cv="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
             xmlns:behaviors="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
             x:Class="XFCarousel.Views.MainPage"
             Title="旋轉木馬控制項使用範例">

    <Grid
        >
        <cv:CarouselViewControl
            WidthRequest="300" HeightRequest="400"
            HorizontalOptions="Center" VerticalOptions="Center"
            ItemsSource="{Binding MyItemsSource}"
            ShowArrows="true"
            ShowIndicators="true"
            Position="{Binding MyPosition}"
            Orientation="Horizontal"
            >
            <cv:CarouselViewControl.Behaviors>
                <behaviors:EventToCommandBehavior
                    EventName="PositionSelected"
                    Command="{Binding MyPositionSelectedCommand}"/>
            </cv:CarouselViewControl.Behaviors>
            <cv:CarouselViewControl.ItemTemplate>
                <DataTemplate>
                    <Grid
                        >
                        <BoxView                            
                            Color="{Binding Background}"/>
                        <Label
                            HorizontalOptions="Center" VerticalOptions="Start"
                            Text="{Binding Name}"/>
                        <Image
                            HorizontalOptions="Center" VerticalOptions="Center"
                            WidthRequest="200" HeightRequest="300"
                            Aspect="AspectFit"
                            Source="{Binding ImageUrl}"/>
                    </Grid>
                </DataTemplate>
            </cv:CarouselViewControl.ItemTemplate>
        </cv:CarouselViewControl>

        <Label
            HorizontalOptions="Center" VerticalOptions="End"
            FontSize="30"
            Text="{Binding Hint}"/>
    </Grid>

</ContentPage>

請在 ViewModels 資料夾中，找到 MainPageViewModel 檔案，使用滑鼠雙擊這個檔案，打開他
使用底下的程式碼，替換掉這個檔案內容

public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
    public event PropertyChangedEventHandler PropertyChanged;
    public ObservableCollection<MyItem> MyItemsSource { get; set; } = new ObservableCollection<MyItem>();
    public int MyPosition { get; set; }
    public string Hint { get; set; }
    private readonly INavigationService _navigationService;
    public DelegateCommand MyPositionSelectedCommand { get; set; }

    public MainPageViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;

        MyPositionSelectedCommand = new DelegateCommand(() =>
        {
            Hint = $"您點選了 {MyItemsSource[MyPosition].Name}";
        });
    }

    public void OnNavigatedFrom(NavigationParameters parameters)
    {

    }

    public void OnNavigatingTo(NavigationParameters parameters)
    {

    }

    public void OnNavigatedTo(NavigationParameters parameters)
    {
        MyItemsSource.Clear();

        MyItemsSource.Add(new MyItem()
        {
            Name = "LightBlue",
            Background = Color.LightBlue,
            ImageUrl = "https://avatars2.githubusercontent.com/u/790012?s=200&v=4",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightCoral",
            Background = Color.LightCoral,
            ImageUrl = "http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightCyan",
            Background = Color.LightCyan,
            ImageUrl = "http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/mobile-2-icon.png",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightGoldenrodYellow",
            Background = Color.LightGoldenrodYellow,
            ImageUrl = "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/png/256/Mushroom%20-%20Super.png",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightGreen",
            Background = Color.LightGreen,
            ImageUrl = "http://images.all-free-download.com/images/graphiclarge/harry_potter_icon_6825007.jpg",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightSlateGray",
            Background = Color.LightSlateGray,
            ImageUrl = "http://www.icosky.com/icon/png/Movie%20%26%20TV/Doraemon/smile.png",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LimeGreen",
            Background = Color.LimeGreen,
            ImageUrl = "http://images.pocketgamer.co.uk/artwork/imgthumbs/na-owuz/10_mario_facts11.jpg",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightSalmon",
            Background = Color.LightSalmon,
            ImageUrl = "https://rocketdock.com/images/screenshots/thumbnails/Awesome_small.png",
        });
        MyItemsSource.Add(new MyItem()
        {
            Name = "LightGray",
            Background = Color.LightGray,
            ImageUrl = "http://wikiclipart.com/wp-content/uploads/2018/01/Pig-face-cute-face-finance-happy-hog-pig-piggy-icon-icon-search-engine-clip-art.png",
        });
    }

}

執行與測試

設定 Android 專案為預設起始專案
請重建 Android 原生專案
若沒有問題，請執行這個 Android 專案
您可以使用手勢操作，在旋轉木馬控制項上，左右滑動，就可以看到不同的紀錄內容，或者，可以使用 < 或者 > 這兩個標記，點選他們，也可以進行左右的滑動
當您切換到一個新的紀錄，您將會看到在螢幕的最下方，會看到這個紀錄的名稱

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2018/04/12

Xamarin 旋轉木馬 Carousel 控制項的使用練習教學

建立一個 Xamarin Forms for Prism 專案

CarouselView.FormsPlugin 的 NuGet 套件

開始撰寫應用程式的 Models

執行與測試

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2018/04/12

Xamarin 旋轉木馬 Carousel 控制項的使用練習教學

建立一個 Xamarin Forms for Prism 專案

CarouselView.FormsPlugin 的 NuGet 套件

開始撰寫 應用程式的 Models

執行與測試

沒有留言:

張貼留言

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

開始撰寫應用程式的 Models