TreeView Control

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: http://u3d.as/1Uw

 

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

 

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

 

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.

 

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.

 

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

 

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

 

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

 

The update is now available.

 

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?

 

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.

 

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.

 

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:

Code (csharp):

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

Code (csharp):

1.     void Handler(object sender, System.EventArgs args)
2.     {
3.         Debug.Log(string.Format("{0} detected: {1}", args.GetType().Name, (sender as TreeViewItem).Header));
4.  
5.         TreeViewItem senderItem = (TreeViewItem) sender;
6.  
7.         m_lateAction = () =>
8.         {
9.             if (senderItem == item1)
10.             {
11.                 item1.IsExpanded = true;
12.                 games.IsExpanded = false;
13.             }
14.             else if (senderItem == games)
15.             {
16.                 item1.IsExpanded = false;
17.                 games.IsExpanded = true;
18.             }
19.         };
20.     }

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

Code (csharp):

1.     void Update()
2.     {
3.         if (null != m_lateAction)
4.         {
5.             m_lateAction.Invoke();
6.             m_lateAction = null;
7.         }
8.     }

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

 

Hi,

Would this work in tandem with NGUI.

Adam

 

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.

 

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

 

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.

 

Hoping that this is still in the works!

 

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

 

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.

 

Ah thanks. I should really check with the NGUI developer to see if we could just throw in the control into NGUI. It's not all that difficult to create a treeview in NGUI.

 

I used the TreeView on another project and easily added a search feature for the TreeView. I'll include it in the next update.

 

How to draw it above on a GUI Window in the Game view？

 

The treeview gameobject has flags that show in the inspector. Check the flag that says show in game view.

 

Hello,

TreeView looks interesting. I'd like to ask if it can be used in an EditorWindow. I see that it's only used in the Inspector. Is it modular enough to be used in an EditorWindow?

 

Yes the examples work in the editor window, scene, or in game.

 

Hi!

I am having problem selecting the treeViewItem programmatically. Setting IsSelected does not seem to apply the selected skin to the treeViewItem. Any hints?

Thanks
Andy

 

The Example.cs script includes scripting API examples.

public static void PopulateExampleData(TreeViewControl item)
{
item.Width = 600;
item.Height = 500;
item.Header = "Example.cs populated this treeview control";
AddEvents(item.RootItem);
TreeViewItem item1 = item.RootItem.AddItem("You can also add a tree view control");
AddEvents(item1);
AddEvents(item1.AddItem("to any existing game object by"));
AddEvents(item1.AddItem("selecting the game object and"));
AddEvents(item1.AddItem("using the menu item"));
TreeViewItem games = item1.AddItem("TreeView->Add Tree View to selected.", false);
AddEvents(games);
AddEvents(games.AddItem("You can also drag and drop the"));
AddEvents(games.AddItem("TreeViewControl script onto a"));
AddEvents(games.AddItem("game object."));
AddEvents(games.AddItem("New checked and", false, true));
AddEvents(games.AddItem("unchecked checkboxes", false, false));
}

Just setting the Selected state won't trigger the event. You likely need to manually trigger the event to get the skin to update.

That would be a good automatic feature to add because that's how Silverlight would work.

Thanks for pointing that out.

~Tim Graupmann


PS: An alternative would be remove the item and readd it as Selected.

 

Expect for NGUI support

 

I used pure Unity GUI. I'm not using NGUI so there are no dependencies.

 

Hi! Any chance of ngui treeview? Or at least point me in the direction what is the easiest way to do it and how...what data structure to use etc... I would highly appreciated it

 

I'll rewrite for the new Unity GUI when 4.6 launches. It's a pain to mark NGUI as a dependency.

 

Can you still help me do it? I would buy your current version

 

Hello,

I have payed for you asset in asset store but it does not work properly. I see tons of exception in console like
ArgumentException: Getting control 35's position in a group with only 35 controls when doing Repaint

In this case it is not possible your asset.

My current version of unity is 4.5.2f1

 

The OnGUI event expects the same number of elements to be drawn in both update frames. I'll take a look.

 

I've met the same problem as JoyrRocks, do you have any idea to fix it?

 

Hi - just wondering about support for the new UI now that 4.6 has been released? I would dearly love to use this asset as it fits very well with a use case I have at the moment but I am using the new UI system and do not want to mix this with the old OnGUI way of doing things.

 

I'll experiment more with the Unity 4.6 GUI before taking a stab at this.

I did manage to start using the new 4.6 GUI.
https://github.com/tgraupmann/TAGEN...ails.md#accessing-leaderboard-data-from-unity

 

This looks like a great resources. I'm curious, is this still actively supported?

I would like to implement a similar tree structure within a game so the player can browse their items in an organized fashion. Is this functionality supported in Unity 5? I will happily purchase the content from the store and, if need be, pay for support.

Best regards

 

I always provide support. This uses the old OnGUI to create treeviews. At some point I'll upgrade to Unity 5.

If you have any issues with Unity 5, just let me know.

Thanks.

 

Hello! I got your asset.. and quickly created a dynamic tree! big time saver!
So.. I have a few needs i either cannot find or are not yet supported.
1. Can I hide the root element (or allow multiple)?
2. Where do you change font-size/style/color? I would also want to be able to resize the + and - icons to match the font size.
3. is the spacing between tree items something i can control?
4. It seems the 'last sibling collapsed' is not working.. it appears as if it thinks another node exists.. and so.. i see a line going down.. attaching to nothing.. this even happens on the root element..
5. The animation feature breaks the lines on the left of the tree.
6. Do you have an idea on when this may be available using the Unity 5 UI system?
I appreciate your tool and continued support!
thanks, Q

 

1. The TreeViewItem, you could add a hidden property. And then the TreeView OnGUI event would skip hidden elements.
2. The GUISkin controls the font style.
3. The spacing is hardcoded in the TreeView OnGUI event, but you could make it into a public field that is configurable.
4. Root
|
|
|
Like this? I just replicated the Windows style of a tree view.
5. The animation "feature" is just changing the font size. Likely if the width is too small an image is being truncated.
6. I have to refactor for Unity 5.X.

 

I appreciate your speedy reply!
Using your provided example.. here is a screenshot displaying my issues 4 and 5.
it seems the 'lines' should not come down when there is no next sibling.. and it seems these 'lines' should stretch vertically (instead of breaking up) when the item is animated to a larger fontsize.
thanks for your assistance, Q

 

Ah yes. It doesn't have the checking for the next sibling feature. Nice subtle catch.

When I upgrade to Unity 5.X I won't have these stretching issues.

This is in Unity OnGUI events and there's not a lot of useful information like checking the size of the text. In the new Unity GUI I'll be able to set anchors and it will stretch automatically.

 

Awesome!.. i look forward to it.. i am working with the Unity 5 UI..

 

Hey, this is very great asset. I use it with a simulator. I have a very long list so I need use scroll bar, how can I do that?

Edit: Ok, It automaticly done My Bad

 

Glad it worked out for you. Yes still need to redo the whole thing in the new Unity GUI. I'd like it to support 10k tree view items with good performance.

 

Hello again, How can I simulate that one of brucnh is clicked?
There is a model in scene. When I click one of boddy part, I needn to show which one is chosen.
I tried to change isSelected true, but it did not work.
when I change isHover or isExpanded , they work. But i need to show that one is selected

 

That was close. You also need to set TreeView.SelectedItem = theSelectedItem;

 

Hi guyz. I'm stuck at somewhere on this beautiful asset and yet its so simple as it be. Just how i can use this items on tree view as a "BUTTON" like "on click" actions.