How to have an Image fill Height while growing in Width in a UMG Panel?

Development Programming & Scripting UI
,
1

In a UMG Widget I have a HorizontalBox containing an Image to the left and another Panel with a buch of Widgets in it to the right. I want that image to fill the full height of its parent while scaling the width so it keeps the same aspect ratio. The remaining with of the HorizontalBox should then be given to the panel on the right side.

However I can’t get that to work. Either it streches the image to fill the height, or it shrinks to it’s hardcoded base size to maintain the aspect ratio. Reading through the Slate Code of HorizontalBox seems to indicate that it is not capable of calculating child widths based on the available height. It just does a call to GetDesiredSize() and takes the appropriate component of that (in this case x).

So how can I achieve my desired Layout without doing some hacky calculations in Tick or OnPaint? (Preferably without creating my own Slate Panel)

I have also posted this question on StackOverflow, where there is an HTML sample to show what I’m trying to do: unreal engine5 - How to have an Image fill Height while growing in Width in a UMG Panel? - Stack Overflow

2

To achieve the desired layout in a UMG Widget with a HorizontalBox containing an Image and a Panel with other widgets, you can use a combination of Size Box, Aspect Ratio, and Vertical Box. Here’s a step-by-step guide:

  1. Vertical Box:
  • Use a Vertical Box as the main container for your layout.
  1. Image with Size Box:
  • Place your Image inside a Size Box.
  • Set the Size Box’s Size to Fill (both width and height).
  • Enable the Aspect Ratio option in the Size Box.
  • Set the Aspect Ratio of the Size Box to match the aspect ratio of your image.
  1. Panel with Widgets:
  • Add another Vertical Box to the main Vertical Box.
  • Place all the widgets you want in the right panel inside this Vertical Box.
  • The Vertical Box will automatically take the remaining width available.

Here’s an example representation in UMG Blueprint:

- Vertical Box (Main Container)
  - Size Box (Image Container)
    - Image (Your Image)
  - Vertical Box (Panel with Widgets)
    - Widget 1
    - Widget 2
    - ... (other widgets)

This way, the Size Box containing the image will fill the full height of its parent while maintaining the aspect ratio, and the remaining width will be automatically taken by the Vertical Box containing the panel with other widgets.

Ensure that you set the appropriate settings in the Size Box and Aspect Ratio to match your image’s aspect ratio. This should provide the desired layout without the need for hacky calculations in Tick or OnPaint.

3

I’m assuming you meant HorizontalBox, as a Vertical Box lays out all its children along the Y-Axis and distributes the height among them.
As for your suggestion using Size Box, I already tried that. I don’t think any wrapper like Size Box or Scale Box could even solve that problem. All it can do is give some static desired size, and when the parent then assigns the full height and width according to its desired size, it can ensure the aspect ratio remains the same by shrinking or clipping the image. But at that point I don’t think it can tell the parent to GROW its width to keep the aspect ratio. But that is exactly what I need.

4

Quick update: I gave up and just copy pasted SBoxPanel & SHorizontalBox along with their Slots and UMG counterparts and adjusted them to accomodate for a “MaintainAspectRatio” option. Also copy pasted the Layout Calculations and added handling for that flag that would “grow” the desired size to maintain the aspect ratio returned by the original desired size. Won’t work with nested panels and has other flaws, but I can’t be bothered anymore. Feel free to share if you got any better Ideas though, cause that was quite some effort and duplicating code should never be the correct solution.