Use TreeView to display hierarchical data in a tree-like structure. It’s a powerful and flexible control that’s commonly used to present data with parent-child relationships or nested structures.
You can create a TreeView with UI Builder, UXML, and C#.
To create a TreeView with C#, create a new instance of a TreeView object. For example:
TreeView myElement = new TreeView();
You can bind the TreeView to a data source. The data source can be a list of objects or a list of strings.
The following example binds a TreeView to a custom type.
treeView.makeItem = () => new VisualElement();
treeView.bindItem = (i) =>
{
var c = treeView.GetItemDataForIndex<MyCustomType>(i);
};
Note: In the above example, the TreeView.bindItem receives the Index. You must use the Index (not the ID) with GetItemDataForIndex<T>
.
The following UXML example creates a TreeView:
[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/TreeViewSnippet.uxml)]
The following C# example illustrates some of the customizable functionalities of the TreeView:
[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/TreeViewSnippet.cs#sample)]
To try this example live in Unity, go to Window > UI Toolkit > Samples. For more examples, refer to the following:
C#クラス: TreeView
名前空間: UnityEngine.UIElements
基本クラス: BaseTreeView
この要素は基本クラスから以下の属性を継承します。
名前 | 型 | 説明 |
---|---|---|
auto-expand |
boolean |
true の場合、アイテムが TreeView に加えられたとき、アイテムは自動的に展開されます。 |
binding-path |
string |
バインドされるべきターゲットプロパティのパス。 |
fixed-item-height |
int |
リスト内の 1 つのアイテムの高さをピクセル単位で指定します。 コレクションビューを機能させるためには、このプロパティは、 virtualizationMethod が FixedHeight に設定されている場合に設定する必要があります。virtualizationMethod が DynamicHeight の場合に設定すると、デフォルトの高さとして機能し、アイテムがレイアウトされる前に、必要なアイテムの数とスクロール可能な領域を計算するのに役立ちます。アイテムの予想される最小の高さに設定する必要があります。 |
focusable |
boolean |
要素がフォーカス可能である場合は true。 |
reorderable |
boolean |
ユーザーがリストアイテムをドラッグして順序を変更できるかどうかを示す値を取得または設定します。 デフォルト値は false で、canStartDrag 、setupDragAndDrop 、dragAndDropUpdate 、および handleDrop 実装している場合、他のビューへアイテムをドラッグ、または、他のビューからアイテムをドラッグすることが可能になります。この値を true 設定すると、ユーザーがリスト内のアイテムを並べ替えることができます。 |
selection-type |
UIElements.SelectionType |
選択タイプを制御します。 デフォルト値は SelectionType.Single です。コレクションビューで選択を無効に設定すると、現在の選択はすべて消去されます。 |
show-alternating-row-backgrounds |
UIElements.AlternatingRowBackground |
このプロパティは、コレクションビューの行の背景色を交互に表示するかどうかを制御します。AlternatingRowBackgroundenum から値を取ります。|
| show-border| boolean|このプロパティを有効にすると、コレクションビューの周囲に境界線が表示されます。<br /> <br /> true に設定すると、コレクションビューが内部に使用する ScrollView の周囲に境界線が表示されます。|
| tabindex| int|フォーカスリング内でフォーカス可能なものをソートするために使用される整数。0 以上であることが必要です。|
| virtualization-method|[ UIElements.CollectionVirtualizationMethod](../ScriptReference/UIElements.CollectionVirtualizationMethod.html)|スクロールバーが表示されているときにこのコレクションに使用する仮想化メソッド。 CollectionVirtualizationMethodenum から値を取ります。<br /><br />デフォルト値は FixedHeightです。固定の高さを使用する場合は、 fixedItemHeightプロパティを指定します。固定の高さの方がパフォーマンスは高くなりますが、コンテンツに対する柔軟性は低くなります。 DynamicHeight` を使用する場合、コレクションは実際の高さが計算されるまで待機します。動的な高さはより柔軟ですが、パフォーマンスは低くなります。 |
この要素は、VisualElement
から以下の属性も継承します。
名前 | 型 | 説明 |
---|---|---|
content-container |
string |
子要素はそれに追加されますが、通常は要素自体と同じです。 |
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 |
ビューデータの永続性 (ツリーの展開状態、スクロール位置、ズームレベルなど) に使用されます。 これは、ビューデータストアからビューデータを保存/ロードするために使用されるキーです。このキーを設定しないと、この VisualElement の永続性が無効になります。 |
以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。
C# プロパティ | USS セレクター | 説明 |
---|---|---|
ussClassName |
.unity-tree-view |
TreeView 要素の USS クラス名。 Unity はこの USS クラスを TreeView 要素のすべてのインスタンスに加えます。このクラスに適用されたスタイルは、ビジュアルツリー内のスタイルシートの横または下に位置するすべての TreeView に影響します。 |
itemUssClassName |
.unity-tree-view__item |
TreeView の item 要素の USS クラス名。 Unity は、この USS クラスを TreeView のすべての item 要素に加えます。このクラスに適用されるスタイルは、ビジュアルツリー内のスタイルシートの横または下に位置するすべての item に影響します。 |
itemToggleUssClassName |
.unity-tree-view__item-toggle |
TreeViewの項目トグル要素のUSSクラス名。 Unityは、このUSSクラスをTreeViewの全てのアイテムトグルエレメントに追加します。このクラスに適用されるスタイリングは、ビジュアルツリー内のスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentsContainerUssClassName |
.unity-tree-view__item-indents |
TreeViewのインデントコンテナ要素のUSSクラス名。 Unityは、このUSSクラスをTreeViewのすべてのインデントコンテナエレメントに追加します。このクラスに適用されるスタイリングは、ビジュアルツリー内のスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemIndentUssClassName |
.unity-tree-view__item-indent |
TreeViewのインデント要素のUSSクラス名。 Unityは、このUSSクラスをTreeViewのすべてのインデント要素に追加します。このクラスに適用されるスタイリングは、ビジュアルツリー内のスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
itemContentContainerUssClassName |
.unity-tree-view__item-content |
TreeViewのアイテムコンテナ要素のUSSクラス名。 Unityは、このUSSクラスをTreeViewのすべてのアイテムコンテナエレメントに追加します。このクラスに適用されるスタイリングは、ビジュアルツリー内のスタイルシートの横または下に位置するすべてのアイテムに影響します。 |
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
のコンポーネントに影響するかを、階層のすべてのレベルで確認することもできます。