@AndreasStiller - I can try give you some idea of how to achieve this, I’m doing this from memory so your milage may vary.
Step 1: Canvas
Firstly, create a Canvas in World Space and set its max width to 300 and max height to 250.
Step 2: Background Image
Create an image gameobject as a child to the canvas. Set it to scale with its content. This will act as your background.
Step 3: VerticalLayoutGroup
To your canvas, add a VerticalLayoutGroup. This will allow your header, content, and button to be placed vertically in order.
Step 4: Header
Create a Header object with a TextMeshProUGUI child. Set the header’s max height to 25 and allow it to have a flexible width.
Step 5: Content
Create a Content object. It should resize depending on its child content. For your fixed size elements, consider using another VerticalLayoutGroup for better organization. Make sure the width of the header adjusts depending on this object.
Step 6: Button
Finally, add a Button object to the canvas. Set its size to 50x15 and put your desired text inside.
Remember, in Unity, the child elements will automatically adjust to the constraints set by the parent when using a layout group. Also, you might need to play around with the layout group’s Child Force Expand and Child Control Size options to get the exact behavior you want.
Here is some pseudo code, to give you an idea of how to work with it:
// Create Canvas
Canvas canvas = new GameObject("Canvas").AddComponent<Canvas>();
canvas.renderMode = RenderMode.WorldSpace;
RectTransform canvasRectTransform = canvas.GetComponent<RectTransform>();
canvasRectTransform.sizeDelta = new Vector2(300, 250);
// Create Background Image
Image backgroundImage = new GameObject("Background").AddComponent<Image>();
backgroundImage.transform.SetParent(canvas.transform);
// Set Background to scale with its content
// Use a script to scale backgroundImage based on its child content.
// Create Vertical Layout Group
VerticalLayoutGroup verticalLayoutGroup = canvas.gameObject.AddComponent<VerticalLayoutGroup>();
// Create Header with TextMeshPro Text
GameObject header = new GameObject("Header");
header.transform.SetParent(canvas.transform);
TextMeshProUGUI headerText = header.AddComponent<TextMeshProUGUI>();
headerText.text = "Your header text here";
// Set constraints for header here
// Create Content
GameObject content = new GameObject("Content");
content.transform.SetParent(canvas.transform);
// Set constraints for content here
// Create Button
GameObject button = new GameObject("Button");
button.transform.SetParent(canvas.transform);
RectTransform buttonRectTransform = button.AddComponent<RectTransform>();
buttonRectTransform.sizeDelta = new Vector2(50, 15);
TextMeshProUGUI buttonText = button.AddComponent<TextMeshProUGUI>();
buttonText.text = "Your button text here";
Please note that you may need to adjust this code and write additional code (like scaling the background image) to meet your specific needs. Unity’s UI can be a bit complex to get right, especially when dealing with flexible content. I hope this helps! If you need further clarifications, please let me know.