Selectable Tile in EditorWindow

Hi!
I'm trying to achieve this kind of selection. I already have the scroll with my items but I cannot figure out how to make a selection area that affect the background and the labels like that.

 

Hi there!

You can use the GUIStyle "OL SelectedRow", it has both the blue background and the white text color in one package.

If you only have one GUI element on each row, you can just pass the GUIStyle directly to the method that draws the control.

Code (CSharp):

1. GUILayout.Label("Label Text", "OL SelectedRow");

If you have multiple GUI elements on each row, you can try passing the GUIStyle to BeginHorizontal or BeginArea to have the style be applied to all of them.

Code (CSharp):

1. GUILayout.BeginHorizontal("OL SelectedRow")
2. {
3.     GUILayout.Label("Label Text");
4.     toggle = GUILayout.Toggle(toggle, GUIContent.none);
5. }
6. GUILayout.EndHorizontal();

If the above doesn't work properly and you need more control, you may need to draw the blue background separately first using the OL SelectedRow style, then draw the other controls overlaid on top of it using GUIStyles with white labels. Here are a couple of GUIStyles with white text:

"WhiteLabel"
"WhiteLargeLabel"
"WhiteMiniLabel"​

You can also copy any existing GUIStyle and modify its text color to suit your needs.

Code (CSharp):

1. var toggleWithWhiteLabel = new GUIStyle(UnityEditor.EditorStyles.toggle);
2. toggleWithWhiteLabel.normal.textColor = Color.white;

 

Hey @SisusCo!
Thanks for your reply! It works, I guess I have to create a selectedState and change the GUIStyle. I'm trying to create a selectable area, do you know how can I do it?

 

I ended doing the following

Code (CSharp):

1. ...
2.  
3.            GUILayout.EndHorizontal();
4.  
5.             var rect = GUILayoutUtility.GetLastRect();
6.             if (HasClickedInRow(rect))
7.             {
8.                 onSelected(this);
9.             }
10.         }
11.  
12.         private bool HasClickedInRow(Rect rect)
13.         {
14.             var currentEvent = Event.current;
15.             if (currentEvent.type != EventType.MouseDown) return false;
16.  
17.             var currentEventMousePosition = currentEvent.mousePosition;
18.             return currentEventMousePosition.x > rect.x && currentEventMousePosition.x < rect.x + rect.width &&
19.                    currentEventMousePosition.y > rect.y && currentEventMousePosition.y < rect.y + rect.height;
20.         }

 

Glad to hear it worked!

By the way, you can simplify your HasClickedInRow method a little bit by using the ready-made Rect.Contains method.

 

Nice! Thanks!