Question How to stabilize UI during Resize?

So I'm creating a Windows desktop app, and this is my UI

Code (csharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
2.     <ui:Label text="Sample App" display-tooltip-when-elided="true" style="font-size: 30px; color: rgb(226, 226, 226);" />
3.     <ui:VisualElement style="align-items: flex-start; flex-direction: row;">
4.         <AdHost ad-size="300,250" place="MainMenu" style="width: 300px; height: 600px; flex-direction: row;" />
5.         <ui:VisualElement style="flex-direction: row; width: 400px; height: 250px; justify-content: flex-start;">
6.             <ui:TextField picking-mode="Ignore" name="PCLoadLetter" multiline="true" style="width: 250px; flex-direction: column; height: 100%;" />
7.             <ui:VisualElement>
8.                 <ui:Button text="Save" display-tooltip-when-elided="true" name="SaveData" enable-rich-text="false" />
9.                 <ui:Button text="Load" display-tooltip-when-elided="true" enable-rich-text="false" name="LoadData" />
10.             </ui:VisualElement>
11.         </ui:VisualElement>
12.     </ui:VisualElement>
13.     <UISTester focusable="true" style="max-width: 500px;" />
14. </ui:UXML>
15.  

(AdHost and UISTester are custom controls)
The max width for everything here is like, 700 px.
Lets say that my width is like, 800 something like that. The entire UI is shown, and everything is at its greatest size.

So lets say I expand the width. At the beginning of the expansion, everything is in position, and at the end of the expansion everything is in the same position.

But while it's expanding, as I resize the window, the Text Field and buttons jump as though they're going to move, and then snap back. The entire UI jiggles as I expand and contract the window.

It's not a major issue, but I was wondering if there was something in particular I was doing that made this a problem, or is this just a strange bug in the UI Toolkit on resizable desktop windows?

 

Hi,

You can try to work with the positions of your UI Elements during GeometryChangeEvent

Code (CSharp):

1. YourWindow.RegisterCallback<GeometryChangedEvent>( evt =>
2. {
3.      // work with positions
4. } );
5.  

Also, you can try to use percent values for position, and size style properties (top: x%, left: x%, width: x%, height x% ane etc.), which helped me avoid jiggles for my UI inside SceneView when SceneView is resizing. So, instead of calculating width during GeometryChangedEvent, I used style { width: 100% } and it stopped jiggling.

Also, if you will not find a solution for this problem you can try to blur the whole window during resizing.