Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How to change the size of the arrow in the Foldout element?

Discussion in 'UI Toolkit' started by bsterling250DI, Mar 27, 2020.

  1. bsterling250DI

    bsterling250DI

    Joined:
    Sep 25, 2014
    Posts:
    78
    Hello,

    I'm new to the UI Toolkit. I'm trying to make some UI for a simple iphone program with a ListView of Foldouts. I'm struggling to figure out how to resize the arrow icon, when I select it in UIBuilder, the child elements of the Foldout are all greyed out and can't be altered.
    So i tried to start manually adding selectors to modify the dimensions of the image, and I was able to modify the width/height of the container the image is in, but the original image itself doesn't change size, just the space around it grows.

    I've tried the -unity-background-scale-mode settings, but they don't seem to change anything to me, please help.

    I may be going about this entirely the wrong way, but I also can't seem to figure a way to duplicate the foldout so that i can edit the values or even the background image (in case i want a different image entirely) but can't even do that.
     
  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Foldout, like many custom C# controls, add child elements inside themselves to achieve certain functionality. These internal elements are readonly in the UI Builder because changes to them cannot be represented in the result UXML (expand the UXML Preview at the bottom of the Viewport to see the generated UXML).

    Foldout is also a container element and it has a special child element inside marked to be "the container". When you add children to a Foldout, they don't get added immediately under the Foldout in the hierarchy, but instead, they get added inside this special container element.

    You should not manually expand the container element. This functionality is exactly what the Foldout is supposed to control. You can control the Foldout within the Builder by enabling "Preview" mode:
    upload_2020-3-27_0-29-32.png

    When this mode is active, you can click and interact with the elements in your canvas without actually selecting them (but you can still select them from the Hierarchy).

    Now that you've read all that, sad to say that ListView and Foldouts do not mix well. ListView is a virtualized list that requires all items in the list to be the same height. This means you cannot have some items expanded (like a Foldout) and others not.

    Maybe if you describe the high-level end goal that you want to achieve I can suggest another approach.
     
  3. bsterling250DI

    bsterling250DI

    Joined:
    Sep 25, 2014
    Posts:
    78
    Ahh thanks for clarifying some of that, it sounds like I'll need to create my own custom solution from the ground up.

    Essentially what i'm looking to build is a bit of a decklist manager for magic the gathering, but only for personal use.

    So imagine I have a bunch of decklists stored in json format, they have a name, and a list of cards in them.

    What i'm thinking for my UI is that I populate this panel with a bunch of foldouts (or foldout like elements) that have the name of the deck, and another text field which shows how many cards in that deck are shared among other cards among other decks.

    I want to tap a foldout so that it's element expands, pushing all the other foldouts in the list down, and making room for a nested list with card details (as each deck might share 5 or 10 cards with another deck, i want them listed here. And i'll probably nest a "link" to those decks as well that would collapse the list and refocus/select the appropriate deck.

    It's not fully fleshed out, i'm still prototyping if it'll even be helpful to me, but thought i'd give this new UI flow a try (i've been a professional unity developer for over 5 years and got really excited about the new features)
     
  4. bsterling250DI

    bsterling250DI

    Joined:
    Sep 25, 2014
    Posts:
    78
    I guess i should specify, that I plan on this running on my iphone X which has as resolution of 1125*2436 and the first issue i described is that the arrow icon (background image of the foldout) is so small it's too hard to see.
     
  5. Foxaphantsum

    Foxaphantsum

    Joined:
    Jul 5, 2013
    Posts:
    139
    In my case I was hoping to use the foldout and listviews together for a list of container groups sorta.

    The idea is to have the ability to add objects to a list (something like a meshRenderer or spine character)

    Within each object I'd be able to expand it to show a list of sub components for each thing. In my case a spine character could be expanded to show all the spine parts that make up the character.




    Alternatively I'd also like to use this to create something a bit akin to photoshops nested grouping system. Personally I may not need the ability for infinite nesting but it'd be nice to support a layer or two of it.

     
  6. Foxaphantsum

    Foxaphantsum

    Joined:
    Jul 5, 2013
    Posts:
    139
    I've tested listview + foldout and have noticed that it does seem to work on the surface



    I presume however that what you mean by
    Is that scrolling wont work correctly as it assumes every element is the same size, is there a solution for allowing it to to maybe scan the entire list and measure the size?

    Maybe its possible to make a DynamicallyScaledListView or DynamicListView or ScalableListView...

    Something that can enable this extra functionality?


    Edit*

    It seems like the listview does scale properly with foldouts... unless im mistaken...
    What exactly doesn't work right with listviews with foldouts

    Edit* I presume thats because of the default 30 just sorta appearing like it works, it doesn't actually work right.

     
    Last edited: Mar 27, 2020
  7. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    There may be some confusion between ListView and ScrollView. ListView requires all elements to be the same height. It might seem to work initially (more so if you're using 2020.2 alpha), but once you have a lot of elements and start scrolling, you'll run into issues. It's basically unsupported territory with undefined behavior. Exactly what goes wrong will be unique to your use case.

    Seems what you want here is just a ScrollView. ScrollView will happily have expanding Foldouts inside. If you don't plan to have hundreds of elements inside there is no reason to use ListView.
     
    Foxaphantsum likes this.
  8. Foxaphantsum

    Foxaphantsum

    Joined:
    Jul 5, 2013
    Posts:
    139
    Oh wow, I feel really stupid. This would work great.
     
  9. bsterling250DI

    bsterling250DI

    Joined:
    Sep 25, 2014
    Posts:
    78
    @uDamian Thanks for the tip regarding ListView vs ScrollView (I don't have a web background, so from what I could tell the only difference was that ListView was used in the demo and didn't have a scrollbar).

    I am aware that documentation is usually the last thing to get polished in a project life-cycle, but as someone who doesn't have a web-background (I'm familiar with the basics, but i mean, when i learned html and css, even Flash was in it's infancy) maybe there is some context there that I'm missing that could be added to the documentation. At my studio, we have a concept called "What-Good-Looks-Like" or "WGLL" where we talk about coding guidelines and best practices, if there was any reference material used for the design of UIElements or similarities to existing systems in other web technologies that UIElements was modeled after, what might that be so I can look up WGLL for them?

    Also, my original question still seems to be an issue that I think is a problem i'd like to figure out how to solve as it might illuminate methods of solving other issues as I come along.

    Disregarding the Foldout being in any sort of container, (just a foldout in the empty canvas) how do i scale the image? the fontSize seems to be overrideable, (though i had to set it to 800% size to make it readable on iphone X) but I can't figure out how make the entire object including the image resize with it.

    How would you recommend I go about it while keeping the functionality you mentioned with the special child container?
     
  10. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    First, it's usually a red flag if you have to set your font to 800%. The Panel Renderer has a companion component called Panel Scaler where you can define how you want the UI to scale. The default font size should look "good" on your device..by default.

    As for the image resizing, you could try using the
    Image
    element. It's not available in the UI Builder right now but if you add it to the UXML manually, it should work. However, you need to assign its image via the
    image
    property, not as a
    backgroundImage
    style. It has a few modes and it will resize itself based on the image.

    You can also use C# to resize the element when you give it a background image style. You can read this image reference from the
    myElement.style.backgroundImage
    C# property. Should be a
    Texture2D
    .