:::no-loc(Xamarin.Forms)::: CollectionView スクロール:::no-loc(Xamarin.Forms)::: CollectionView Scrolling

• 09/17/2019
• • d
  • o

サンプルのダウンロード Download the sample

CollectionView 項目を ScrollTo ビューにスクロールする2つのメソッドを定義します。CollectionView defines two ScrollTo methods, that scroll items into view. オーバーロードの1つは、指定されたインデックス位置にある項目をビューにスクロールし、もう一方は指定された項目をビューにスクロールします。One of the overloads scrolls the item at the specified index into view, while the other scrolls the specified item into view. どちらのオーバーロードにも、項目が属するグループを示すために指定できる追加の引数、スクロールが完了した後の項目の正確な位置、およびスクロールをアニメーション化するかどうかを指定できます。Both overloads have additional arguments that can be specified to indicate the group the item belongs to, the exact position of the item after the scroll has completed, and whether to animate the scroll.

CollectionViewScrollToRequestedメソッドのいずれかが呼び出されたときに発生するイベントを定義 ScrollTo します。CollectionView defines a ScrollToRequested event that is fired when one of the ScrollTo methods is invoked. ScrollToRequestedEventArgsイベントに付随するオブジェクトには、、、、などの ScrollToRequested 多くのプロパティがあり IsAnimated Index Item ScrollToPosition ます。The ScrollToRequestedEventArgs object that accompanies the ScrollToRequested event has many properties, including IsAnimated, Index, Item, and ScrollToPosition. これらのプロパティは、メソッドの呼び出しで指定された引数によって設定され ScrollTo ます。These properties are set from the arguments specified in the ScrollTo method calls.

また、は、スクロールが発生したことを CollectionView Scrolled 示すために発生するイベントを定義します。In addition, CollectionView defines a Scrolled event that is fired to indicate that scrolling occurred. ItemsViewScrolledEventArgsイベントに付随するオブジェクトに Scrolled は、多くのプロパティがあります。The ItemsViewScrolledEventArgs object that accompanies the Scrolled event has many properties. 詳細については、「 スクロールの検出」を参照してください。For more information, see Detect scrolling.

CollectionViewItemsUpdatingScrollMode CollectionView 新しい項目が追加されたときののスクロール動作を表すプロパティも定義します。CollectionView also defines a ItemsUpdatingScrollMode property that represents the scrolling behavior of the CollectionView when new items are added to it. このプロパティの詳細については、「 新しい項目が追加されたときのコントロールのスクロール位置」を参照してください。For more information about this property, see Control scroll position when new items are added.

ユーザーがスクロールを開始しようとしたときに、項目が完全に表示されるように、スクロールの終了位置を制御できます。When a user swipes to initiate a scroll, the end position of the scroll can be controlled so that items are fully displayed. スクロールが停止したときに項目が位置にスナップされるため、この機能はスナップと呼ばれています。This feature is known as snapping, because items snap to position when scrolling stops. 詳細については、「 スナップポイント」を参照してください。For more information, see Snap points.

CollectionView ユーザーがスクロールするときに、データを徐々に読み込むこともできます。CollectionView can also load data incrementally as the user scrolls. 詳細については、「 データの増分読み込み」を参照してください。For more information, see Load data incrementally.

スクロールの検出Detect scrolling

CollectionView スクロールが Scrolled 発生したことを示すために発生するイベントを定義します。CollectionView defines a Scrolled event which is fired to indicate that scrolling occurred. 次の XAML の例は、 CollectionView イベントのイベントハンドラーを設定するを示してい Scrolled ます。The following XAML example shows a CollectionView that sets an event handler for the Scrolled event:

<CollectionView Scrolled="OnCollectionViewScrolled">
    ...
</CollectionView>

これに相当する C# コードを次に示します。The equivalent C# code is:

CollectionView collectionView = new CollectionView();
collectionView.Scrolled += OnCollectionViewScrolled;

このコード例では、イベント OnCollectionViewScrolled の発生時にイベントハンドラーが実行され Scrolled ます。In this code example, the OnCollectionViewScrolled event handler is executed when the Scrolled event fires:

void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
    Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
    Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
    Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
    Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
    Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
    Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}

この例では、イベントハンドラーは、 OnCollectionViewScrolled ItemsViewScrolledEventArgs イベントに付随するオブジェクトの値を出力します。In this example, the OnCollectionViewScrolled event handler outputs the values of the ItemsViewScrolledEventArgs object that accompanies the event.

インデックスにある項目をスクロールして表示するScroll an item at an index into view

最初の ScrollTo メソッドオーバーロードは、指定されたインデックス位置にある項目をビューにスクロールします。The first ScrollTo method overload scrolls the item at the specified index into view. CollectionViewという名前のオブジェクトがある collectionView 場合、次の例は、インデックス12の項目をビューにスクロールする方法を示しています。Given a CollectionView object named collectionView, the following example shows how to scroll the item at index 12 into view:

collectionView.ScrollTo(12);

また、アイテムとグループのインデックスを指定することで、グループ化されたデータのアイテムをスクロールして表示することもできます。Alternatively, an item in grouped data can be scrolled into view by specifying the item and group indexes. 次の例は、2番目のグループの3番目の項目をスクロールして表示する方法を示しています。The following example shows how to scroll the third item in the second group into view:

// Items and groups are indexed from zero.
collectionView.ScrollTo(2, 1);

項目をスクロールして表示するScroll an item into view

2番目の ScrollTo メソッドオーバーロードは、指定された項目をビューにスクロールします。The second ScrollTo method overload scrolls the specified item into view. CollectionViewという名前のオブジェクトがある collectionView 場合、次の例は、Proboscis のサル項目をスクロールして表示する方法を示しています。Given a CollectionView object named collectionView, the following example shows how to scroll the Proboscis Monkey item into view:

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey);

また、アイテムとグループを指定すると、グループ化されたデータのアイテムをスクロールして表示することもできます。Alternatively, an item in grouped data can be scrolled into view by specifying the item and the group. 次の例では、猿グループ内の Proboscis サル項目をスクロールして表示する方法を示します。The following example shows how to scroll the Proboscis Monkey item in the Monkeys group into view:

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);

スクロールアニメーションを無効にするDisable scroll animation

スクロールアニメーションは、項目をビューにスクロールしたときに表示されます。A scrolling animation is displayed when scrolling an item into view. ただし、このアニメーションは、 animate メソッドの引数 ScrollTo を次のように設定することによって無効にすることができます false 。However, this animation can be disabled by setting the animate argument of the ScrollTo method to false:

collectionView.ScrollTo(monkey, animate: false);

コントロールのスクロール位置Control scroll position

項目をビューにスクロールすると、スクロールが完了した後の項目の正確な位置は、メソッドの引数を使用して指定でき position ScrollTo ます。When scrolling an item into view, the exact position of the item after the scroll has completed can be specified with the position argument of the ScrollTo methods. この引数は、 ScrollToPosition 列挙型のメンバーを受け取ります。This argument accepts a ScrollToPosition enumeration member.

MakeVisibleMakeVisible

メンバーは、 ScrollToPosition.MakeVisible アイテムがビューに表示されるまでスクロールする必要があることを示しています。The ScrollToPosition.MakeVisible member indicates that the item should be scrolled until it's visible in the view:

collectionView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);

このコード例では、項目をスクロールして表示するために必要な最小限のスクロールが実行されます。This example code results in the minimal scrolling required to scroll the item into view:

開始Start

メンバーは、 ScrollToPosition.Start 項目をビューの先頭までスクロールする必要があることを示します。The ScrollToPosition.Start member indicates that the item should be scrolled to the start of the view:

collectionView.ScrollTo(monkey, position: ScrollToPosition.Start);

次のコード例では、項目がビューの先頭にスクロールされます。This example code results in the item being scrolled to the start of the view:

CenterCenter

メンバーは、 ScrollToPosition.Center アイテムをビューの中央にスクロールする必要があることを示します。The ScrollToPosition.Center member indicates that the item should be scrolled to the center of the view:

collectionView.ScrollTo(monkey, position: ScrollToPosition.Center);

次のコード例では、アイテムがビューの中央にスクロールされます。This example code results in the item being scrolled to the center of the view:

EndEnd

メンバーは、 ScrollToPosition.End 項目をビューの末尾までスクロールする必要があることを示します。The ScrollToPosition.End member indicates that the item should be scrolled to the end of the view:

collectionView.ScrollTo(monkey, position: ScrollToPosition.End);

次のコード例では、ビューの最後までスクロールされる項目になります。This example code results in the item being scrolled to the end of the view:

新しい項目が追加されたときのスクロール位置の制御Control scroll position when new items are added

CollectionView バインド可能 ItemsUpdatingScrollMode なプロパティによってサポートされるプロパティを定義します。CollectionView defines a ItemsUpdatingScrollMode property, which is backed by a bindable property. このプロパティは ItemsUpdatingScrollMode 、 CollectionView 新しい項目が追加されたときののスクロール動作を表す列挙値を取得または設定します。This property gets or sets a ItemsUpdatingScrollMode enumeration value that represents the scrolling behavior of the CollectionView when new items are added to it. ItemsUpdatingScrollMode 列挙体を使って、次のメンバーを定義できます。The ItemsUpdatingScrollMode enumeration defines the following members:

• KeepItemsInView 新しい項目が追加されると、リスト内の最初の項目が表示されます。KeepItemsInView keeps the first item in the list displayed when new items are added.
• KeepScrollOffset 新しい項目が追加されたときに、現在のスクロール位置が維持されるようにします。KeepScrollOffset ensures that the current scroll position is maintained when new items are added.
• KeepLastItemInView 新しい項目が追加されたときにリスト内の最後の項目を維持するように、スクロールのオフセットを調整します。KeepLastItemInView adjusts the scroll offset to keep the last item in the list displayed when new items are added.

プロパティの既定値 ItemsUpdatingScrollMode は KeepItemsInView です。The default value of the ItemsUpdatingScrollMode property is KeepItemsInView. したがって、新しい項目がに追加されると、 CollectionView リスト内の最初の項目が表示されたままになります。Therefore, when new items are added to a CollectionView the first item in the list will remain displayed. 新しい項目が追加されたときにリスト内の最後の項目が表示されるようにするには、 ItemsUpdatingScrollMode プロパティをに設定し KeepLastItemInView ます。To ensure that the last item in the list is displayed when new items are added, set the ItemsUpdatingScrollMode property to KeepLastItemInView:

<CollectionView ItemsUpdatingScrollMode="KeepLastItemInView">
    ...
</CollectionView>

これに相当する C# コードを次に示します。The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

スクロールバーの表示Scroll bar visibility

CollectionViewHorizontalScrollBarVisibilityバインド可能 VerticalScrollBarVisibility なプロパティによってサポートされるプロパティとプロパティを定義します。CollectionView defines HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties, which are backed by bindable properties. これらのプロパティは、 ScrollBarVisibility 水平方向または垂直方向のスクロールバーを表示するタイミングを表す列挙値を取得または設定します。These properties get or set a ScrollBarVisibility enumeration value that represents when the horizontal, or vertical, scroll bar is visible. ScrollBarVisibility 列挙体を使って、次のメンバーを定義できます。The ScrollBarVisibility enumeration defines the following members:

• Default プラットフォームの既定のスクロールバーの動作を示し HorizontalScrollBarVisibility ます。は、プロパティとプロパティの既定値です VerticalScrollBarVisibility 。Default indicates the default scroll bar behavior for the platform, and is the default value for the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.
• Always ビューにコンテンツが収まる場合でも、スクロールバーが表示されることを示します。Always indicates that scroll bars will be visible, even when the content fits in the view.
• Never コンテンツがビューに収まらない場合でも、スクロールバーが表示されないことを示します。Never indicates that scroll bars will not be visible, even if the content doesn't fit in the view.

スナップ位置Snap points

ユーザーがスクロールを開始しようとしたときに、項目が完全に表示されるように、スクロールの終了位置を制御できます。When a user swipes to initiate a scroll, the end position of the scroll can be controlled so that items are fully displayed. この機能はスナップと呼ばれます。これは、スクロールが停止したときに項目が位置にスナップし、クラスの次のプロパティによって制御されるためです ItemsLayout 。This feature is known as snapping, because items snap to position when scrolling stops, and is controlled by the following properties from the ItemsLayout class:

• SnapPointsType型のは、 SnapPointsType スクロール時のスナップポイントの動作を指定します。SnapPointsType, of type SnapPointsType, specifies the behavior of snap points when scrolling.
• SnapPointsAlignment(型) では、 SnapPointsAlignment スナップポイントを項目と整列する方法を指定します。SnapPointsAlignment, of type SnapPointsAlignment, specifies how snap points are aligned with items.

これらのプロパティは、オブジェクトによって支えられてい BindableProperty ます。これは、プロパティをデータバインディングのターゲットにできることを意味します。These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

スナップポイントの種類Snap points type

SnapPointsType列挙体は、次のメンバーを定義します。The SnapPointsType enumeration defines the following members:

• None スクロールが項目にスナップされないことを示します。None indicates that scrolling does not snap to items.
• Mandatory コンテンツを常に最も近いスナップポイントにスナップし、慣性の方向に沿ってスクロールが自然に停止することを示します。Mandatory indicates that content always snaps to the closest snap point to where scrolling would naturally stop, along the direction of inertia.
• MandatorySingle と同じ動作を示し Mandatory ますが、一度に1つの項目だけをスクロールします。MandatorySingle indicates the same behavior as Mandatory, but only scrolls one item at a time.

既定では、 SnapPointsType プロパティはに設定されます SnapPointsType.None 。これにより、次のスクリーンショットに示すように、スクロールによって項目がスナップされません。By default, the SnapPointsType property is set to SnapPointsType.None, which ensures that scrolling does not snap items, as shown in the following screenshots:

スナップポイントの配置Snap points alignment

SnapPointsAlignment列挙体は Start 、、、およびの各メンバーを定義し Center End ます。The SnapPointsAlignment enumeration defines Start, Center, and End members.

開始Start

メンバーは、 SnapPointsAlignment.Start スナップポイントが項目の先頭端に合わせて整列されていることを示します。The SnapPointsAlignment.Start member indicates that snap points are aligned with the leading edge of items.

既定では、 SnapPointsAlignment プロパティはに設定されて SnapPointsAlignment.Start います。By default, the SnapPointsAlignment property is set to SnapPointsAlignment.Start. ただし、完全を期すために、この列挙型のメンバーを設定する方法を次の XAML の例に示します。However, for completeness, the following XAML example shows how to set this enumeration member:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

ユーザーがスクロールを開始しようとすると、最上位の項目がビューの上部にスワイプます。When a user swipes to initiate a scroll, the top item will be aligned with the top of the view:

CenterCenter

メンバーは、 SnapPointsAlignment.Center スナップポイントが項目の中央に配置されていることを示します。The SnapPointsAlignment.Center member indicates that snap points are aligned with the center of items. 次の XAML の例は、この列挙型のメンバーを設定する方法を示しています。The following XAML example shows how to set this enumeration member:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

ユーザーがスクロールを開始しようとすると、最上位の項目は、ビューの上部に中央揃えで配置されます。スワイプWhen a user swipes to initiate a scroll, the top item will be center aligned at the top of the view:

EndEnd

メンバーは、 SnapPointsAlignment.End スナップポイントが項目の末尾の端に揃えられていることを示します。The SnapPointsAlignment.End member indicates that snap points are aligned with the trailing edge of items. 次の XAML の例は、この列挙型のメンバーを設定する方法を示しています。The following XAML example shows how to set this enumeration member:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

ユーザーがスクロールを開始しようとすると、下の項目はビューの下部にスワイプます。When a user swipes to initiate a scroll, the bottom item will be aligned with the bottom of the view:

関連リンクRelated links

• CollectionView (サンプル)CollectionView (sample)