I want to add a background behind a child widget that inherits from a button, so how to do that?
Specifically, I want to set a semi-transparent mouseover visual for a button and then draw a background and text underneath it, but when I inherit the class, everything is forced to be placed on top of the button.
I don’t want to use user widgets because it negates the advantages of Common UI Button. I don’t actually need to change the hierarchy; it’s fine as long as the button appears at the top visually. Is there any way to do this?
Hey there!
I believe I understand what you are asking based on the Common UI Button styling. As CommonButtonBase derives straight from UMG’s Button any child widgets added to its hierarchy will be rendered on top of the base layer by default.
if you desire to retain all the benefits of CommonUIBaseButton (such as action binding, hover effects, and focus handling) without nesting it inside of a custom User Widget I can think of two common approaches that I would personally consider:
Leverage the Common UI Button Style Asset
Rather than attempting to layer separate background elements behind the contents of the widget tree I typically do something like the following inside the Common Button Style asset:
-
You can define your background textures/colors directly in the Normal, Hovered, and Pressed brush states in the Button Style
-
As for the semi-transparent mouseover visual you mentioned you could apply a custom tint/alpha to the Hovered Brush while leaving the background or base layer drawn under the button’s content
Using Z-Order inside an Overlay (if wrapping in a User Widget)
If you ever need more dynamic layers (like custom backdrops, etc) then consider wrapping the CommonButtonBase inside a light User Widget with an Overlay container
-
Inside an Overlay the elements at the top of the hierarchy list will be drawn behind elements that are lower in the hierarchy
-
You can assign the Z-Order parameter of the slot elements to specify draw depth.
Epic Documentation: Common UI Quickstart Guide
Let me know if this helps or if you’re trying to achieve a specific custom layout effect inside the button