Xamarin.Forms カルーセルビューの操作

サンプルのダウンロードサンプルのダウンロード

CarouselView は、ユーザー操作を制御する次のプロパティを定義します。

  • CurrentItem型の object、表示されている現在の項目。 このプロパティの既定の TwoWayバインド モードは null であり、表示するデータがない場合は 値を持ちます。
  • CurrentItemChangedCommandの型 ICommand。現在の項目が変更されたときに実行されます。
  • CurrentItemChangedCommandParameter: object 型、CurrentItemChangedCommand に渡されるパラメーター。
  • IsBounceEnabled型の bool。 がコンテンツ境界でバウンスするかどうかを CarouselView 指定します。 既定値は true です。
  • IsSwipeEnabled型の bool。 は、スワイプ ジェスチャによって表示される項目が変更されるかどうかを決定します。 既定値は true です。
  • Loopboolの 。 が項目のコレクションへのループ アクセスを提供するかどうかを CarouselView 決定します。 既定値は true です。
  • Positionintの 、基になるコレクション内の現在の項目のインデックス。 このプロパティの既定の TwoWayバインド モードは であり、表示するデータがない場合は 0 の値を持ちます。
  • PositionChangedCommandの型 ICommand。位置が変更されたときに実行されます。
  • PositionChangedCommandParameter: object 型、PositionChangedCommand に渡されるパラメーター。
  • VisibleViewsObservableCollection<View>の 。現在表示されている項目のオブジェクトを含む読み取り専用プロパティです。

これらのプロパティはすべて、BindableProperty オブジェクトを基盤としています。つまり、プロパティはデータ バインディングの対象にすることができます。

CarouselView は、 CurrentItemChanged ユーザーのスクロールによってプロパティが変更されたとき、またはアプリケーションが CurrentItem プロパティを設定したときに発生するイベントを定義します。 CurrentItemChangedEventArgsイベントに付随CurrentItemChangedする オブジェクトには、 型objectの両方の 2 つのプロパティがあります。

  • PreviousItem – プロパティ変更後の前の項目。
  • CurrentItem – プロパティ変更後の現在のアイテム。

CarouselView また、ユーザーの PositionChanged スクロールによってプロパティが変更されたとき、またはアプリケーションによって Position プロパティが設定されたときに発生するイベントも定義します。 PositionChangedEventArgsイベントに付随PositionChangedする オブジェクトには、 型intの両方の 2 つのプロパティがあります。

  • PreviousPosition – プロパティの変更後の前の位置。
  • CurrentPosition – プロパティの変更後の現在の位置。

現在のアイテムの変更に対応する

現在表示されている項目が変更されると、 CurrentItem プロパティはアイテムの値に設定されます。 このプロパティが変更されると、 CurrentItemChangedCommand に渡される の CurrentItemChangedCommandParameter 値を使用して が ICommand実行されます。 プロパティが Position 更新され、イベントが CurrentItemChanged 発生します。

重要

プロパティは Position 、プロパティが CurrentItem 変更されると変更されます。 これにより、 が PositionChangedCommand 実行され、イベントが発生します PositionChanged

イベント

次の XAML の例は、 CarouselView イベント ハンドラーを使用して現在の項目の変更に応答する を示しています。

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChanged="OnCurrentItemChanged">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.CurrentItemChanged += OnCurrentItemChanged;

この例では、イベントが OnCurrentItemChanged 発生したときにイベント ハンドラーが CurrentItemChanged 実行されます。

void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    Monkey previousItem = e.PreviousItem as Monkey;
    Monkey currentItem = e.CurrentItem as Monkey;
}

この例では、イベント ハンドラーは OnCurrentItemChanged 前の項目と現在の項目を公開します。

カルーセルビュー iOS および Android のカルーセルビューの前と現在のアイテムをのスクリーンショット

コマンド

次の XAML の例は、 CarouselView コマンドを使用して現在の項目の変更に応答する を示しています。

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChangedCommand="{Binding ItemChangedCommand}"
              CurrentItemChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=CurrentItem}">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandProperty, "ItemChangedCommand");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandParameterProperty, new Binding("CurrentItem", source: RelativeBindingSource.Self));

この例では、 プロパティを CurrentItemChangedCommand プロパティにバインドし ItemChangedCommand 、プロパティ値を CurrentItem 引数として渡します。 その後、 は ItemChangedCommand 、必要に応じて、現在の項目の変更に応答できます。

public ICommand ItemChangedCommand => new Command<Monkey>((item) =>
{
    PreviousMonkey = CurrentMonkey;
    CurrentMonkey = item;
});

この例では、 は ItemChangedCommand 、前の項目と現在の項目を格納するオブジェクトを更新します。

位置の変更に対応する

現在表示されている項目が変更されると、 Position プロパティは基になるコレクション内の現在の項目のインデックスに設定されます。 このプロパティが変更されると、 PositionChangedCommand に渡される の PositionChangedCommandParameter 値を使用して が ICommand実行されます。 その後、 PositionChanged イベントが発生します。 プロパティが Position プログラムによって変更された場合、 CarouselView は値に対応する項目まで Position スクロールされます。

注意

プロパティを Position 0 に設定すると、基になるコレクションの最初の項目が表示されます。

イベント

次の XAML の例は、 CarouselView イベント ハンドラーを使用してプロパティの変更に応答する を Position 示しています。

<CarouselView ItemsSource="{Binding Monkeys}"              
              PositionChanged="OnPositionChanged">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.PositionChanged += OnPositionChanged;

この例では、イベントが OnPositionChanged 発生したときにイベント ハンドラーが PositionChanged 実行されます。

void OnPositionChanged(object sender, PositionChangedEventArgs e)
{
    int previousItemPosition = e.PreviousPosition;
    int currentItemPosition = e.CurrentPosition;
}

この例では、イベント ハンドラーは OnCurrentItemChanged 前の位置と現在の位置を公開します。

つカルーセルビュー iOS および Android の前の位置と前の位置を持つカルーセルのスクリーンショット

コマンド

次の XAML の例は、 CarouselView コマンドを使用してプロパティの変更に応答する を Position 示しています。

<CarouselView ItemsSource="{Binding Monkeys}"
              PositionChangedCommand="{Binding PositionChangedCommand}"
              PositionChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=Position}">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionChangedCommandProperty, "PositionChangedCommand");
carouselView.SetBinding(CarouselView.PositionChangedCommandParameterProperty, new Binding("Position", source: RelativeBindingSource.Self));

この例では、 プロパティを PositionChangedCommand プロパティにバインドし PositionChangedCommand 、プロパティ値を Position 引数として渡します。 その後、 は PositionChangedCommand 、必要に応じて位置の変更に応答できます。

public ICommand PositionChangedCommand => new Command<int>((position) =>
{
    PreviousPosition = CurrentPosition;
    CurrentPosition = position;
});

この例では、 は PositionChangedCommand 、前の位置と現在の位置を格納するオブジェクトを更新します。

現在のアイテムを事前設定する

内の現在の CarouselView 項目は、 プロパティを CurrentItem 項目に設定することでプログラムで設定できます。 次の XAML の例は、 CarouselView 現在の項目を事前に選択する を示しています。

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItem="{Binding CurrentItem}">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemProperty, "CurrentItem");

注意

プロパティの既定のバインド モードTwoWayCurrentItem です。

プロパティ データは CarouselView.CurrentItemCurrentItemMonkeyの接続ビュー モデルのプロパティにバインドされます。 既定では、バインドが使用され、TwoWayユーザーが現在の項目を変更すると、 プロパティの値が現在MonkeyCurrentItemオブジェクトに設定されます。 プロパティは CurrentItem 、 クラスで定義されています MonkeysViewModel

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public ObservableCollection<Monkey> Monkeys { get; private set; }

    public Monkey CurrentItem { get; set; }

    public MonkeysViewModel()
    {
        // ...
        CurrentItem = Monkeys.Skip(3).FirstOrDefault();
        OnPropertyChanged("CurrentItem");
    }
}

この例では、 CurrentItem プロパティはコレクション内の 4 番目の項目に Monkeys 設定されています。

カルーセルビュー] iOS および Android の既定のアイテムを含む

位置を事前設定する

CarouselView 表示される項目は、 プロパティを Position 基になるコレクション内の項目のインデックスに設定することで、プログラムによって設定できます。 次の XAML の例は、表示される項目を設定する を示しています CarouselView

<CarouselView ItemsSource="{Binding Monkeys}"
              Position="{Binding Position}">
    ...
</CarouselView>

これに相当する C# コードを次に示します。

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionProperty, "Position");

注意

プロパティの既定のバインド モードTwoWayPosition です。

プロパティ データは CarouselView.PositionPositionintの接続ビュー モデルのプロパティにバインドされます。 既定では、バインディングが使用され、 TwoWay ユーザーが を CarouselViewスクロールすると、 プロパティの Position 値が表示される項目のインデックスに設定されます。 プロパティは Position 、 クラスで定義されています MonkeysViewModel

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public int Position { get; set; }

    public MonkeysViewModel()
    {
        // ...
        Position = 3;
        OnPropertyChanged("Position");
    }
}

この例では、 Position プロパティはコレクション内の 4 番目の項目に Monkeys 設定されています。

つカルーセルビュー iOS および Android のカルーセルビューで、事前設定された位置

視覚的な状態を定義する

CarouselView では、次の 4 つのビジュアル状態が定義されます。

  • CurrentItem は、現在表示されている項目の表示状態を表します。
  • PreviousItem は、前に表示された項目の表示状態を表します。
  • NextItem は、次の項目の表示状態を表します。
  • DefaultItem は、項目の残りの部分の表示状態を表します。

これらの表示状態を使用すると、 によって表示される項目に対する視覚的な変更を CarouselView開始できます。

次の XAML の例は、、PreviousItemNextItem、および のビジュアル状態をCurrentItem定義する方法をDefaultItem示しています。

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="CurrentItem">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="1.1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PreviousItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NextItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="DefaultItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.25" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- Item template content -->
                <Frame HasShadow="true">
                    ...
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

この例では、 CurrentItem によって表示されている CarouselView 現在の項目のプロパティが既定値の 1 から 1.1 に変更されることを Scale 、ビジュアル状態で指定します。 と NextItem の表示状態ではPreviousItem、現在の項目を囲む項目が 0.5 の値でOpacity表示されることを指定します。 ビジュアル状態は DefaultItem 、 によって CarouselView 表示される項目の残りの部分を 0.25 の値で Opacity 表示することを指定します。

注意

または、ビジュアルの状態は、 のルート要素DataTemplateの型であるプロパティ値を持つ TargetTypeStyle定義できます。これは、プロパティ値としてItemTemplate設定されます。

次のスクリーンショットは、CurrentItemPreviousItemおよび のビジュアル状態をNextItem示しています。

iOS と Android のカルーセルビューのビジュアル状態を使用した

ビジュアルの状態の詳細については、「Xamarin.Forms Visual State Manager」をご覧ください。

現在のアイテムをクリアする

プロパティを CurrentItem クリアするには、プロパティを に設定するか、バインドするオブジェクトを に null設定します。

バウンスを無効にする

既定では、 CarouselView コンテンツ境界で項目がバウンスされます。 これは、 プロパティを IsBounceEnabledfalse設定することで無効にすることができます。

ループの無効化

既定では、 CarouselView は項目のコレクションへのループ アクセスを提供します。 したがって、コレクション内の最初の項目から後方にスワイプすると、コレクション内の最後の項目が表示されます。 同様に、コレクション内の最後の項目から前方にスワイプすると、コレクション内の最初の項目に戻ります。 この動作は、 プロパティを Loopfalse設定することで無効にすることができます。

スワイプ操作を無効にする

既定では、 CarouselView ユーザーはスワイプ ジェスチャを使用してアイテム間を移動できます。 このスワイプ操作は、 プロパティを IsSwipeEnabledfalse設定することで無効にすることができます。