[UE4]ScrollBoxやListViewでスクロールバーの下まで背景色を表示させる

はじめに

ScrollBoxやListViewでスクロールバーの下まで背景色を表示させる方法の備忘録です。
（UEのデザイナー画面はコメントが入れられないので、どういう意図で設定していたのかすぐ忘れてしまうため。）

環境

Windows10
UE4.27.2

実装

リスト（ScrollBoxやListViewを持つWidget）とリスト内に表示する要素のWidgetの2つに分けて説明します。

リスト

リスト（ScrollBoxやListView側）の階層は下記のようにします。
SizeBoxの子要素にScrollBoxを配置、SizeBoxは後に説明するクリッピング用なので、別のものでも大丈夫です。
リストが埋まっていないとき用にダミーの背景を配置するために、GridPanelの子要素にBorder（今回は濃いグレーと薄いグレーを交互に配置）を入れています。

SizeBoxとGridPanelは同じ位置に重なるように配置します。
（分かりやすいようにPreConstructでScrollBox内にコンテンツを4つ置いています。）

今回重要になるのがScrollBoxとその親要素のクリッピング設定です。
まずScrollBoxのクリッピングを「Inherit」に設定して、スクロールバーの下まで背景色をはみ出させるようにします。

そのままでは横方向のはみだし（スクロールバーの下の部分）だけでなく、ScrollBoxの上下方向へのはみだし（ScrollBoxの子要素の分だけ上下にリストが伸びる）も発生してしまいます。

これを防ぐために、ScrollBoxの親要素であるSizeBoxのクリッピングを「Clip to Bounds」に設定して、SizeBoxからはみ出した部分は表示しないようにします。

リスト内の要素

リスト内の要素側の階層は下記のようにします。
背景色表示用とクリック検知用に2つのBorderを入れています。

背景色とクリック検知で分けたのは、スクロールバーのところまで要素の当たり判定があると、スクロールしようとしても要素がクリックされてしまい、スクロールすることができなくなるからです。

青色の部分がクリック検知用のBorder（実際には透明色にしておく）で、そこからスクロールバーの幅の分だけはみ出している赤色の部分が背景色用のBorder（青色と重なる部分にも配置してある）です。

背景色用のBorderは、Visibilityを「Not Hit-Testable」に変更して、当たり判定を無効化しておきます。

背景色に関しては、今回は2色の縞々にしたかったので、「スポーン時に公開」にチェックを入れたInt変数を用意して、偶数か奇数かで色を変えています。

ちなみにリストの要素数は、ScrollBoxに追加する際に、Get Child Countノードで取得しています。