New UI Widgets

Is there a simple way to detect a tab selection change, even when it's by selecting another components than the tabs?
In fact, each time a tab is displayed I'd like to do some things, and each time a tab is deselected (by selecting another tab, or another control than the tabs) I'd like to do some other things.
The obvious use is to open a pop-up prompting to save the modifications or not before exiting the game.

 

OnTabSelect event should help.

This is more difficult, maybe add EventTrigger component with Deselect event to both Default and Active buttons and check SelectedTab or check EventSystem.current.currentSelectedGameObject and compare with old in Update() call.

 

None of the 'Select' or 'Deselect' events are triggered on the default or active buttons.
I ended up by adding a 'Deselect()' method on all the other components I could click on, so that all the tabs are deselected whenever I click on anything except themselves.
That way I can do it.
It is not a good solution, but fortunately I do not have a lot of component and I prefer having something that work, even if it's ugly.
Maybe I'll try the EventSystem thing.

If you ever find another way, I'll be interested.

 

How do I create a TileView? I dont see it available in the UI > UI Widgets > Collections as I would expect. I tried watching the video in https://ilih.ru/unity-assets/UIWidgets/docs/Manual.Creating_own_TileView/ but, in the video start you already have a TileView ready..im confused. Is the idea to build each component from ground up?

 

I found error: default button disabled after click so it does not receive Deselect event and active button is enabled but not selected so it also does not receive Deselect event.
Add this line:

Code (CSharp):

1. UnityEngine.EventSystems.EventSystem.current.SetSelectedGameObject(activeButtons[index].gameObject);

in Tabs.cs and TabsCustom.cs at the end of SelectTab() method after "OnTabSelect.Invoke(index);"

It's same as ListView, only difference your class should inherited from TileView instead ListViewCustom.

 

I added another video about creating TileView.

 

I see. Is there a reason why TileView is not available in UI > UI Widgets > Collections? I find it a bit tedious that one must write that much code in order to create a tile view.

 

I do not know with what data TileView can be commonly used.
For ListView and TreeView this is icon and name for item, but I doubt it be same for TileView.

Not sure about "that much code", just classes and fields declarations with only one function.
I counted less 30 lines of code in sample (excluding whitespace and unused using).

I was thinking about other ways, but not found any good one:

• using object instead specific item class, but this require using type casting or reflection which has bad impact on performance
• component class - using reflection instead SetData() - like find gameobject with field name, it will be same bad for performance and it will work only as replacement for simple code like "ItemName.text = item.Name;", something just little difficult will require writing code.

 

OK I understand the reason behind not adding TileView to the collections.

A question about treeview: what is the correct way to bind data to a TreeView item? I want to reference some data objects to a TreeView item because I want to access that data whenever a node in the treeview is clicked. Right now the only way I could think of was use the TreeViewItem.Tag (because its type is object) to store the data object.

So when populating the treeview in code I do :

var myItem = new TreeViewItem("Foo");
myItem.Tag = MyImportantDataItem;

Surely there is a better way?

 

If you want to avoid type conversion will be better create custom TreeView with your own class like TreeViewCustom<MyImportantDataClass>.

Problem is is impossible in Unity to use generic class component, you cannot press "Add component" in Inspector window, just type TreeViewCustom<MyImportantDataClass> and use it.
First you need to create "public class TreeViewWithMyImportantDataClass : TreeViewCustom<MyImportantDataClass> { }" and only after it you can type TreeViewWithMyImportantDataClass and use it.

 

I came a cross another problem when trying to use the Treeview. For some reason the changes I make to the DefaultItem are not reflected in the items that are generated in code by generating
ObservableList<TreeNode<TreeViewItem>>:s setting that to myTreeView.Nodes. Isnt the DefaultItem's whole purpose to be the model for the treeviews nodes and therefore all the changes to it should be reflected in the generated treeview items?

 

You should set changed DefaultItem as new one:

Code (CSharp):

1. // made some changes with DefaultItem
2. myTreeView.DefaultItem.Name.fontSize = 20;
3. // set changed defaultitem as new one
4. myTreeView.DefaultItem = myTreeView.DefaultItem;

 

So are you saying that changes to the DefaultItem in the inspector are not supposed to be reflected to the generated treeview items? If not, why does the DefaultItem even exist?

I noticed that changing the font size of the Text child element of the DefaultItem is reflected in the generated treeview items, but for example changing the Color of the ImageAdvanced component is not. Also, changing the Y position of the Text child element is not reflected and after returning from play mode text position is reset to the original (unchanged) value! What is causing this behavior? Is the DefaultItem reading some default values from somewhere?

About the code you posted:

Code (CSharp):

1. // made some changes with DefaultItem
2. myTreeView.DefaultItem.Name.fontSize = 20; //there is no such property as myTreeView.DefaultItem.Name.
3. // set changed defaultitem as new one
4. myTreeView.DefaultItem = myTreeView.DefaultItem; //isnt his same as doing foo = foo ? :)

 

This is items coloring depend of item state.
TreeView (and ListView, TileView) have properties DefaultColor, DefaultBackgroundColor, HighlightedColor, HighlightedBackgroundColor, SelectedColor, SelectedBackgroundColor.
TreeView.DefaultItem component have GraphicsForeground and GraphicsBackground properties.
And depend of item state (if it selected, highlighted or in default state) colors will applied to corresponding Graphics objects.
If you do not want apply colors to ImageAdvanced component (this is background by default) you should override GraphicsBackground in TreeView.DefaultItem component class:

Code (CSharp):

1.         public override Graphic[] GraphicsBackground {
2.             get {
3.                 return new Graphic[] { };//return empty array
4.             }
5.         }

It's default Unity behavior: "When in playmode, Unity doesn't save changes to instances of game objects in your scene."
And it have tutorials about this:
https://unity3d.com/learn/tutorials/topics/tips/play-mode-editor-tint
https://unity3d.com/learn/tutorials/topics/tips/how-copy-and-restore-changes-made-play-mode

Not same, since it's property, not field.
And usually it should be

Code (csharp):

1. myTreeView.DefaultItem = otherDefaultItem;

It's impossible to get notification in code if any fields of any component was changed, so you need to set DefaultItem if some field was changed.

 

I am aware of this. But what I meant was the change I made to the value before going to play mode is reset. Heres what I do:

1. While not in play mode, I change the Pos Y value of Text (child of DefaultItem) from -17.5 to 0 (change is visible in the Game view, the text is now moved up)
   
2. I press play. The change is not visible - the text is still in its original position.
3. I press stop. The value of the Pos Y is now -17.5 again

I do not understand what causes this value to reset..

What I am expecting from the DefaultItem is that it would be a template for all the items I add to the TreeView from code. You still have not answered is this the case or not?

 

Because Text is under layout control.
For now Pos X and Pox Y not blocked from editing, it is bug, I'll fix it.

It is template for all items, but all changes you made may not be applied unless you set DefaultItem again.
TreeView use DefaultItem clones to display items, but Instantiate and Destroy are heavy operations so it's performed only once per visible items, not every frame. So when you made some changes in DefaultItem they will not be apply to existing clones, but will apply to newly created clones. To apply changes for all visible items you should set DefaultItem again, this will destroy existing clones and create new ones.

 

Thanks for the answer. But I am not editing the DefaultItem at runtime (in play mode), I am editing it in the editor before going to play mode. Anyway it seems that some of my changes to the DefaultItem are reflected then to the items that I create during runtime.

Another question: When I set TreeViewItem.Icon to some Sprite, the icon will have the original size of the source icon, which is too big (88x88 pixels). I would need it to be 22x22 pixels. But I am unable to find where to set the icon size. How do I do this? For now I just created new 22x22 pixel versions of the sprites, but surely there is a better way?

Ultimately what I am trying to build is a treeview that looks like this:



Im almost there, but I have two unsolved problems:

1. How do I align the toggle to the right edge? I was able to move it to the right by rearraning the children of the DefaultItem, but I also need to align it to the right.
2. How do I create that indentation in the left edge for the child (and grandchild) nodes?

​

 

• Changes to graphics colors not applied for GraphicsBackground (DefaultItem.Image) and GraphicsForeground objects (DefaultItem.Text) - they will use colors specified in TreeView settings.
• Also color for Icon.Image - it's white if icon specified otherwise transparent, you can override TreeViewComponent.UpdateView() to change it.
• Gameobjects positions and sizes can be under layout control.

Disable DefaultItem.SetNativeSize, set TreeViewItem.Icon height = 22 and add Layout Element component with Preferred Width = 22 to Icon.

Create Content Block - gameobject with Image component and white background sprite and move Icon, Text and Toggle inside it. Toggle should be last.

Add Layout Element component to Text with Flexible Width = 1
Add Layout Element component to Content Block with Flexible Width = 1
Add EasyLayout component to Content Block and set Layout Type = Grid, Grid Constraint = Fixed Row Count, Grid Constraint = 1, Children Width = Fit Container.
Change DefaultItem.EasyLayout.Children Width to Fit Container.

Also you probably want to change DefaultBackgroundColor, HighlightedBackgroundColor, SelectedBackgroundColor to transparent or create custom TreeViewComponent to control ContentBlock Image color:

Code (CSharp):

1.     public class MyTreeViewComponent : TreeViewComponent
2.     {
3.         [SerializeField]
4.         public UnityEngine.UI.Image ContentBackground;
5.  
6.         public override UnityEngine.UI.Graphic[] GraphicsBackground {
7.             get {
8.                 return new UnityEngine.UI.Graphic[] {ContentBackground, };
9.             }
10.         }
11.     }

 

Thank you for the answer. I got the desired result (I actually removed the image component from the ContentBlock, I dont see why it was even needed..)

Now only thing missing in my treeview layout is this indentation. Is that something that is possible with TreeView?

 

Indentation done with Filler gameobject and DefaultItem.TreeViewComponent.PaddingPerLevel (Filler.LayoutElement.PreferredWidth = DefaultItem.TreeViewComponent.PaddingPerLevel * node level).
If intendation does not works check if DefaultItem.Filler specified and Tree.Nodes is really tree not just list.

Code (CSharp):

1. // this
2. Tree.SelectedNodes = new List<TreeNode<TreeViewItem>>();
3. // or this
4. Tree.SelectedIndices = new List<int>();

SelectedNodes and SelectedIndices returns copied list, so Tree.SelectedNodes.Clear() will clear only copied list, not original list.

 

I just tried the tooltips, and they mostly work fine.
I still have 2 questions and one problem with them:
- how are they positioned relative to their parent?
- is it possible to trigger an event when they are displayed (the idea is to update their text only if needed)

And the problem is that they can be out of the screen (note that it may be linked to my failure to understand how they are positioned...).
In order to reproduce it, just place a UI component very close to the top of the screen, add a tooltip to it, and change the tooltip text to a 5 lines text (or more if necessary).

 

Tooltip object should be displayed in same position as setted in editor mode. There was bug when position reseted to 0,0 relative to parent if UI component enabled and pointer already over it. I fixed in 1.9.2b20

There is one exception - tooltip will not follow UI component if it is moving.

I added OnShow and OnHide events in 1.9.2b20

You should place tooltip object lower than UI component and change pivot to stretch down, not up.
It will be anchor = bottom right and Pivot X = 1 and Pivot Y = 1

 

OK, as all the tooltips on the elements of a ListView weren't at the same position I thought there was some automatic positionning.
Now that I know it was because of a bug, which is already fixed, I understand better.

I saw that the tooltip is under the UI element in the editor, but when running, it's at the end of the canvas.
I suppose it's because you want to ensure that it's always over all other UI elements.
And I suppose it's that which prevents to easily follow the UI component; it would be needed to update the tooltip coordinates in its 'Update()' method.

Thanks, that's great news!

 

Small clarification: Tooltip does not follow UI component only when tooltip displayed, but when tooltip hidden it returns to initial position in hierarchy and follow UI component.

Also added BringToFront option to Tooltip in 1.9.2b21, if you disabled it tooltip will follow UI component, but not always will be displayed over all other UI elements.

 

Good to know.
I will have to install the new version as it seems to have so many new features.

Thanks for the fast and precise answers, as usual.

 

Hi,

How do you use dynamically populated combos ? And especially ones inside dialog ?
Built a dialog with a combo from template, disabled it in editor, set script on some object with the dialog as the param,
calling this function when a button clicked:

public void showAddMolDialog() {
var dialog = addMolDialog.Template();
dialog.Show(
title: "Add Molecule",
buttons: new DialogActions(){
// on click close dialog
{"Close1", Dialog.Close},
},
focusButton: "Close1",
modal: true,
modalColor: new Color(0, 0, 0, 0.8f)
);

GameObject go = addMolDialog.transform.Find("dLevelA/dLevelCombo/Combobox").gameObject;
Combobox moleculeDCombo = go.GetComponent<Combobox>();
go.name = "kuku"; // works fine, I can see the change
// moleculeDCombo.Clear(); // Exception if the dialog is not activated at the start of the scene,
// When debugged I saw InputProxy is null and tried to reached in Combobox.cs::215
moleculeDCombo.ListView.DataSource.Add("10"); // new value not shown
}

Nothing shows.
Tried to look on the TestCombobox - no references in the demo scene.
Any ideas / tutorial how to use dynamic lists/combos ?

Thanks, Best
Danny

 

You do it almost right, just use created dialog, not original:

Code (CSharp):

1. GameObject go = dialog.transform.Find("dLevelA/dLevelCombo/Combobox").gameObject;

Call moleculeDCombo.Start() (or moleculeDCombo.Init() if you use latest beta) before using Clear() or other comobox functions.

 

@ilih,
Whats the difference betweeen Popup and Dialog, as they both seem to do same thing. Where should i use Popup and where Dialog? Thanks

 

Popup should be used to display simple message with only one button to close it.
Dialog can be used to create windows (like login window) or display message with more than one button with different actions like Yes/No/Cancel.

 

@ilih,
TMPro based Popup is throwing error on close button. Please advise

 

Is it this error?
"ArgumentNullException: Argument cannot be null.
Parameter name: key"

You should call Template() to create copy and then Show()

Code (CSharp):

1. // wrong, throwing error
2. popup.Show("test", "test message");
3. // correct
4. popup.Template().Show("test", "test message");

 

Hi!

How to scroll to a specific index.
list.ScrollTo(index) is custom working perfectly on custom list.
list is custom horizontal and virtual.

 

Not really understand, problem is ScrollTo() does not work properly with horizontal list?
Fix: ListViewCustom.cs, replace line in SetScrollValue() function:
old line:

Code (CSharp):

1.             var new_position = IsHorizontal()
2.                 ? new Vector2(value, current_position.y)
3.                 : new Vector2(current_position.x, value);

new line:

Code (CSharp):

1.             var new_position = IsHorizontal()
2.                 ? new Vector2(-value, current_position.y)
3.                 : new Vector2(current_position.x, value);

 

I found an exception in the ListView.
To reproduce it:
- place a ListView
- set it to a list of 20 elements (numbered from 1 to 20)
- untick 'Multiple'
- start the project
- select any element in the ListView
- scroll the ListView enough so that the selected element isn't visible anymore
- select another element
--> Exception:

Code (CSharp):

1. NullReferenceException: Object reference not set to an instance of an object
2. UIWidgets.ListView.DefaultColoring (UIWidgets.ListViewStringComponent component) (at Assets/UIWidgets/Standart Assets/ListView/ListView.cs:1682)
3. UIWidgets.ListView.DeselectItem (Int32 index) (at Assets/UIWidgets/Standart Assets/ListView/ListView.cs:1614)
4. UIWidgets.ListViewBase.Deselect (Int32 index) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:740)
5. UIWidgets.ListViewBase.Select (Int32 index, Boolean raiseEvents) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:646)
6. UIWidgets.ListViewBase.Select (Int32 index) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:616)
7. UIWidgets.ListViewBase.Toggle (Int32 index) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:768)
8. UIWidgets.ListViewBase.Toggle (UIWidgets.ListViewItem item) (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:794)
9. UIWidgets.ListViewBase+<AddCallback>c__AnonStorey0.<>m__0 () (at Assets/UIWidgets/Standart Assets/ListView/ListViewBase.cs:399)
10. UnityEngine.Events.InvokableCall.Invoke (System.Object[] args) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:154)
11. UnityEngine.Events.InvokableCallList.Invoke (System.Object[] parameters) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:637)
12. UnityEngine.Events.UnityEventBase.Invoke (System.Object[] parameters) (at C:/buildslave/unity/build/Runtime/Export/UnityEvent.cs:773)
13. UnityEngine.Events.UnityEvent.Invoke () (at C:/buildslave/unity/build/Runtime/Export/UnityEvent_0.cs:52)
14. UIWidgets.ListViewItem.OnPointerClick (UnityEngine.EventSystems.PointerEventData eventData) (at Assets/UIWidgets/Standart Assets/ListView/ListViewItem.cs:329)
15. UnityEngine.EventSystems.ExecuteEvents.Execute (IPointerClickHandler handler, UnityEngine.EventSystems.BaseEventData eventData) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/EventSystem/ExecuteEvents.cs:50)
16. UnityEngine.EventSystems.ExecuteEvents.Execute[IPointerClickHandler] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.EventFunction`1 functor) (at C:/buildslave/unity/build/Extensions/guisystem/UnityEngine.UI/EventSystem/ExecuteEvents.cs:261)
17. UnityEngine.EventSystems.EventSystem:Update()

I think it comes from the fact that the code is trying to change the color of the element to unselect, but it isn't visible anymore so there's a 'null' reference.

 

Thanks, it was already fixed in 1.9.2beta.
You can update to beta or add following code to the beginning of the functions in ListView.cs: HighlightColoring(), SelectColoring(), DefaultColoring()

Code (CSharp):

1.             if (component==null)
2.             {
3.                 return ;
4.             }

 

@ilih,
Any plans for 2.0

 

After 1.9 will be 1.10, probably it will be update with tool for changing widgets style and improved connectors and TreeGraph.
2.0 will be only if I decide to break compatibility with previous versions.

 

Any new components planned in foreseeable future?

 

Not planned, I want to finish first the components that I started.

 

Thanks, it works fine now.

 

I noticed that with the TreeView, the first click on an item changes the background color of the item to "Selected Background Color", but all the subsequent clicks on the item does not (still, the item gets selected). With a double click the background is always set to the "Selected Background Color". Is this a bug or am I missing something?

 

What UI Widgets version you use? Is it TreeView in sample scene or created from menu UI / UI Widgets / etc?

 

I use version 1.9.1 and my TreeView was created from the UI/UI Widgets menu.

 

How TreeView (and ListView) process subsequent clicks depends on Multiple option:
Multiple disabled (only one item can be selected)
- first click select item and set background color to "Selected Background Color" (and desect other selected item and set background color to "Default Background Color" if it selected)
- subsequent clicks on selected item does not deselect item and background color still "Selected Background Color"

Multiple enabled (multiple items can be selected):
- first click select item and set background color to "Selected Background Color" (other selected items not deselected)
- subsequent clicks on selected item deselect item and background color changed to "Default Background Color"

Click on Toggle arrow or any button (or other objects who can process clicks events) does not select or desect item.

What can goes wrong: adding Selectable component (or inherited from it like Button) to DefaultItem will cause coloring conflict if you use Transition = Color Tint.

I hope it will help, if not please try to make video with this problem, I'll try to reproduce it and check why it happens.

 

Turns out it was actually my own code that did the deselection on subsequent clicks on another item (I had
MyTreeView.Deselect(MyTreeView.SelectedIndex); left in a function by accident).

Another question: How do I disable the keyboard navigation on the treeview? I have WASD and arrow keys reserved for another use in my app, but when focus is on the treeview, pressing up/down navigates the treeview, which I do not want.

 

You can update to 1.9.2b26 and disable Navigation option for TreeView or you can add it manually in code:
UIWidgets/ListView/ListViewBase.cs:

1. Add field
   
   Code (CSharp):

   1.         public bool Navigation = true;
2. Add the following code to the beginning of the function OnItemMove
   
   Code (CSharp):

   1.             if (!Navigation)
   2.             {
   3.                 return ;
   4.             }
3. Disable Navigation option in Inspector window

 

New UI Widgets v1.9.2 released.

Changelog:

• Added TreeViewCustomNodeDragSupport
• Added ScrollButtons
• Autocomplete: fixed problem with resizing
• Autocomplete: added SearchDelay and MinLength options
• ColorPicker: fixed incorrect display in linear colorspace
• ColorPicker: now click on palette or image will change color
• Draggable: added Horizontal and Vertical options
• Draggable: added Restriction option
• ListViewCustomDragSupport: added DeleteAfterDrop parameter
• ListView's, TileView's, TreeView's: added SetContentSizeFitter parameter
• ListView's, TileView's, TreeView's: added Navigation parameter
• ListView's, TileView's, TreeView's: added IsVisible() function to check if item is visible
• ListView's, TileView's, TreeView's: added animated scrolling to items - ScrollToTime() and ScrollToSpeed()
• ListView's, TileView's, TreeView's: Multiple renamed to MultipleSelect
• RangeSlider: added RangeSliderType; it's allow or disable handles overlay
• Resizable: fixed error with allowed directions
• Sidebar: added new animation type ScaleDownAndPush
• Spinner: fixed input parsing problem
• Splitter: added Mode option, so you specify left and right targers, instead using previous and next siblings in hierarchy
• TreeView: added serialization support with TreeNode<T>.Serialize() and TreeNode<T>.Deserialize()
• TreeView: fixed error when deleting selected node with disabled DeselectCollapsedNodes
• TreeView: added ExpandParentNodes() and CollapseParentNodes() functions
• TreeView's DefaultItem: Filler renamed to Indentation
• Dialog, Notify, Picker, Popup: Template() renamed to Clone()

 

HI!

How could selected List Item be in middle ?
when ever item is selected, it scroll in to middle of listview view port.

I m using horizontal Listview please help!

 

You can use ScrollTo(index) or ScrollToAnimated(index), but those functions will scroll to item so it became visible, not to exact middle.
It can be done this way:

Code (CSharp):

1.         public void Start()
2.         {
3.             ListView.OnSelectObject.AddListener(ScrollToSelected);
4.         }
5.  
6.         public void ScrollToSelected(int index)
7.         {
8.             // scroll immediately
9.             ListView.ScrollTo(index);
10.             // or scroll with animation
11.             ListView.ScrollToAnimated(index);
12.  
13.             // or scroll immediately to exact middle
14.             var middle = ListView.GetItemPositionMiddle(index);
15.             var current_position = ListView.ScrollRect.content.anchoredPosition;
16.             var new_position = ListView.IsHorizontal()
17.                 ? new Vector2(-middle, current_position.y)
18.                 : new Vector2(current_position.x, middle);
19.          
20.             ListView.ScrollRect.content.anchoredPosition = new_position;
21.         }

If you need exact middle you should also add following function to UIWidgets/Standart Assets/ListView/ListViewCustom.cs

Code (CSharp):

1.         public virtual float GetItemPositionMiddle(int index)
2.         {
3.             return GetItemPosition(index) - (GetScrollSize() / 2) + (GetItemSize() / 2);
4.         }

 

Thanx for quick response.

I have used this code

Code (CSharp):

1.  
2. var middle = GetItemPositionMiddle(index);
3.             var current_position = ScrollRect.content.anchoredPosition;
4.             var new_position = IsHorizontal()
5.                 ? new Vector2(-middle, current_position.y)
6.                 : new Vector2(current_position.x, middle);
7.  
8.             ScrollRect.content.anchoredPosition = new_position;
9.  

but problem is it jerks on Last two items either sides.