Xamarin.Forms 旋轉木馬 Carousel 控制項效果

在 Xamarin.Forms 可以使用 旋轉木馬 Carousel 控制項在頁面上，如此，可以讓使用者使用手勢滑動選取想要的項目，如同下圖動畫效果。

範例專案原始碼

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFFlip

要能夠做到這樣的效果，需要使用到 CarouselView 這個第三方控制項

https://github.com/alexrainman/CarouselView

在方案中加入這個 NuGet 套件 CarouselView.FormsPlugin 到所有的專案內，

實際使用方是可以參考底下的 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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:controls="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFFlip.Views.MainPage"
             Title="MainPage">
    <StackLayout HorizontalOptions="Fill" VerticalOptions="Center">
        <Label Text="{Binding Title}" />
        <StackLayout
            HorizontalOptions="Center"
            Orientation="Horizontal">
            <!--https://msdn.microsoft.com/en-us/library/aa970677(v=vs.110).aspx-->
            <Label Text="&lt;" FontSize="24" VerticalOptions="Center" />
            <controls:CarouselViewControl 
            Orientation="Horizontal" 
            InterPageSpacing="10" Position="0" 
            ItemsSource="{Binding Zoos}" 
                Arrows="True"
            HeightRequest="100" WidthRequest="250"
            VerticalOptions="FillAndExpand" HorizontalOptions="Center">
                <controls:CarouselViewControl.ItemTemplate>
                    <DataTemplate>
                        <Grid
                        >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="30"/>
                            </Grid.RowDefinitions>
                            <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                            <Grid Grid.Row="1" BackgroundColor="#80000000" >
                                <Label 
                                TextColor="White" 
                                Text="{Binding Name}" 
                                FontSize="16" FontAttributes="Bold"
                                />
                            </Grid>
                        </Grid>

                    </DataTemplate>
                </controls:CarouselViewControl.ItemTemplate>
            </controls:CarouselViewControl>
            <Label Text="&gt;" FontSize="24" VerticalOptions="Center" />
        </StackLayout>
    </StackLayout>
</ContentPage>