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

Setting VisualElement style from code not working

Discussion in 'UI Toolkit' started by Knedlo, Sep 13, 2020.

  1. Knedlo

    Knedlo

    Joined:
    Oct 15, 2012
    Posts:
    54
    Hi there,

    I am trying to layout visual elements according to a graph layout (produced using MSAGL). From what I found out, it should be simple, just setting style.position to Absolute and style.left and style.top to my positions. However, this doesn't work for me.

    I am using MVP pattern and the setup looks as follows:
    There is a container view (VisualElement) which has a presenter, that can create node view by instatiating a referenced VisualTreeAsset. It can also create presenters for all graph nodes and pass them their views. Views are added as children to container view. Then the graph layout is calculated and positions for each node is passed to matching presenter that then sets the style of its view.

    Below are some relevant pieces of code:
    In container presenter on Awake this BindView method is called to create views and presenters for nodes.
    Code (CSharp):
    1. public void BindView(VisualElement ve)
    2.     {
    3.         var behaviourPresenters = editedBehaviourProvider.RootBehaviourData
    4.             .DescendantsAndSelf()
    5.             .Select(data =>
    6.             {
    7.                 var view = behaviourView.Instantiate();
    8.                 return new BehaviourPresenter(data, view);
    9.             });
    10.  
    11.         ve.Q<VisualElement>("BehaviourContainer")
    12.             .ReplaceChildrenElements(behaviourPresenters.Select(x => x.View));
    13.  
    14.         LayoutBehaviours(behaviourPresenters, editedBehaviourProvider.RootBehaviourData);
    15.     }
    then in LayoutBehaviours a node positions are calculated and presenter's SetPosition is called.
    Code (CSharp):
    1. public void SetPosition(Vector2 pos)
    2.     {
    3.         view.style.position = new StyleEnum<Position>(Position.Absolute);
    4.         view.style.width = new StyleLength(new Length(150, LengthUnit.Pixel));
    5.         view.style.height = new StyleLength(new Length(100, LengthUnit.Pixel));
    6.         view.style.left = new StyleLength(new Length(pos.x, LengthUnit.Pixel));
    7.         view.style.top = new StyleLength(new Length(- pos.y, LengthUnit.Pixel));
    8.     }
    I was looking at the values passed in and they look fine.

    And this is what i get during runtime. As you can see neither position nor left and top are set as expected.
    upload_2020-9-13_13-55-34.png

    I am fairly sure the object I am setting are the ones that are eventually displayed, but I couldn't find a way to make certain of it. Other than that I might be missing calls to some "Recompute", "MakeDirty" or something similar, but I didn't find anything about such a thing in documentation nor on forums.

    Does anyone know what could be the problem?
     
  2. Knedlo

    Knedlo

    Joined:
    Oct 15, 2012
    Posts:
    54
    Right, so of course it was me :)

    In case anyone wonders...
    In the BindView method, I am iterating over behaviourPresenters in two places. While replacing children elements of the container and then while calculating layout in LayoutBehaviours. Because I left behaviourPresenters as a query, it gets evaluated multiple times, creating multiple different views and presenters. Collapsing the query into a list did the trick.
     
    MostHated likes this.
  3. Knedlo

    Knedlo

    Joined:
    Oct 15, 2012
    Posts:
    54
    I was suspecting the fact that different objects are being set up as a most probable cause of my problems, however I couldn't find a way to confirm it. In UIToolkit Debugger, there's a DebugID property. I tried to access it from code, so that I can compare the two, but couldn't find a way to do it. It would be great if that would be possible.

    upload_2020-9-13_17-30-22.png