【Xamarin.Forms 2.2.0(プレビュー)】CarouselView

Xamarin.Forms 2.2.0 から CarouselView クラスが追加されます。

CarouselView は従来の CarouselPage を置き換える物で、CarouselPageは将来的に非推奨となります。

サンプル

基本的な使い方は ListView に似ています。しかし、DataTemplateの中身を Cellではなく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"
             x:Class="XFApp20.MyPage">
    <ContentPage.Content>
        <CarouselView HorizontalOptions="Center"
                      VerticalOptions="Center"
                      HeightRequest="150"
                      WidthRequest="150"
                      ItemsSource="{Binding}">
            <!-- DataTemplateの中身はView派生クラス -->
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <BoxView HorizontalOptions="FillAndExpand"
                                 VerticalOptions="FillAndExpand"
                                 Color="{Binding Color}" />
                        <Label HorizontalOptions="Center"
                               Text="{Binding Text}" />
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </ContentPage.Content>
</ContentPage>

コードビハインド

public MyPage()
{
    InitializeComponent();

    BindingContext = new ViewModel[] {
        new ViewModel {
            Color = Color.Red,
            Text = "Red",
        },
        new ViewModel {
            Color = Color.Blue,
            Text = "Blue",
        },
        new ViewModel {
            Color = Color.Green,
            Text = "Green",
        },
        new ViewModel {
            Color = Color.Purple,
            Text = "Purple",
        },
        new ViewModel {
            Color = Color.Silver,
            Text = "Silver",
        },
        new ViewModel {
            Color = Color.Pink,
            Text = "Pink",
        },
    };
}

public class ViewModel
{
    public Color Color { get; set; }
    public string Text { get; set; }
}

ItemTemplateのセッティングをC#で書くとこのようになります。

carouselView.ItemTemplate = new DataTemplate(typeof(CustomView));

// または

carouselView.ItemTemplate = new DataTemplate(() => {
    var boxView = new BoxView(){
        VerticalOptions = LayoutOptions.FillAndExpand,
        HorizontalOptions = LayoutOptions.FillAndExpand,
    };
    boxView.SetBinding(BoxView.ColorProperty, "Color");
    var label = new Label{
        HorizontalOptions = LayoutOptions.Center,
    };
    label.SetBinding(Label.TextProperty, "Text");
    return new StackLayout {
        Children = {
            boxView,
            label,
        },
    };
});

実行結果