TreeView Control

Community Showcases
1

I created a treeview control for Unity that works in the game view, scene view, custom panels and inspectors.

You can add items at design time. And you can animate the hover states. It’s completely skinable.

Feature Video 1:

Feature Video 2:

Asset Store Link: TreeView Control | GUI Tools | Unity Asset Store

2

Hi, great job on the TreeView control, it looks very impressive.

I just had a few questions…

  1. Using your control, can I procedurally create a dynamic treeview object? I know the various layout I want ahead of time, but may not know the exact number of nodes and how many children for each node, as well as which items should be checked and which unchecked for example. (I am feeding my client data via an authoritative server)

  2. Is there a way that when I go to display the treeview control, that I can know it’s mesh.bounds or size extents, so that I can accurately place a panel behind it, to contain it? I was thinking of making it’s game object a child of a panel and then allowing the user to move that panel around and have the treeview move with it, as if it were in a sub-window.

Thanks!

-Tim

3

I made a small enhancement in 1.8 so you can apply skin changes to the TreeView control.

4

You can programably fill the TreeView at runtime. It’s one of the examples. In the example scenes, you’ll see GameObject in the hierarchy. That gameobject has an example.cs script attached that fills the TreeView.

You can add items to the root. You can add items to children. You can mark items expanded. You can mark items as a checkbox with either checked or unchecked. Check out example.cs

That gets a little tricky. There is a width and height property of the TreeView control that will keep the treeview within an area.

If you want to put the treeview on top of another UI object, it would be nice to use something like the render queue.

In the case of GUI elements, IIRC whoever gets called last renders on top. So you’ll have to call the display treeview code after your other UI controls to get the treeview on top.

That would be controlled by the TreeViewControl.cs OnGUI event. I would disable the OnGUI event of the treeview control.

And then I’d make a master gameobject to display both your other control and the treeview control. And in that master gameobject, you would have an OnGUI event force the order.

Another alternative would be to change the buttons into planes and use an orthographic camera.

Also use the TreeView menu and open the panel. That’s an example of a treeview in a panel.

5

I bought your treeview control but when I import your control in an empty project and start your example scene, I get the following error:
“ArgumentException: GUILayout: Mismatched LayoutGroup.Repaint”.

Can you help me?

EDIT: It seems that the error only occurs, when I start the scene while I select a treeview object.

6

The Unity GUI has some quirks. The error should be harmless. Let me know if anything breaks the functionality of the tree view control.

7

Hi, the treeview has some missing features. Can you add event callbacks for when an item is selected/deselected.

8

Sure thing, in the next update expect to see an updated example:

Change Log (1.9):

  • Added Click, Checked, UnChecked, Selected, and Unselected events to TreeViewItem
  • Removed TreeViewItem skin instances to use ParentControl skins to save on memory
9

The update is now available.

10

Hi, I am trying to expand one tree view item when I click on it and unexpand the other tree view items. But I am getting the following error

http://forum.unity3d.com/threads/29058-error-with-no-side-effects

I have managed to reproduce it with your example scene. Can you fix this?

11

Which version of Unity are you using? I’m clicking like mad in Unity 3.3 without seeing the error.

I know Unity logs the error, but it’s really just an error message logged by Unity but it doesn’t break functionality.

12

Hi, I PM you the link to my modified example project. I meant that when I selected a tree item, I was programmatically expanding the selected tree item and unexpanding other tree items. I am using Unity3d 3.5.5f3.

13

Ah thanks. Okay something for users to avoid.

In the event callbacks, avoid changing the treeview state in the callback call. As you might cause the GUI to change on the last frame update.

Instead queue up the operation to edit the treeview state in the Update event.

In this case the Handler for Example.cs:

// Store the GUI state change in an action to be performed in an Update event.
Action m_lateAction = null;

    void Handler(object sender, System.EventArgs args)
    {
        Debug.Log(string.Format("{0} detected: {1}", args.GetType().Name, (sender as TreeViewItem).Header));

        TreeViewItem senderItem = (TreeViewItem) sender;

        m_lateAction = () =>
        {
            if (senderItem == item1)
            {
                item1.IsExpanded = true;
                games.IsExpanded = false;
            }
            else if (senderItem == games)
            {
                item1.IsExpanded = false;
                games.IsExpanded = true;
            }
        };
    }

In the Update event, perform the tree view state change.

    void Update()
    {
        if (null != m_lateAction)
        {
            m_lateAction.Invoke();
            m_lateAction = null;
        }
    }

This will avoid getting the bogus error by only making GUI state changes in the Update event.

14

Hi,

Would this work in tandem with NGUI.

Adam

15

I am an avid user and fan of NGUI. NGUI is likely rendered in world space, where the tree view is GUI elements. So I suspect whatever happens with GUI.Button and NGUI would be the same. I think Unity GUI shows on top of NGUI.

What I should do is create a tree view for NGUI and provide that as an option.

I’ll put this on the todo list.

16

hi there - i’m kind of interested in this for a browseable catalog of sorts. it seems it could work reasonably well as a menu or category organizer with options to back navigate (since the parents would be visible). however for that purpose, i have a couple of questions:

  1. is it possible to enable view of only the child elements of a tree node and not the entire tree in the Game View? so that if a user clicked on a menu item with children, only is its children would draw on the screen? i’d prefer the unenabled parts simply not draw as opposed to being invisible.

  2. is it possible to have any one node or all the children of a node display text at a slower rate (like a typewriter effect)? based on some earlier exchanges, it seems possible, since this is based directly on the GUI system, but i thought i’d check anyway.

let me know what’s possible.

best,
scott

17

Both are possible. The TreeView control is full source and based on the Unity GUI API. You should be able to tweak it into anything.

18

Hoping that this is still in the works!

19

You want an NGUI tree view. That could be useful still…

20

Your treeview control is very well done. It would be perfect if it could be as easily implemented in an NGUI panel (and use data binding with NDATA), and if we could drag and drop nodes within the control. Thanks again for your efforts on the control as it stands now.