[Xamarin.forms] CarouselView

Xamarin.Forms で CarouselView を使おうと思った時に日本語の参考資料が少なくて使い方がよくわからなくて困ったので書きました。(解説ではないです。)

主に Xamarin.Forms 4.0 Feature Preview: An Entirely New Point of (Collection)View を参考にしました。

はじめに

MainActivity.cs(Android) と AppDelegate(iOS) に

global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

を初期化前に付け足す。これで CollectionView (ListView + CarouselView?) が使えるようになるそうです。

View

通常の ContentPage 内に書いていきます。

view.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"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="Testapp.Views.TestPage"
             Title="Test" >

    <StackLayout>
        <Label Text="Test" VerticalOptions="StartAndExpand"/>
        
        <CarouselView ItemsSource="{Binding ItemsSource}" Margin="15">
            <CarouselView.ItemsLayout>
                <GridItemsLayout Orientation="Horizontal" SnapPointsAlignment="Center" SnapPointsType="Mandatory" HorizontalItemSpacing="20"/>
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Frame BorderColor="Green" Padding="10" CornerRadius="10" WidthRequest="320" >
                        <StackLayout>
                            <Label Text="{Binding DateTitle.Value}" VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" FontSize="Large"/>
                            <Grid VerticalOptions="Center">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="40" />
                                    <RowDefinition Height="40" />
                                    <RowDefinition Height="40" />
                                    <RowDefinition Height="40" />
                                    <RowDefinition Height="40" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.4*" />
                                    <ColumnDefinition Width="0.6*" />
                                </Grid.ColumnDefinitions>
                                <!--Data0-->
                                <Label Grid.Row="0" Text="Test0:" />
                                <Label Grid.Row="0" Grid.Column="1" Text="{Binding Test0.Value}" />
                                <!--Data1-->
                                <Label Grid.Row="1" Grid.Column="0" Text="Test1:" />
                                <Label Grid.Row="1" Grid.Column="1" Text="{Binding Test1.Value}" />
                                <!--Data2-->
                                <Label Grid.Row="2" Grid.Column="0" Text="Test2:" />
                                <Label Grid.Row="2" Grid.Column="1" Text="{Binding Test2.Value}" />
                                <!--Data3-->
                                <Label Grid.Row="3" Grid.Column="0" Text="Test3" />
                                <Label Grid.Row="3" Grid.Column="1" Text="{Binding Test3.Value}" />
                            </Grid>
                        </StackLayout>
                    </Frame>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>
</ContentPage>

これを書くとき DataTemplate の下を Frame で囲ってあげなければいけないとなかなか気付かずに時間がかかりました。

後は ViewModel の方で ItemsSource に各要素をバインドさせます。