UI Toolkit: How can I add clickable to non-clickable elements?

For example, I have a GroupBox with some text and other non-interactables in it. I want the whole groupbox to be clickable to popup some options. GroupBox doesn’t have a Clickable property, so I can’t bind to click events for it so… how can I do that? is there a way to attach a clickable to an arbitrary element? Do I need to make my own “ClickableGroupBox” subclass?

Did you find the solution? I have a similar problem where I want a Text and an Image to be clickable but didn’t find any info for it

Like this: element.RegisterCallback<ClickedEvent>(ev => Debug.Log("Clicked"));

2 Likes

I am doing it this way and works like a charm :). It also allows the visual element to have an active state and a focus state so you can apply custom styles for such cases.

myVisualElement.AddManipulator(new Clickable(evt => {
    // TODO : your onClick code here
}));
2 Likes

Isn’t that just the same as using a button, but with more steps?

Yesn’t, the goal is the same but the components are different, with buttons you do :

positiveButton.clicked += () => {
   // TODO : onClick code here
}

Sadly, the clicked api is not available in regular VisualElements, but the same can be achieved with the AddManipulator method I mentioned before.
BTW, AddManipulator can be used to handle other types of events, not just click events.
In this case, I am using it for the same use case as @Suduckgames in a VisualElement containing text and an image.

1 Like