XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2018/04/12

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

旋轉木馬 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 的文件說明。

建立一個 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 方案與專案。
PRISM PROJECT WIZARD
  • 此時,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 的專案中
Microsoft.EntityFrameworkCore.Sqlite

開始撰寫 應用程式的 Models

  • 滑鼠右擊 SCL 專案,選擇 [加入] > [新增資料夾]
  • 在剛剛產生的資料夾節點中,輸入 Models
  • 在剛剛產生的 Models 資料夾,使用滑鼠右擊
  • 選擇 [加入] > [類別]
  • 在 [新增項目] 對話窗,在最下方了名稱欄位中,輸入 MyItem
  • 之後,請點選 [新增] 按鈕
新增項目
  • 使用底下的程式碼,替換掉剛剛產生的檔案內容
  • 在這裡,我們定義出每個旋轉木馬要顯示項目的資料模型,其中,分別為 該項目的名稱、背景顏色、圖片 URL
C# CSharp
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 中實際資料內容,進而控制頁面顯示出不同的效果。
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"
             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 檔案,使用滑鼠雙擊這個檔案,打開他
  • 使用底下的程式碼,替換掉這個檔案內容
C# CSharp
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 專案
  • 您可以使用手勢操作,在旋轉木馬控制項上,左右滑動,就可以看到不同的紀錄內容,或者,可以使用 < 或者 > 這兩個標記,點選他們,也可以進行左右的滑動
  • 當您切換到一個新的紀錄,您將會看到在螢幕的最下方,會看到這個紀錄的名稱
旋轉木馬 旋轉木馬 旋轉木馬 旋轉木馬

沒有留言:

張貼留言