Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice
  3. Unite 2024 Registrations are now LIVE! We are thrilled to announce that Unite 2024 Registration is now live and open for all!
    Dismiss Notice
Unity 6 Preview now available 2024 XPlace Summer Game Jam Unite 2024 Registrations are now LIVE!

How should I hide/show a VisualElement?

Discussion in 'UI Toolkit' started by Baste, Feb 1, 2021.

  1. Baste

    Baste

    Joined:
    Jan 24, 2013
    Posts:
    6,355
    Alternative 1:

    Code (csharp):
    1. // hide:
    2. ve.style.display = DisplayStyle.None;
    3. // show:
    4. ve.style.display = DisplayStyle.Flex;
    // alternative 2:

    Code (csharp):
    1. // hide:
    2. addRuleButton.AddToClassList("hidden");
    3. // show:
    4. addRuleButton.RemoveFromClassList("hidden");
    5.  
    6. // uss:
    7. .hidden {
    8.     display: none;
    9. }
    Any good reasons to pick one over the other? Is one of them more maintainable? Is one of them more efficient?
     
    Baste, Feb 1, 2021
    #1
    pt-paulrahme and JohngUK like this.

  2. SimonDufour

    SimonDufour

    Unity Technologies

    Joined:
    Jun 30, 2020
    Posts:
    596
    I think the difference between both will be negligible. In both case, the layout will be identical, so only the style propagation of the stylesheet/inline style to the resolved style will be different. I would personally go with the direct modification of the style.display unless applying a class would make the maintenance easier.

    I would recommend against doing a mix and match both method, as you could hide one element with the inline style and then try to apply a selector later and wonder why it didn't work.
     
    SimonDufour, Feb 1, 2021
    #2
    Baste likes this.

  3. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    The main reason to use the first approach is that the style values set from C# are considered inline style and are the most specific. What I mean by that is that inline style have precedence over USS, so the only way to change style values set from C# is with C#.

    Using USS allows the sharing of the style data behind the scene. For example if 10 elements have the ".hidden" selector they will share the same data so that has the potential to be more memory friendly.
     
    jonathanma_unity, Feb 1, 2021
    #3
    Baste likes this.

  4. manuelgoellnitz

    manuelgoellnitz

    Joined:
    Feb 15, 2017
    Posts:
    398
    There is also
    ve.style.visibilty = Visibility.hidden
    ve.style.visibilty = Visibility.visible

    The main difference I think is: with visibilty it keeps its space in the layout, which display does not.
    But if you use "display" to hide/show, and you have child-elements with a dynamic size (height is set by text for example), this size may no be calculated right away.
     
    manuelgoellnitz, Feb 3, 2021
    #4
    pt-paulrahme, JohngUK and dyamanoha_ like this.

  5. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    275
    Similar to visibility, you can set the opacity between 0 and 1 for more control.
     
    Nexer8, Feb 5, 2021
    #5
    ChickChuck2 likes this.

  6. Quique-Martinez

    Quique-Martinez

    Joined:
    Oct 1, 2013
    Posts:
    141
    Can someone confirm if visibility is or is not hierarchical across the tree? Some of my controls still remain after hiding parents. Has it to do with inline styles?.
    Can I remove the inline settings for visibility across the tree by code?
     
    Quique-Martinez, Jul 13, 2023
    #6
    FrancoArrighi and theolagendijk like this.