ハローCarouselView

更新

2020/03/12に,Xamarin.Forms 4.6 pre1に更新.

環境

• Xamarin.Forms 4.6 preview 1

はじめに

CarouselViewを使うためには明示的に使用を許可しなければならない. まだExperimentalというこのようです.

: 'The class, property, or method you are attempting
 to use ('CarouselView .ctor') is part of CollectionView; 
to use it, you must opt-in by calling 
Forms.SetFlags("CollectionView_Experimental") 
before calling Forms.Init().'

なんと.

www.c-sharpcorner.com

docs.microsoft.com

CarouselViewの使用を許可する

MainActivity.csを開いてOnCreateメソッド内に以下の1行を追加します.

ここまででOnCreateメソッドはこんな感じになります.

        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

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

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }

これで準備完了です.

メモ

とりあえずしっかり表示されるXamlの例.

        <CarouselView ItemsSource="{Binding People}"
                      IsBounceEnabled="True"
                      IsScrollAnimated="True"
                      IsSwipeEnabled="True"
                      IsTabStop="True">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Pink">
                        <Frame HasShadow="True"
                               BorderColor="DarkGray"
                               CornerRadius="5"
                               Margin="0"
                               HeightRequest="200"
                               WidthRequest="300"
                               HorizontalOptions="Center"
                               VerticalOptions="CenterAndExpand">
                            <StackLayout BackgroundColor="Azure">
                                <Label Text="{Binding FullName}" 
                                       FontAttributes="Bold"
                                       FontSize="Large"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                                <Image Source="{Binding AvatarUrl}" 
                                       Aspect="AspectFill"
                                       HeightRequest="100"
                                       WidthRequest="100"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding FirstName}"
                                       HorizontalOptions="Center" />
                                <Label Text="{Binding LastName}"
                                       FontAttributes="Italic"
                                       HorizontalOptions="Center"
                                       MaxLines="5"
                                       LineBreakMode="TailTruncation" />
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

こんな感じ↓

IndicatorViewとの組み合わせ

CarouselViewの公式ドキュメント

docs.microsoft.com

IndicatorViewの公式ドキュメント

docs.microsoft.com

CarouselViewにIndicatorViewを組み合わせると,CarouselViewで現在表示中のアイテムが何個目のアイテムなのかを表すドットの列(インジケータ)を表示することができます.

使い方は簡単で,インジケータを表示させたい位置に配置します.

        <IndicatorView
            x:Name="indicatorView"
            HideSingle="True"
            HorizontalOptions="Center"
            IndicatorColor="LightGray"
            IndicatorSize="10"
            SelectedIndicatorColor="LightGreen" />

このIndicatorViewには名前をつけておきます.

次に,IndicatorViewとCarouselViewを結びつけます.

CarouselViewにはIndicatorViewプロパティがあり,これにIndicatorViewの名前を指定することで,CarouselViewとIndicatorViewが結び付けられ,CarouselViewのアイテム選択に合わせてインジケータが変化します.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="XFCaroucelPractice.Views.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackLayout>
        <!--  Place new controls here  -->
        <Label HorizontalOptions="Center" Text="Welcome to Xamarin.Forms!" />
        <CarouselView
            HeightRequest="150"
            IndicatorView="indicatorView"
            IsBounceEnabled="False"
            IsScrollAnimated="True"
            IsSwipeEnabled="True"
            IsTabStop="True"
            ItemsSource="{Binding People}"
            VerticalOptions="Center">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout
                    ItemSpacing="10"
                    Orientation="Horizontal"
                    SnapPointsAlignment="Center"
                    SnapPointsType="MandatorySingle" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Frame
                            Margin="40,10"
                            BackgroundColor="Pink"
                            BorderColor="Blue"
                            CornerRadius="10">
                            <Label Text="{Binding FirstName}" />
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <IndicatorView
            x:Name="indicatorView"
            HideSingle="True"
            HorizontalOptions="Center"
            IndicatorColor="LightGray"
            IndicatorSize="10"
            SelectedIndicatorColor="LightGreen" />

    </StackLayout>

</ContentPage>

IndicatorViewのカスタマイズ

インジケータの色や形,大きさを変更できます.

形を変えるにはIndicatorShapeプロパティCircleかSquareのどちらかを選択できます.

任意の形にしたい場合は公式ドキュメントに従って,任意のFontImageを使うことができる.

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="Black"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Image Source="{FontImage &#xf30c;, FontFamily={OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</StackLayout>