Xamarin.Forms－CollectionView

CollectionView(ItemsView)でLinearItemsLayoutと、RemainingItemsThresholdを使った場合の注意事項。

LinearItemsLayout

この項目を使った場合、以下の問題というか分かりづらさがあった。

ItemSpacing
設定値に対しての実際の隙間がどういう関係になっているか分かりづらい。
SnapPointsType
UWPでちょっと問題が。

ItemSpacing

項目間の隙間の指定を行うパラメータ。

このパラメータを調べるきっかけとなったのが、DataTemplateを以下の様な感じにして枠付きのラベルを配置した時。
思っていた感じと異なり隙間がなかったので、その調整を行おうと思った。

<DataTemplate>
    <Frame BorderColor="Black">
        <Label VerticalOptions="Center"/>
    </Frame>
</DataTemplate>

上のを表示したのが以下の結果になる。

Android
UWP

どれも隙間がなかった。

隙間の設定を行うのは、ItemsLayoutに設定するGridItemsLayoutとLinearItemsLayout。
今回利用するのはGrid配置ではないのでLinearItemsLayoutの方のItemSpacing。

この値を3で設定したのが以下の結果。

Android

10ドットの隙間。
UWP

6ドットの隙間。

UWPの方は指定された隙間をアイテムの上下（たぶん左右も適用されていると思う）に適用し、結果としてアイテム間の隙間がItemSpacing*2の値になる感じなのだろうか。

Androidの方はItemSpacingと関連ないような数値だった。
そこでItemSpacingを1と10にした場合を見てみたが、それぞれ4ドット、34ドットの隙間となった。この隙間の確認はエミュレーターのスナップショット機能で出した画像をもとに確認したもの。

ただAndroidエミュレーター上のものをWindowsのキャプチャーでとったものを確認するとアイテム間の隙間はItemSpacingで示された値のドット数になったのがちょっと不思議なところ。

上のはItemSpacingを3にしたもの。

設定値とその関係について仕様が不明なので、ItemSpacingの値については実機確認して微調整をしていくしかないのだろうか。

SnapPointsType

次に、スクロールを行った場合のアイテムのスナップについて。
これはSnapPointsTypeで制御する。

スクロールをしていると、中途半端な位置で止まってしまわないようにする機能になるのだが、Androidは問題ないのだが、UWPについてはMandatoryと設定してもアイテムをスナップしてくれない。

スクロールバーやマウスホイールで操作するため、しょうがないのかもしれないけど。

RemainingItemsThreshold類

CollectionViewに表示する要素が大量にある場合、VM側でそれらを用意するのにメモリや時間を消費するのも何かいやである。
時間に対しての対応は非同期処理で用意するという手もあるが、MicrosoftのCollectionViewのデータ収集の説明に「データを増分読み込み」というのがあるので、これを使うのが良いのだろうと思いちょっと使ってみた。

Xamarin.FormsCollectionView のデータ - Xamarin

CollectionView に、ItemsSource プロパティを IEnumerable を実装するコレクションに設定すると、データが設定されます。

使い方はそれほど難しいものではないのだけど、初期表示数、増分の値に注意が必要だった。

まず、初期表示数。
これがページ内に表示される数より少ない場合、次のような初期表示になる。

サンプルプログラムでは表示データ数は100個、初期表示数を10とした場合がこの結果。
ページ内には10個しか表示されず、残りは非表示状態。

Android版ではスワイプ動作を行うと、RemainingItemsThresholdReachedCommandの呼び出しが来るので、11個目以降のデータの作成を行うことが可能。
UWPはスクロール可能な状況にならない限りRemainingItemsThresholdReachedCommandの呼び出しは行われない。そのため本来の表示データ数の個数である100個の表示を行うことはできない。

また同じくUWPなのだが、スクロールバーを使った操作で、ページダウン等の操作により表示アイテムの最後まできっちり表示されてしまうと、やはりRemainingItemsThresholdReachedCommandの呼び出しはされない。

こちらも表示データ数は100個なのだが、ページダウンで表示されている最後のデータが見えた状態ではRemainingItemsThresholdReachedCommandが呼び出されないので、追加データの読み込みがされない状態で止まってしまった。
この状態でさらにスクロールをちょびっと上に動かすと、非表示データがあると認識されたのかRemainingItemsThresholdReachedCommandが呼び出される。