Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
New Forum User Notice Update to the Unity Editor Software Terms

[SOLVED] ToolbarToggle with text="" not working

Discussion in 'UI Toolkit' started by kingstone426, Nov 26, 2019.

  1. kingstone426

    kingstone426

    Joined:
    Jun 21, 2013
    Posts:
    43
    I am using ToolbarToggle buttons with images instead of text labels, but for some reason they won't respond to clicks.

    This is my UXML:

    Code (csharp):
    1.  
    2. <editor:ToolbarToggle name="MyToggleButton" text="">
    3.     <Image style="background-image: url('img.png');" />
    4. </editor:ToolbarToggle>
    5.  
    When clicked, the toggle button color flashes, indicating that it received the click, but then it does not remain in its toggled state, and also does not trigger RegisterValueChangedCallback.

    Changing the attribute to text="anything" makes the toggle button behave as expected (but hiding my pretty image). I have tried setting the image's PickingMode to Ignore, but it doesn't help.

    Is this expected behaviour or a bug?

    edit: Using Unity 2019.3b12.
     
    Last edited: Nov 26, 2019
    kingstone426, Nov 26, 2019
    #1

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    The ToolbarToggle is a reskinned Toggle which has inside an "input" element. In a normal Toggle, this element is the one that contains the checkbox and the text, but the ToolbarToggle hides the checkbox and just uses the text (a Label element). This means that it's that Label element that handles the clicks, not the ToolbarToggle element itself.

    A couple of suggestions:
    1. Only use Image if you really want the image file to drive the size of your element. In most cases, it should be the UI that drives its own sizes, not the image assets. The Image element is really just meant for things like an image preview viewport, not for icons in buttons, and it doesn't use the background-image style to do this - it has its own imageSource property that you can only set in C#. Instead, use an empty VisualElement with a background-image style (as you already do).
    2. You can make your icon element above float behind the Input element of the ToolbarToggle (which is a sibling element) by setting this style:
    Code (CSharp):
    1. position: absolute;
    2. left: 0;
    3. top: 0;
    4. right: 0;
    5. left: 0;
    You can then continue setting the text property of your ToolbarToggle.
    3. Use the UIElements Debugger (Windows > Analysis) to see the exact live hierarchy of your elements and see why your elements might not be visible.
     
    uDamian, Nov 26, 2019
    #2

  3. kingstone426

    kingstone426

    Joined:
    Jun 21, 2013
    Posts:
    43
    Thanks! After some experimentation, I decided to keep the inner <Image> tag to make the image scale properly, but using your suggested positioning attributes to make it float behind the input element.

    So now the ToolbarToggle has a fixed width and text=" " which makes it clickable and all works well (except the uxml and uss are perhaps a bit ugly).
     
    kingstone426, Nov 27, 2019
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    Just to confirm, the 
    Image
    element will not do anything for you if you assign the image asset via background-image style. You have to set the special 
    Image.image
    source property in C#. It will also not work with the above styles suggested since both the Image and the layout system will try to set the size of the Image element and you'll have a race. Image really only works when it uses `position: relative`. But...if it works for you then no need to change!
     
    uDamian, Nov 27, 2019
    #4