UXML 要素 ListView

ListView は、アイテムのリストにリンクして表示する、垂直方向にスクロール可能な領域です。　

ノート: 水平垂直方向の Scroller 要素は、UI Toolkit の標準的な Scroller です。

Create a ListView

You can create a ListView with UI Builder, UXML, and C#. The following C# example creates a ListView:

var listView = new ListView();

ListViewと ScrollView の比較

You can use a ScrollView control to create the same functionalities as using a ListView. However, a ListView is more efficient than a ScrollView when you do the following:

• リストアイテムを入力する
• アイテムの高さを管理する
• オブジェクトへの紐づけとその解除
• ページを埋めるために必要なビジュアル要素の数のインスタンス化する
• ビジュアル要素をリサイクルし、メモリ処理を最適化する

Refresh the collection view

To refresh the collection view, in general, call the RefreshItems or RefreshItem method. However, in the following cases, call Rebuild instead to refresh the collection view:

• You change the type of the data source, such as changing from a List<float> to a List<Vector3>.
• You make changes to makeItem or destroyItem.

Note: If you call Rebuild, the collection view is completely rebuilt, which can be expensive. If you call RefreshItems or RefreshItem, the collection view is only refreshed, which is less expensive.

アイテムの高さを設定

アイテムの高さを利用してコンテンツを駆動する方法を変更するには、VirtualizationMethod を使用します。

• VirtualizationMethod.FixedHeight すべてのアイテムの高さを同じにします。
• VirtualizationMethod.DynamicHeight アイテムに様々な高さを持たせることができます。

スクロール速度を制御する

The ListView has a built-in child ScrollView element that lets users scroll through the list. You can control the speed of the scroll by overriding the mouseWheelScrollSize, horizontalPageSize, and verticalPageSize properties of the ScrollView with C#.

Implement drag-and-drop operations for ListView

Drag-and-drop is a common feature in UI design. To implement the drag-and-drop operations, override the following methods:

• To enable dragging items, override canStartDrag.
• To set which items are dragged, override setupDragAndDrop.
• To get item status changes, override dragAndDropUpdate. You can perform certain actions based on the drag position or other conditions.
• To control the drag-and-drop behavior, override handleDrop.

During the drag-and-drop operation, you can enable the reordering of items by dragging. To enable, set the reorderable attribute to true in UI Builder, UXML, and C#.

Refer to Create a drag-and-drop list and tree views between windows for an example.

例

The following UXML example creates a ListView:

[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/ListViewSnippet.uxml)]

The following C# example illustrates some of the customizable functionalities of the ListView:

[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/ListViewSnippet.cs#sample)]

To try this example live in Unity, go to Window > UI Toolkit > Samples. ​ For more examples, refer to the following:

• Create list and tree views: Use ListView, TreeView, MultiColumnListView, and MultiColumnTreeView to create list and tree views.
• Create a complex list view: Use ListView to create a custom Editor window with a list of characters.
• ListView でリストに紐づけ: トグルのリストを作成し、そのリストを GameSwitch オブジェクトの基礎のリストに紐づけます。　
• Create a drag-and-drop list and tree views between windows: Use ListView, TreeView, and MultiColumnListView to create a drag-and-drop UI between windows.

C# の基本クラスと名前空間

C# クラス: ListView
名前空間: UnityEngine.UIElements
基本クラス: BaseListView

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

名前	型	説明
item-template	UIElements.VisualTreeAsset	A UXML template that constructs each recycled and rebound element within the list. This template is designed to replace the makeItem definition. You can use it along with BaseListView.bindingSourceSelectionMode and bindings to have a completely codeless workflow.

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

名前	型	説明
allow-add	boolean	This property allows the user to allow or block the addition of an item when clicking on the Add Button. It must return true or false. If the callback is not set to false, any Add operation will be allowed.
allow-remove	boolean	This property allows the user to allow or block the removal of an item when clicking on the Remove Button. It must return true or false. If the property is not set to false, any Remove operation will be allowed.
binding-path	string	バインドされるべきターゲットプロパティのパス。
binding-source-selection-mode	UIElements.BindingSourceSelectionMode	This property controls whether every element in the list will get its data source setup automatically to the correct item in the collection’s source. When set to AutoAssign, the bind callbacks don’t need to be specified, since bindings can be used to fill the elements.
fixed-item-height	float	リスト内の 1 つのアイテムの高さをピクセル単位で指定します。 コレクションビューを機能させるためには、このプロパティは、virtualizationMethod が FixedHeight に設定されている場合に設定する必要があります。virtualizationMethodが DynamicHeight の場合に設定すると、デフォルトの高さとして機能し、アイテムがレイアウトされる前に、必要なアイテムの数とスクロール可能な領域を計算するのに役立ちます。アイテムの予想される最小の高さに設定する必要があります。
focusable	boolean	要素がフォーカス可能である場合は true。
header-title	string	This property controls the text of the foldout header when using showFoldoutHeader. If the makeHeader callback is set, this property gets overridden and the title is not shown.
reorder-mode	UIElements.ListViewReorderMode	このプロパティは、リストビューのドラッグアンドドロップモードを制御します。 デフォルト値は Simple です。このプロパティが Animated に設定されている場合、Unity はすべてのアイテムの前にドラッグハンドルを追加し、ドラッグアンドドロップ操作でアイテムの並び替えが発生すると、アニメーションでアイテムをプッシュします。複数のアイテムの並べ替えは、Simple ドラッグモードでのみサポートされます。
reorderable	boolean	ユーザーがリストアイテムをドラッグして順序を変更できるかどうかを示す値を取得または設定します。 デフォルト値は false で、canStartDrag、setupDragAndDrop、dragAndDropUpdate、および handleDrop 実装している場合、他のビューへアイテムをドラッグ、または、他のビューからアイテムをドラッグすることが可能になります。この値を true 設定すると、ユーザーがリスト内のアイテムを並べ替えることができます。
selection-type	UIElements.SelectionType	選択タイプを制御します。 デフォルト値は SelectionType.Single です。コレクションビューで選択を無効に設定すると、現在の選択はすべて消去されます。
show-add-remove-footer	boolean	This property controls whether a footer will be added to the list view. The default value is false. When this property is set to true, Unity adds a footer under the scroll view. This footer contains two buttons: A “+” button. When clicked, it adds a single item at the end of the list view. A “-” button. When clicked, it removes all selected items, or the last item if none are selected. If the makeFooter callback is set, it will override this property.
show-alternating-row-backgrounds	UIElements.AlternatingRowBackground	このプロパティは、コレクションビューの行の背景色を交互に表示するかどうかを制御します。AlternatingRowBackgroundenum から値を取ります。| |show-border|boolean|このプロパティを有効にすると、コレクションビューの周囲に境界線が表示されます。<br /> <br /> true に設定すると、コレクションビューが内部に使用する ScrollView の周囲に境界線が表示されます。| |show-bound-collection-size|boolean|このプロパティは、リストビューがコレクションサイズ (アイテム数) を表示するかどうかを制御します。<br /><br />デフォルト値はtrueです。このプロパティがtrueに設定されている場合、Unity はリストの最初のアイテムとしてコレクションサイズを表示しますが、リストインデックスに含まれる実際のリストアイテムにはしません。リストインデックス 0 を問い合わせると、Unity はコレクションサイズではなく、最初の実際のリストアイテムを返します。showFoldoutHeaderをtrueに設定すると、代わりにコレクションサイズフィールドがヘッダーに含まれます。このプロパティはデータソースが正しくリンクされているかどうかを示すので、ListView のデバッグに使用できます。本番環境では、コレクションサイズが ListView の行アイテムとして表示されることはほとんどありません。<br /> <br />UnityEditor.UIElements.BindingExtensions.Bindを参照してください。| |show-foldout-header|boolean|This property controls whether the list view displays a header, in the form of a foldout that can be expanded or collapsed.<br /> <br /> The default value isfalse. When this property is set totrue, Unity adds a foldout in the hierarchy of the list view and moves the scroll view inside that newly created foldout. You can change the text of this foldout withheaderTitleproperty on the ListView. IfshowBoundCollectionSizeis set totrue, the header includes a TextField to control the array size, instead of using the field as part of the list. If themakeHeadercallback is set, no Foldout is shown.| |tabindex|int|フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。| |virtualization-method|[UIElements.CollectionVirtualizationMethod](../ScriptReference/UIElements.CollectionVirtualizationMethod.html)|スクロールバーが表示されているときにこのコレクションに使用する仮想化メソッド。CollectionVirtualizationMethodenum から値を取ります。<br /><br />デフォルト値はFixedHeightです。固定の高さを使用する場合は、fixedItemHeightプロパティを指定します。固定の高さの方がパフォーマンスは高くなりますが、コンテンツに対する柔軟性は低くなります。DynamicHeight` を使用する場合、コレクションは実際の高さが計算されるまで待機します。動的な高さはより柔軟ですが、パフォーマンスは低くなります。

この要素は、VisualElement から以下の属性も継承します。

名前	型	説明
content-container	string	子要素はそれに追加されますが、通常は要素自体と同じです。
data-source	Object	Assigns a data source to this VisualElement which overrides any inherited data source. This data source is inherited by all children.
data-source-path	string	Path from the data source to the value.
name	string	この VisualElement の名前。 このプロパティを使用して、特定の要素を対象とする USS セレクターを記述します。要素には一意の名前を付けるのが標準的です。
picking-mode	UIElements.PickingMode	mouseEvents または IPanel.Pick クエリの間にこの要素を選択 (ピック) できるかどうかを決定します。
style	string	この要素のスタイルオブジェクトへの参照。 C# でこのオブジェクトに書き込まれた USS ファイルまたはインラインスタイルから計算されたデータが含まれます。
toolbar	string	ユーザーが要素をマウスオーバーした後、わずかな時間、情報ボックス内に表示するテキスト。これはエディター UI でのみサポートされます。
usage-hints	UIElements.UsageHints	VisualElement の高レベルの使用パターンを指定するヒント値の組み合わせ。このプロパティは、VisualElement がまだ Panel の一部でない場合にのみ設定できます。Panel の一部になると、このプロパティは事実上読み取り専用となり、変更しようとすると例外がスローされます。適切な UsageHints を指定することで、予想される使用パターンに基づいて、特定の操作をどのように処理するか、または高速化するかについて、システムがより適切な判断を下すようになります。これらのヒントは動作や視覚的な結果には影響しませんが、パネルとその中の要素の全体的なパフォーマンスにのみ影響することに注意してください。常に適切なUsageHints を指定することを考慮することをお勧めしますが、特定の条件下 (例えば、ターゲットプラットフォームのハードウェア制限など) では、いくつかの UsageHints が内部的に無視される可能性があることに留意してください。
view-data-key	string	Used for view data persistence, such as tree expanded states, scroll position, or zoom level. This key is used to save and load the view data from the view data store. If you don’t set this key, the persistence is disabled for the associated VisualElement. For more information, refer to View data persistence.

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

C# プロパティ	USS セレクター	説明
ussClassName	.unity-list-view	Unity はこの USS クラスを ListView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
itemUssClassName	.unity-list-view__item	ListView 要素の item 要素の USS クラス名。 Unity はこの USS クラスを ListView が含む全ての item 要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての item 要素に影響します。
emptyLabelUssClassName	.unity-list-view__empty-label	ListView が空の時に表示されるラベルの USS クラス名。 Unity は、ListView が空の場合に表示されるラベルにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての空のラベルに影響します。
reorderableUssClassName	.unity-list-view__reorderable	並べ替え可能なアニメーション化された ListView 要素の USS クラス名。 Unity はこの USS クラスを ListView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
reorderableItemUssClassName	.unity-list-view__reorderable-item	並べ替え可能なアニメーション化された ListView の item 要素の USS クラス名。 reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のすべての要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
reorderableItemContainerUssClassName	.unity-list-view__reorderable-item__container	並べ替え可能なアニメーション化された ListView の iten コンテナの USS クラス名。 reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のすべての item コンテナに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての item コンテナに影響します。
reorderableItemHandleUssClassName	.unity-list-view__reorderable-handle	並べ替え可能なアニメーション化された ListView のドラッグハンドルの USS クラス名。 reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のドラッグハンドルに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
reorderableItemHandleBarUssClassName	.unity-list-view__reorderable-handle-bar	並べ替え可能なアニメーション化された ListView のドラッグハンドルバーの USS クラス名。 reorderMode が Animated に設定されている場合、Unity はこの USS クラスを ListView のドラッグハンドルバーに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての要素に影響します。
footerUssClassName	.unity-list-view__footer	ListView のフッターの USS クラス名。 Unity はこの USS クラスを footer 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての ListView に影響します。
foldoutHeaderUssClassName	.unity-list-view__foldout-header	ListView のヘッダーの USS クラス名。 Unity はこの USS クラスを ListVIew の foldout 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての foldout に影響します。
arraySizeFieldUssClassName	.unity-list-view__size-field	foldout ヘッダーが有効な場合、ListView の size field の USS クラス名。 showFoldoutHeader が true に設定されている場合、Unity はこの USS クラスを ListView の size field 要素に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての size field に影響します。
listViewWithHeaderUssClassName	.unity-list-view--with-header	foldout ヘッダーが有効な場合、ListView のUSS クラス名。 showFoldoutHeader が true に設定されている場合、Unity はこの USS クラスを ListView に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
listViewWithFooterUssClassName	.unity-list-view--with-footer	add/remove footer が有効な場合、ListView のUSS クラス名。 showAddRemoveFooter が true に設定されている場合、Unity はこの USS クラスを ListView に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
scrollViewWithFooterUssClassName	.unity-list-view__scroll-view--with-footer	add/remove footer が有効な場合、scroll view のUSS クラス名。 showAddRemoveFooter が true に設定されている場合、Unity はこの USS クラスを BaseListView の scroll view に加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての list に影響します。
ussClassName	.unity-collection-view	BaseVerticalCollectionView 要素の USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
borderUssClassName	.unity-collection-view--with-border	境界を持つ BaseVerticalCollectionView 要素の USS クラス名。 インスタンスの BaseVerticalCollectionView.showBorder プロパティが true に設定されている場合、Unity はこの USS クラスを BaseVerticalCollectionView 要素のインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリー内のスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
itemUssClassName	.unity-collection-view__item	BaseVerticalCollectionView 要素の item 要素の USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView が含む全ての item 要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての item 要素に影響します。
dragHoverBarUssClassName	.unity-collection-view__drag-hover-bar	ドラッグホバーバーの USS クラス名。 Unity は、ユーザーがリスト内のアイテムをドラッグするときに表示されるバーにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
dragHoverMarkerUssClassName	.unity-collection-view__drag-hover-marker	深度を示すために使用されるドラッグホバー円形マーカーの USS クラス名。 Unity は、ユーザーがリスト内のアイテムをドラッグするときに表示されるバーにこの USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリーのスタイルシートの横または下にあるすべての BaseVerticalCollectionView に影響します。
itemDragHoverUssClassName	.unity-collection-view__item--drag-hover	ドラッグホバー時に item 要素に適用される USS クラス名。 Unity は、item 要素がドラッグされると、この USS クラスを加えます。このクラスに適用されるスタイルは、ビジュアルツリー内のスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。
itemSelectedVariantUssClassName	.unity-collection-view__item--selected	BaseVerticalCollectionView で選択された item 要素の USS クラス名です。 Unity はこの USS クラスを BaseVerticalCollectionView の選択された要素に加えます。BaseVerticalCollectionView.selectionType プロパティは、0 個、1 個、またはそれ以上の要素を選択できるかを決定します。このクラスに適用されるスタイルは、ビジュアルツリーでスタイルシートの横または下に位置するすべての BaseVerticalCollectionView アイテムに影響します。
itemAlternativeBackgroundUssClassName	.unity-collection-view__item--alternative-background	BaseVerticalCollectionView の奇数行の USS クラス名。 BaseVerticalCollectionView.showAlternatingRowBackgrounds プロパティが ContentOnly または All に設定されている場合、Unity はこの USS クラスを BaseVerticalCollectionView 内のすべての奇数番号のアイテムに加えます。showAlternatingRowBackgrounds プロパティがこれらの値のいずれかに設定されている場合、奇数番号の項目は、偶数番号のアイテムとは異なる背景色で表示されます。この USS クラスは、奇数番号のアイテムと偶数番号のアイテムを区別するために使用されます。showAlternatingRowBackgrounds プロパティが None に設定されている場合、USS クラスは追加されず、USS クラスに依存するスタイルや動作は無効になります。
listScrollViewUssClassName	.unity-collection-view__scroll-view	BaseVerticalCollectionView のスクロールビューの USS クラス名。 Unity はこの USS クラスを BaseVerticalCollectionView のスクロールビューに加えます。このクラスに適用されたスタイルは、ビジュアルツリー内のスタイルシートの横または下にあるすべての BaseVerticalCollectionView スクロールビューに影響します。
disabledUssClassName	.unity-disabled	ローカルで無効にされた要素の USS クラス名。

また、Inspector や UI Toolkit Debugger の Matching Selectors セクション を使用して、どの USS セレクターが VisualElementのコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。

その他の参考資料

• MultiColumnListView
• MultiColumnTreeView
• ScrollView
• TreeView