Search Unity

How to use builtin styles to achieve same look as Unity windows and inspectors?

Discussion in 'UI Toolkit' started by Xarbrough, Jul 3, 2019.

  1. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,188
    I'm just getting started with UIElements but I keep stumbling across this tiny problem: I add a few controls and create something very basic, but almost all of the controls and the overall layout is slightly different to the default implementation of EditorGUILayout controls from the IMGUI system.

    Shouldn't the default styles match the look and spacing/padding/margin of the previous editor controls?

    Is there any builtin style I need to apply to use these defaults? Can I find a list of all the styles used by Unity somewhere? I know I can check with the UIElements debugger, but not very many windows and inspectors are currently written with the new system, they are mostly wrappers for IMGUI blocks.

    Currently I always need to create a custom style and start adding special padding and margin to every control to make it look like previous controls did, that takes much longer than using the old IMGUI system although I really want to transition.
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi Xarbrough,

    The intention is to have the default styles in UIElements match IMGUI. Ideally, there shouldn't be anything to do on your part to get the same results as IMGUI.

    Since you seem to indicate that this isn't the case we would appreciate if you could report a bug in that case and we'll take a look.

    Thanks
     
  3. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,188
    Thank you for the clarification! :) I have submitted a report which showcases the differences in margin: Case 1168995

    upload_2019-7-11_18-18-38.png

    At first glance it looks as if only the default margin is missing, but I also found a few very specific differences, which I didn't have time to include in the report for now. These were, for example, a difference in the padding applied to buttons when using an image icon on the button.
     
    Last edited: Jul 12, 2019
  4. OliverAnthony

    OliverAnthony

    Joined:
    Nov 21, 2012
    Posts:
    13
    There are times when it would be very useful to have other-than-default styles used by standard Unity Editor views exposed. Take the title styling used by built-in preference windows, for example. Beyond this, it would be useful and helpful to end-users of custom tooling if it was possible to conform to the visual language established by the vanilla Unity Editor in a productive and future-proof way, rather than meticulously tweaking custom styles to mirror black-boxed built-in styles only to have them change in a subsequent editor version.
     
    ErnestSurys and Xarbrough like this.