Xamarin.Forms カルーセルビューの操作
CarouselView
は、ユーザー操作を制御する次のプロパティを定義します。
CurrentItem
型のobject
、表示されている現在の項目。 このプロパティの既定のTwoWay
バインド モードはnull
であり、表示するデータがない場合は 値を持ちます。CurrentItemChangedCommand
の型ICommand
。現在の項目が変更されたときに実行されます。CurrentItemChangedCommandParameter
:object
型、CurrentItemChangedCommand
に渡されるパラメーター。IsBounceEnabled
型のbool
。 がコンテンツ境界でバウンスするかどうかをCarouselView
指定します。 既定値はtrue
です。IsSwipeEnabled
型のbool
。 は、スワイプ ジェスチャによって表示される項目が変更されるかどうかを決定します。 既定値はtrue
です。Loop
型bool
の 。 が項目のコレクションへのループ アクセスを提供するかどうかをCarouselView
決定します。 既定値はtrue
です。Position
型int
の 、基になるコレクション内の現在の項目のインデックス。 このプロパティの既定のTwoWay
バインド モードは であり、表示するデータがない場合は 0 の値を持ちます。PositionChangedCommand
の型ICommand
。位置が変更されたときに実行されます。PositionChangedCommandParameter
:object
型、PositionChangedCommand
に渡されるパラメーター。VisibleViews
型ObservableCollection<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
前の項目と現在の項目を公開します。
コマンド
次の 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
前の位置と現在の位置を公開します。
コマンド
次の 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");
注意
プロパティの既定のバインド モードTwoWay
は CurrentItem
です。
プロパティ データは CarouselView.CurrentItem
、 CurrentItem
型 Monkey
の接続ビュー モデルのプロパティにバインドされます。 既定では、バインドが使用され、TwoWay
ユーザーが現在の項目を変更すると、 プロパティの値が現在Monkey
のCurrentItem
オブジェクトに設定されます。 プロパティは 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
設定されています。
位置を事前設定する
に 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");
注意
プロパティの既定のバインド モードTwoWay
は Position
です。
プロパティ データは CarouselView.Position
、 Position
型 int
の接続ビュー モデルのプロパティにバインドされます。 既定では、バインディングが使用され、 TwoWay
ユーザーが を CarouselView
スクロールすると、 プロパティの Position
値が表示される項目のインデックスに設定されます。 プロパティは Position
、 クラスで定義されています MonkeysViewModel
。
public class MonkeysViewModel : INotifyPropertyChanged
{
// ...
public int Position { get; set; }
public MonkeysViewModel()
{
// ...
Position = 3;
OnPropertyChanged("Position");
}
}
この例では、 Position
プロパティはコレクション内の 4 番目の項目に Monkeys
設定されています。
視覚的な状態を定義する
CarouselView
では、次の 4 つのビジュアル状態が定義されます。
CurrentItem
は、現在表示されている項目の表示状態を表します。PreviousItem
は、前に表示された項目の表示状態を表します。NextItem
は、次の項目の表示状態を表します。DefaultItem
は、項目の残りの部分の表示状態を表します。
これらの表示状態を使用すると、 によって表示される項目に対する視覚的な変更を CarouselView
開始できます。
次の XAML の例は、、PreviousItem
、NextItem
、および のビジュアル状態を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
の型であるプロパティ値を持つ TargetType
でStyle
定義できます。これは、プロパティ値としてItemTemplate
設定されます。
次のスクリーンショットは、CurrentItem
PreviousItem
および のビジュアル状態をNextItem
示しています。
ビジュアルの状態の詳細については、「Xamarin.Forms Visual State Manager」をご覧ください。
現在のアイテムをクリアする
プロパティを CurrentItem
クリアするには、プロパティを に設定するか、バインドするオブジェクトを に null
設定します。
バウンスを無効にする
既定では、 CarouselView
コンテンツ境界で項目がバウンスされます。 これは、 プロパティを IsBounceEnabled
に false
設定することで無効にすることができます。
ループの無効化
既定では、 CarouselView
は項目のコレクションへのループ アクセスを提供します。 したがって、コレクション内の最初の項目から後方にスワイプすると、コレクション内の最後の項目が表示されます。 同様に、コレクション内の最後の項目から前方にスワイプすると、コレクション内の最初の項目に戻ります。 この動作は、 プロパティを Loop
に false
設定することで無効にすることができます。
スワイプ操作を無効にする
既定では、 CarouselView
ユーザーはスワイプ ジェスチャを使用してアイテム間を移動できます。 このスワイプ操作は、 プロパティを IsSwipeEnabled
に false
設定することで無効にすることができます。