Xamarin.Forms CollectionView のスクロール
CollectionView
では、項目をビューにスクロールする 2 つの ScrollTo
メソッドを定義します。 オーバーロードの 1 つは、指定したインデックスの項目をビューにスクロールし、もう 1 つは指定した項目をビューにスクロールします。 どちらのオーバーロードにも、項目が属するグループ、スクロールが完了した後の項目の正確な位置、およびスクロールをアニメーション化するかどうかを示すために指定できる追加の引数があります。
CollectionView
は、 ScrollToRequested
いずれかのメソッドが呼び出されたときに発生するイベントを ScrollTo
定義します。 イベントに付随するオブジェクトにはScrollToRequestedEventArgs
、,, Index
, Item
, など、IsAnimated
多くのプロパティがありますScrollToPosition
。ScrollToRequested
これらのプロパティは、メソッド呼び出しで ScrollTo
指定された引数から設定されます。
さらに、 CollectionView
スクロールが発生したことを示すために発生するイベントを定義 Scrolled
します。 ItemsViewScrolledEventArgs
イベントに付随Scrolled
するオブジェクトには、多くのプロパティがあります。 詳細については、「 スクロールの検出」を参照してください。
CollectionView
また、 ItemsUpdatingScrollMode
新しい項目が追加されたときのスクロール動作を CollectionView
表すプロパティも定義します。 このプロパティの詳細については、「 新しい項目が追加されたときにスクロール位置を制御する」を参照してください。
ユーザーがスワイプしてスクロールを開始すると、項目が完全に表示されるようにスクロールの終了位置を制御できます。 スクロールが停止すると項目が位置にスナップされるため、この機能はスナップと呼ばれます。 詳細については、「 スナップ点」を参照してください。
CollectionView
は、ユーザーがスクロールするにつれてデータを増分的に読み込むこともできます。 詳細については、「データを 増分読み込む」を参照してください。
スクロールを検出する
CollectionView
は、 Scrolled
スクロールが発生したことを示すために発生するイベントを定義します。 ItemsViewScrolledEventArgs
イベントに付随Scrolled
するオブジェクトを表すクラスは、次のプロパティを定義します。
HorizontalDelta
は、水平double
スクロールの量の変化を表します。 これは左にスクロールする場合は負の値、右にスクロールする場合は正の値です。VerticalDelta
の型double
は、垂直スクロールの量の変化を表します。 これは、上方向にスクロールする場合は負の値、下にスクロールする場合は正の値です。HorizontalOffset
の型double
は、リストが原点から水平方向にオフセットされる量を定義します。VerticalOffset
の型double
は、リストが原点から垂直方向にオフセットされる量を定義します。FirstVisibleItemIndex
は、リストint
に表示される最初の項目のインデックスです。CenterItemIndex
(typeint
) は、リストに表示される中央の項目のインデックスです。LastVisibleItemIndex
、typeint
は、リストに表示される最後の項目のインデックスです。
次の XAML の例は、イベントの CollectionView
イベント ハンドラーを設定する例を Scrolled
示しています。
<CollectionView Scrolled="OnCollectionViewScrolled">
...
</CollectionView>
これに相当する C# コードを次に示します。
CollectionView collectionView = new CollectionView();
collectionView.Scrolled += OnCollectionViewScrolled;
このコード例では、イベントが OnCollectionViewScrolled
発生したときにイベント ハンドラーが Scrolled
実行されます。
void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
// Custom logic
}
重要
イベントは Scrolled
、ユーザーが開始したスクロールとプログラムによるスクロールに対して発生します。
インデックスの項目をビューにスクロールする
最初 ScrollTo
のメソッド オーバーロードは、指定したインデックスの項目をビューにスクロールします。 オブジェクトの名前collectionView
をCollectionView
指定すると、次の例は、インデックス 12 の項目をビューにスクロールする方法を示しています。
collectionView.ScrollTo(12);
または、グループ化されたデータ内の項目をスクロールして、項目とグループ インデックスを指定することもできます。 次の例は、2 番目のグループの 3 番目の項目をスクロールして表示する方法を示しています。
// Items and groups are indexed from zero.
collectionView.ScrollTo(2, 1);
注意
イベントは ScrollToRequested
、メソッドが ScrollTo
呼び出されたときに発生します。
項目をスクロールして表示する
2 番目 ScrollTo
のメソッド オーバーロードは、指定した項目をビューにスクロールします。 という名前collectionView
のCollectionView
オブジェクトを指定すると、次の例は Proboscis Monkey 項目をスクロールして表示する方法を示しています。
MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey);
または、グループ化されたデータ内の項目をスクロールして、項目とグループを指定することもできます。 次の例は、Monkeys グループの Proboscis Monkey 項目をスクロールして表示する方法を示しています。
GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey, group);
注意
イベントは ScrollToRequested
、メソッドが ScrollTo
呼び出されたときに発生します。
スクロール アニメーションを無効にする
項目をビューにスクロールすると、スクロール アニメーションが表示されます。 ただし、このアニメーションは、メソッドfalse
の引数をanimate
次のようにScrollTo
設定することで無効にすることができます。
collectionView.ScrollTo(monkey, animate: false);
スクロール位置を制御する
項目をビューにスクロールする場合、スクロールが完了した後の項目の正確な位置は、メソッドのScrollTo
引数でposition
指定できます。 この引数は列挙メンバーを ScrollToPosition
受け入れます。
MakeVisible
メンバーは ScrollToPosition.MakeVisible
、項目がビューに表示されるまでスクロールする必要があることを示します。
collectionView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);
次のコード例では、項目をビューにスクロールするために必要なスクロールが最小限になります。
注意
ScrollToPosition.MakeVisible
このメンバーは、メソッドの呼び出しScrollTo
時に引数がposition
指定されていない場合、既定で使用されます。
開始
メンバーは ScrollToPosition.Start
、項目をビューの先頭までスクロールする必要があることを示します。
collectionView.ScrollTo(monkey, position: ScrollToPosition.Start);
次のコード例では、項目がビューの先頭までスクロールされます。
Center
メンバーは ScrollToPosition.Center
、項目をビューの中央までスクロールする必要があることを示します。
collectionView.ScrollTo(monkey, position: ScrollToPosition.Center);
次のコード例では、項目がビューの中央までスクロールされます。
End
メンバーは ScrollToPosition.End
、項目をビューの末尾までスクロールする必要があることを示します。
collectionView.ScrollTo(monkey, position: ScrollToPosition.End);
次のコード例では、項目がビューの末尾までスクロールされます。
新しい項目が追加されたときにスクロール位置を制御する
CollectionView
ItemsUpdatingScrollMode
は、バインド可能なプロパティによってサポートされるプロパティを定義します。 このプロパティは、新しい項目が追加されたときのCollectionView
スクロール動作を表す列挙値を取得または設定ItemsUpdatingScrollMode
します。 ItemsUpdatingScrollMode
列挙体を使って、次のメンバーを定義できます。
KeepItemsInView
は、新しい項目が追加されたときに表示されるリスト内の最初の項目を保持します。KeepScrollOffset
は、新しい項目が追加されたときに現在のスクロール位置が維持されることを保証します。KeepLastItemInView
は、新しい項目が追加されたときに表示されるリスト内の最後の項目を保持するようにスクロール オフセットを調整します。
プロパティの ItemsUpdatingScrollMode
既定値は KeepItemsInView
. したがって、リストの最初の項目に新しい CollectionView
項目が追加されると、表示されたままになります。 新しい項目が追加されたときにリスト内の最後の項目が表示されるようにするには、プロパティを ItemsUpdatingScrollMode
次のように KeepLastItemInView
設定します。
<CollectionView ItemsUpdatingScrollMode="KeepLastItemInView">
...
</CollectionView>
これに相当する C# コードを次に示します。
CollectionView collectionView = new CollectionView
{
ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};
スクロール バーの表示
CollectionView
では、 HorizontalScrollBarVisibility
バインド可能なプロパティによってサポートされるプロパティが定義および VerticalScrollBarVisibility
プロパティになります。 これらのプロパティは、水平スクロール バーまたは垂直スクロール バーが表示されるタイミングを表す列挙値を取得または設定 ScrollBarVisibility
します。 ScrollBarVisibility
列挙体を使って、次のメンバーを定義できます。
Default
はプラットフォームの既定のスクロール バーの動作を示し、およびプロパティのHorizontalScrollBarVisibility
VerticalScrollBarVisibility
既定値です。Always
は、コンテンツがビューに収まる場合でも、スクロール バーが表示されることを示します。Never
は、コンテンツがビューに収まらない場合でも、スクロール バーが表示されないことを示します。
スナップ位置
ユーザーがスワイプしてスクロールを開始すると、項目が完全に表示されるようにスクロールの終了位置を制御できます。 この機能はスナップと呼ばれます。スクロールが停止したときに項目が位置にスナップされ、クラスの ItemsLayout
次のプロパティによって制御されるためです。
SnapPointsType
(typeSnapPointsType
) は、スクロール時のスナップポイントの動作を指定します。SnapPointsAlignment
の種類SnapPointsAlignment
は、スナップポイントを項目に合わせる方法を指定します。
これらのプロパティはオブジェクトによって BindableProperty
サポートされます。つまり、プロパティはデータ バインディングのターゲットにすることができます。
注意
スナップが発生すると、最小のモーション量を生成する方向にスナップが発生します。
スナップポイントの種類
SnapPointsType
列挙体を使って、次のメンバーを定義できます。
None
は、スクロールが項目にスナップしないことを示します。Mandatory
は、コンテンツが常に、慣性方向に沿って、スクロールが自然に停止する最も近いスナップ ポイントにスナップすることを示します。MandatorySingle
は、同じ動作Mandatory
を示しますが、一度に 1 つの項目のみをスクロールします。
既定では、次の SnapPointsType
スクリーンショットに SnapPointsType.None
示すように、このプロパティは 、スクロールによって項目がスナップされないように設定されます。
点の配置をスナップする
列挙体はSnapPointsAlignment
、、Center
、およびメンバーをEnd
定義しますStart
。
重要
プロパティのSnapPointsAlignment
値は、プロパティが 、またはMandatorySingle
に設定Mandatory
されている場合SnapPointsType
にのみ考慮されます。
開始
このメンバーは SnapPointsAlignment.Start
、スナップポイントが項目の上端に揃っていることを示します。
既定では、SnapPointsAlignment
プロパティは SnapPointsAlignment.Start
に設定されます。 ただし、完成度を高めるために、次の XAML の例では、この列挙メンバーを設定する方法を示します。
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Start" />
</CollectionView.ItemsLayout>
...
</CollectionView>
これに相当する C# コードを次に示します。
CollectionView collectionView = new CollectionView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.Start
},
// ...
};
ユーザーがスワイプしてスクロールを開始すると、上部の項目がビューの上部に揃えられます。
Center
メンバーは SnapPointsAlignment.Center
、スナップポイントが項目の中心に揃っていることを示します。 次の XAML の例は、この列挙メンバーを設定する方法を示しています。
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Center" />
</CollectionView.ItemsLayout>
...
</CollectionView>
これに相当する C# コードを次に示します。
CollectionView collectionView = new CollectionView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.Center
},
// ...
};
ユーザーがスワイプしてスクロールを開始すると、上部の項目がビューの上部に中央揃えされます。
End
このメンバーは SnapPointsAlignment.End
、スナップポイントが項目の末尾の端に揃っていることを示します。 次の XAML の例は、この列挙メンバーを設定する方法を示しています。
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="End" />
</CollectionView.ItemsLayout>
...
</CollectionView>
これに相当する C# コードを次に示します。
CollectionView collectionView = new CollectionView
{
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
SnapPointsType = SnapPointsType.MandatorySingle,
SnapPointsAlignment = SnapPointsAlignment.End
},
// ...
};
ユーザーがスワイプしてスクロールを開始すると、下部の項目がビューの下部に揃えられます。