Search Unity

  1. We are migrating the Unity Forums to Unity Discussions by the end of July. Read our announcement for more information and let us know if you have any questions.
    Dismiss Notice
  2. Dismiss Notice

Question UXML Binding style, class or label color

Discussion in '2023.2 Beta' started by SebMaire, Aug 18, 2023.

  1. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Hello,

    I am developping an interface for a project using the new UIToolkit and UXML.
    I switched to the last alpha unity version (2023.2.0a22) to profit of runtime binding thing which works pretty well so far.

    I do have a fixed list of elements where each element contains :
    - a label
    - an icon (3 different custom Visual elements)

    each of these can be in 3 different states (Ok, Ko, Loading) which have 3 different colors.
    For the icon I simply used the visible property which can be bound to and it works.
    For the label I'd like to switch colors but it appears there is no way to do it except duplication Labels and playing with visibility which is not great as it complexifies the UXML code.

    The binding works when I bound to a simple property like "text".
    Here's the syntax of the binding

    <Bindings>
    <ui:DataBinding property="background-color" data-source-path="FontColor"/>
    </Bindings>

    What I tried so far for the property field :
    - style (changing the whole style)
    - class (changing the whole class)
    - style.color
    - style.backgroundColor
    - background-color
    - backgroundColor
    - color

    Does anyone know if this is achievable ? If yes how ?

    Thanks !
     
  2. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    507
    Hi @SebMaire, you should be able to bind to the style properties using the "style" prefix and either the C# name or the uss property name. So for the background color, both
    "style.backgroundColor"
    and
    "style.background-color"
    should work.

    StyleBindings.gif

    You can check in the debugger if the inline style for the property was set.
    If it was not set, you can check if there was an error during the binding operation by turning on the logs through the kebab menu of the window and using an option in the
    Bindings Console Logs
    sub-menu. For in-game UI, the option can be changed on the panel settings.

    Hope this helps!
     
    SebMaire likes this.
  3. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Oh great ! so I'm thinking my issue was probably due to wrong type for the binding, you appear to bind a Unity Color Type, I was binding a string I'm going to test it and tell you !

    Also Do you know if we can bind the "class" property ?
     
  4. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    I confirm that was the wrong type, using Unity Color works perfect !
     
  5. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    507
    It's preferable to bind to the correct type (here either
    Color
    or
    StyleColor
    would work out of the box), but you can also bind with other types, as long as you provide a converter to
    StyleColor
    for it.

    Yes, although not out-of-the-box. You can derive from
    CustomBinding
    and implement the logic behind adding/removing the uss class. You can find an example here.
     
    SebMaire likes this.
  6. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Hello,

    Binding with the proper type worked perfectly (Unity Color).
    I'm now using converters, apparently we need to return StyleColor for it to work for bakground-color (source to ui), is there a way to know which type is expected for style properties ?

    Also I'm trying using the same way to bind the border-color but this does nothing (just replacing "background-color" in my binding with "border-color", the background is bound but not the border :/, is it normal or I am missing something ?
     
  7. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Oh Apparently I have to bind seperately border-top-color border-bottom-color, border-left-color, and border-right-color, is there another way ?
     
  8. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    507
    Hi!

    It needs to match the destination type, so for the inline background color style, it needs to match the type of
    style.backgroundColor
    , which is a
    StyleColor
    .

    Yes, that is the case currently, as the binding system operates on the C# API. However, we're looking into a way to automate this so that you can register a binding on
    margin
    and we'll automatically handle it under-the-hood. It's not very complicated when dealing with a single value, but usually, the shorthand properties can accept more than a single value and this is what we are looking into.

    Hope this helps!
     
  9. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Yep it does thanks :)
    For this is there a way to see the expected types for the whole style ? where is the class containing that defined ?
    The UIToolkit debugger does not tell and I do not see where I can find the info, I spend a lot of time looking for the right type, I feel like I can find the info :p
     
  10. SebMaire

    SebMaire

    Joined:
    Feb 9, 2021
    Posts:
    13
    Ok just found the info in case it can help someone, it's the IStyle interface, you can find it using your code editor creating a fake VisualElements and navigate into the style field's definition.

    Code (CSharp):
    1.        
    2. #region Assembly UnityEngine.UIElementsModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null
    3. // C:\Program Files\Unity\Hub\Editor\2023.2.0a22\Editor\Data\Managed\UnityEngine\UnityEngine.UIElementsModule.dll
    4. #endregion
    5.  
    6. using System;
    7.  
    8. namespace UnityEngine.UIElements
    9. {
    10.     public interface IStyle
    11.     {
    12.         //
    13.         // Summary:
    14.         //     Alignment of the whole area of children on the cross axis if they span over multiple
    15.         //     lines in this container.
    16.         StyleEnum<Align> alignContent { get; set; }
    17.         //
    18.         // Summary:
    19.         //     Time a transition animation should take to complete.
    20.         StyleList<TimeValue> transitionDuration { get; set; }
    21.         //
    22.         // Summary:
    23.         //     Duration to wait before starting a property's transition effect when its value
    24.         //     changes.
    25.         StyleList<TimeValue> transitionDelay { get; set; }
    26.         //
    27.         // Summary:
    28.         //     The transformation origin is the point around which a transformation is applied.
    29.         StyleTransformOrigin transformOrigin { get; set; }
    30.         //
    31.         // Summary:
    32.         //     Top distance from the element's box during layout.
    33.         StyleLength top { get; set; }
    34.         //
    35.         // Summary:
    36.         //     Drop shadow of the text.
    37.         StyleTextShadow textShadow { get; set; }
    38.         //
    39.         // Summary:
    40.         //     The element's text overflow mode.
    41.         StyleEnum<TextOverflow> textOverflow { get; set; }
    42.         //
    43.         // Summary:
    44.         //     A scaling transformation.
    45.         StyleScale scale { get; set; }
    46.         //
    47.         // Summary:
    48.         //     Properties to which a transition effect should be applied.
    49.         StyleList<StylePropertyName> transitionProperty { get; set; }
    50.         //
    51.         // Summary:
    52.         //     A rotation transformation.
    53.         StyleRotate rotate { get; set; }
    54.         //
    55.         // Summary:
    56.         //     Element's positioning in its parent container.
    57.         StyleEnum<Position> position { get; set; }
    58.         //
    59.         // Summary:
    60.         //     Space reserved for the top edge of the padding during the layout phase.
    61.         StyleLength paddingTop { get; set; }
    62.         //
    63.         // Summary:
    64.         //     Space reserved for the right edge of the padding during the layout phase.
    65.         StyleLength paddingRight { get; set; }
    66.         //
    67.         // Summary:
    68.         //     Space reserved for the left edge of the padding during the layout phase.
    69.         StyleLength paddingLeft { get; set; }
    70.         //
    71.         // Summary:
    72.         //     Space reserved for the bottom edge of the padding during the layout phase.
    73.         StyleLength paddingBottom { get; set; }
    74.         //
    75.         // Summary:
    76.         //     How a container behaves if its content overflows its own box.
    77.         StyleEnum<Overflow> overflow { get; set; }
    78.         //
    79.         // Summary:
    80.         //     Specifies the transparency of an element and of its children.
    81.         StyleFloat opacity { get; set; }
    82.         //
    83.         // Summary:
    84.         //     Right distance from the element's box during layout.
    85.         StyleLength right { get; set; }
    86.         //
    87.         // Summary:
    88.         //     Determines how intermediate values are calculated for properties modified by
    89.         //     a transition effect.
    90.         StyleList<EasingFunction> transitionTimingFunction { get; set; }
    91.         //
    92.         // Summary:
    93.         //     A translate transformation.
    94.         StyleTranslate translate { get; set; }
    95.         //
    96.         // Summary:
    97.         //     Tinting color for the element's backgroundImage.
    98.         StyleColor unityBackgroundImageTintColor { get; set; }
    99.         //
    100.         // Summary:
    101.         //     Fixed width of an element for the layout.
    102.         StyleLength width { get; set; }
    103.         //
    104.         // Summary:
    105.         //     Word wrap over multiple lines if not enough space is available to draw the text
    106.         //     of an element.
    107.         StyleEnum<WhiteSpace> whiteSpace { get; set; }
    108.         //
    109.         // Summary:
    110.         //     Specifies whether or not an element is visible.
    111.         StyleEnum<Visibility> visibility { get; set; }
    112.         //
    113.         // Summary:
    114.         //     The element's text overflow position.
    115.         StyleEnum<TextOverflowPosition> unityTextOverflowPosition { get; set; }
    116.         //
    117.         // Summary:
    118.         //     Outline width of the text.
    119.         StyleFloat unityTextOutlineWidth { get; set; }
    120.         //
    121.         // Summary:
    122.         //     Outline color of the text.
    123.         StyleColor unityTextOutlineColor { get; set; }
    124.         //
    125.         // Summary:
    126.         //     Horizontal and vertical text alignment in the element's box.
    127.         StyleEnum<TextAnchor> unityTextAlign { get; set; }
    128.         //
    129.         // Summary:
    130.         //     Size of the 9-slice's top edge when painting an element's background image.
    131.         StyleInt unitySliceTop { get; set; }
    132.         //
    133.         // Summary:
    134.         //     Scale applied to an element's slices.
    135.         StyleFloat unitySliceScale { get; set; }
    136.         //
    137.         // Summary:
    138.         //     Size of the 9-slice's right edge when painting an element's background image.
    139.         StyleInt unitySliceRight { get; set; }
    140.         //
    141.         // Summary:
    142.         //     Size of the 9-slice's left edge when painting an element's background image.
    143.         StyleInt unitySliceLeft { get; set; }
    144.         //
    145.         // Summary:
    146.         //     Size of the 9-slice's bottom edge when painting an element's background image.
    147.         StyleInt unitySliceBottom { get; set; }
    148.         //
    149.         // Summary:
    150.         //     Increases or decreases the space between paragraphs.
    151.         StyleLength unityParagraphSpacing { get; set; }
    152.         //
    153.         // Summary:
    154.         //     Specifies which box the element content is clipped against.
    155.         StyleEnum<OverflowClipBox> unityOverflowClipBox { get; set; }
    156.         //
    157.         // Summary:
    158.         //     Font style and weight (normal, bold, italic) to draw the element's text.
    159.         StyleEnum<FontStyle> unityFontStyleAndWeight { get; set; }
    160.         //
    161.         // Summary:
    162.         //     Font to draw the element's text, defined as a FontDefinition structure. It takes
    163.         //     precedence over -unity-font.
    164.         StyleFontDefinition unityFontDefinition { get; set; }
    165.         //
    166.         // Summary:
    167.         //     Font to draw the element's text, defined as a Font object.
    168.         StyleFont unityFont { get; set; }
    169.         //
    170.         // Summary:
    171.         //     Minimum width for an element, when it is flexible or measures its own size.
    172.         StyleLength minWidth { get; set; }
    173.         //
    174.         // Summary:
    175.         //     Minimum height for an element, when it is flexible or measures its own size.
    176.         StyleLength minHeight { get; set; }
    177.         //
    178.         // Summary:
    179.         //     Maximum width for an element, when it is flexible or measures its own size.
    180.         StyleLength maxWidth { get; set; }
    181.         //
    182.         // Summary:
    183.         //     Maximum height for an element, when it is flexible or measures its own size.
    184.         StyleLength maxHeight { get; set; }
    185.         //
    186.         // Summary:
    187.         //     Color of the element's top border.
    188.         StyleColor borderTopColor { get; set; }
    189.         //
    190.         // Summary:
    191.         //     Space reserved for the right edge of the border during the layout phase.
    192.         StyleFloat borderRightWidth { get; set; }
    193.         //
    194.         // Summary:
    195.         //     Color of the element's right border.
    196.         StyleColor borderRightColor { get; set; }
    197.         //
    198.         // Summary:
    199.         //     Space reserved for the left edge of the border during the layout phase.
    200.         StyleFloat borderLeftWidth { get; set; }
    201.         //
    202.         // Summary:
    203.         //     Color of the element's left border.
    204.         StyleColor borderLeftColor { get; set; }
    205.         //
    206.         // Summary:
    207.         //     Space reserved for the bottom edge of the border during the layout phase.
    208.         StyleFloat borderBottomWidth { get; set; }
    209.         //
    210.         // Summary:
    211.         //     The radius of the bottom-right corner when a rounded rectangle is drawn in the
    212.         //     element's box.
    213.         StyleLength borderBottomRightRadius { get; set; }
    214.         //
    215.         // Summary:
    216.         //     The radius of the bottom-left corner when a rounded rectangle is drawn in the
    217.         //     element's box.
    218.         StyleLength borderBottomLeftRadius { get; set; }
    219.         //
    220.         // Summary:
    221.         //     Color of the element's bottom border.
    222.         StyleColor borderBottomColor { get; set; }
    223.         //
    224.         // Summary:
    225.         //     Background image size value.
    226.         StyleBackgroundSize backgroundSize { get; set; }
    227.         //
    228.         // Summary:
    229.         //     Background image repeat value.
    230.         StyleBackgroundRepeat backgroundRepeat { get; set; }
    231.         //
    232.         // Summary:
    233.         //     Background image y position value.
    234.         StyleBackgroundPosition backgroundPositionY { get; set; }
    235.         //
    236.         // Summary:
    237.         //     Background image x position value.
    238.         StyleBackgroundPosition backgroundPositionX { get; set; }
    239.         //
    240.         // Summary:
    241.         //     Background image to paint in the element's box.
    242.         StyleBackground backgroundImage { get; set; }
    243.         //
    244.         // Summary:
    245.         //     Background color to paint in the element's box.
    246.         StyleColor backgroundColor { get; set; }
    247.         //
    248.         // Summary:
    249.         //     Similar to align-items, but only for this specific element.
    250.         StyleEnum<Align> alignSelf { get; set; }
    251.         //
    252.         // Summary:
    253.         //     Alignment of children on the cross axis of this container.
    254.         StyleEnum<Align> alignItems { get; set; }
    255.         //
    256.         // Summary:
    257.         //     The radius of the top-left corner when a rounded rectangle is drawn in the element's
    258.         //     box.
    259.         StyleLength borderTopLeftRadius { get; set; }
    260.         //
    261.         // Summary:
    262.         //     Increases or decreases the space between words.
    263.         StyleLength wordSpacing { get; set; }
    264.         //
    265.         // Summary:
    266.         //     The radius of the top-right corner when a rounded rectangle is drawn in the element's
    267.         //     box.
    268.         StyleLength borderTopRightRadius { get; set; }
    269.         //
    270.         // Summary:
    271.         //     Bottom distance from the element's box during layout.
    272.         StyleLength bottom { get; set; }
    273.         //
    274.         // Summary:
    275.         //     Space reserved for the top edge of the margin during the layout phase.
    276.         StyleLength marginTop { get; set; }
    277.         //
    278.         // Summary:
    279.         //     Space reserved for the right edge of the margin during the layout phase.
    280.         StyleLength marginRight { get; set; }
    281.         //
    282.         // Summary:
    283.         //     Space reserved for the left edge of the margin during the layout phase.
    284.         StyleLength marginLeft { get; set; }
    285.         //
    286.         // Summary:
    287.         //     Space reserved for the bottom edge of the margin during the layout phase.
    288.         StyleLength marginBottom { get; set; }
    289.         //
    290.         // Summary:
    291.         //     Increases or decreases the space between characters.
    292.         StyleLength letterSpacing { get; set; }
    293.         //
    294.         // Summary:
    295.         //     Left distance from the element's box during layout.
    296.         StyleLength left { get; set; }
    297.         //
    298.         // Summary:
    299.         //     Justification of children on the main axis of this container.
    300.         StyleEnum<Justify> justifyContent { get; set; }
    301.         //
    302.         // Summary:
    303.         //     Fixed height of an element for the layout.
    304.         StyleLength height { get; set; }
    305.         //
    306.         // Summary:
    307.         //     Font size to draw the element's text.
    308.         StyleLength fontSize { get; set; }
    309.         //
    310.         // Summary:
    311.         //     Placement of children over multiple lines if not enough space is available in
    312.         //     this container.
    313.         StyleEnum<Wrap> flexWrap { get; set; }
    314.         //
    315.         // Summary:
    316.         //     Specifies how the item will shrink relative to the rest of the flexible items
    317.         //     inside the same container.
    318.         StyleFloat flexShrink { get; set; }
    319.         //
    320.         // Summary:
    321.         //     Specifies how the item will grow relative to the rest of the flexible items inside
    322.         //     the same container.
    323.         StyleFloat flexGrow { get; set; }
    324.         //
    325.         // Summary:
    326.         //     Direction of the main axis to layout children in a container.
    327.         StyleEnum<FlexDirection> flexDirection { get; set; }
    328.         //
    329.         // Summary:
    330.         //     Initial main size of a flex item, on the main flex axis. The final layout might
    331.         //     be smaller or larger, according to the flex shrinking and growing determined
    332.         //     by the other flex properties.
    333.         StyleLength flexBasis { get; set; }
    334.         //
    335.         // Summary:
    336.         //     Defines how an element is displayed in the layout.
    337.         StyleEnum<DisplayStyle> display { get; set; }
    338.         //
    339.         // Summary:
    340.         //     Mouse cursor to display when the mouse pointer is over an element.
    341.         StyleCursor cursor { get; set; }
    342.         //
    343.         // Summary:
    344.         //     Color to use when drawing the text of an element.
    345.         StyleColor color { get; set; }
    346.         //
    347.         // Summary:
    348.         //     Space reserved for the top edge of the border during the layout phase.
    349.         StyleFloat borderTopWidth { get; set; }
    350.         //
    351.         // Summary:
    352.         //     Background image scaling in the element's box.
    353.         [Obsolete("unityBackgroundScaleMode is deprecated. Use background-* properties instead.")]
    354.         StyleEnum<ScaleMode> unityBackgroundScaleMode { get; set; }
    355.     }
    356. }
    357.  
    358.  
     
  11. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    507
    Yes, indeed, the
    IStyle
    interface will give you the information you need. If you are using the UI Builder to add the bindings, you will also see the property type on the right side of the binding window.
     
    SebMaire likes this.
  12. martinpa_unity

    martinpa_unity

    Unity Technologies

    Joined:
    Oct 18, 2017
    Posts:
    507
    One additional note is that we provide some built-in converters for the style properties. For example, a
    StyleColor
    can accept a
    StyleColor
    , a
    Color
    or a
    StyleKeyword
    by default.

    However, when defining a converter, it needs to match the destination type.
     
    SebMaire likes this.