UIElements, how to make elements stick to the sides of the parent

Hello!

I'm working with the UI elements and could use some help achieving the following effect? I want the purple elements to be the same size and always be on either the start or end of the parent VisualElement, whereas the red item should stretch in the middle filling up any dead space. Would anyone have an idea as to how I should approach this using USS? Much appreciated!

Note: the scale of the entire bar (the visual parent) is affected by factors outside of this bar as well!

 

Resolved it myself!

 

What was the solution?

 

I can think of two ways to do this.

In the first way, create a VisualElement to hold the row and make it a flex-row. Tthen create 3 child visual elements: left-margin, right-margin, and content. Give a fixed width to the left and right margin elements (e.g., 100px and 300px), and assign a flex-grow value of 1 to the content element. This method is most useful when you have some sort of image you want to place in the margins. Here is the UXML:

Code (XML):

1. <ui:VisualElement name="row" style="flex-direction: row; height: 50px;">
2.     <ui:VisualElement name="left-margin" style="width: 100px;" />
3.     <ui:VisualElement name="content" style="flex-grow: 1;" />
4.     <ui:VisualElement name="right-margin" style="width: 300px;" />
5. </ui:VisualElement>

In the second simpler way, create a VisualElement for the row and set the margin size to achieve the desired effect. Here it the UXML:

Code (CSharp):

1. <ui:VisualElement name="content" style="margin-left: 100px; margin-right: 300px; height: 50px" />

I've used fixed-size margins of 100px and 300px in my examples, but you can of course use different values (or percentages instead of pixels). I also used a fixed height of 50px, but only for demonstration purposes. Normally you'd set the height (or not) according to your UI's needs.

 

Hi!

Since I know that in my case there is only one element that I want to dynamically change, I set it's USS property for flex-grow to 1! Since no other elements in my visual element will change size and their size has been set, the size is stretched to the width of my element parent minus all my "static" elements widths!