Splitter

Unity Engine
1

Would be useful if there were an official Splitter element (for both horizontal and vertical), at least Editor side. Like the DebuggerSplitter for example.

2

I added a version of the Splitter used by the Debugger in the UIElementsExamples repo here:

It’s not an official control, just example code, but hopefully it should be enough of a base to build on. It only supports 2 panes (hence the name), and one of the panes has to be fixed in width, while the other will resize with the size of the SplitView element itself (using flex-grow). You can still combine multiple SplitViews together to form a more complex window. Both vertical and horizontal modes are supported.

6 Likes
3

Thanks for sharing this @uDamian - was also using the debugger to see how the splitter in uibuilder is implemented and found out about your TwpPaneSplitView this way.

But there is also a ViewSplitter (for example used for the Project Settings window in 2019.3), which was part of the documentation in 2018 under experimental but doesn’t exist anymore, not in the docs nor in the experimental namespace.

Any reason why it got removed? Or is it just hidden somewhere else?

4

The VisualSplitter had a lot of quirks and only worked properly in some specific usage. Api-wise it wasn’t in a state ready for public release. That being said, we intend to provide an splitter implementation in the future.

1 Like
5

Just checking if there has been any released splitter yet or should I make my own? I only need it for editor usage.

6

Hi Cameron, the TwoPaneSplitView class that Damian mentioned a few months ago (above in this thread) is now public. It is part of the latest UI Toolkit. See the following for more information:

Hope that helps you,

Sebastien

1 Like
7

This is super great. Thank you.

8

Where exactly can I find this TwoPaneSplitView ? Is it present in UI builder? I can’t see it there :confused:

9

In the “Library” section of the Builder you have to select “Project” and navigate to the “Custom Controls (C#)” area to UnityEngine.UIElements.TwoPaneSplitView.

1 Like
10

Is there any reason that I’m not seeing this?

Using Version 1.0.0-preview.12 - January 16, 2021 of UI builder and Version 1.0.0-preview.13 - December 01, 2020 of UI Toolkit on Unity 2020.1.17f1

The docs say it like you

" It also lists any custom C# elements that inherit from VisualElement and have their UxmlFactory set up to be instantiable via UXML." but I don’t see it

Is there anything else I need to download besides UI Toolkit and UI Builder? Some samples? A Github repo?

11

Actually, I realized that as you user do not yet have access to this element from the UI Builder :frowning:

That is because I am using an internal version of the software. Apologies for misguiding you.

However you may still be able to “bypass” the UI builder by editing the UXML file manually:

After this the UI Builder should recognize it.

1 Like
12

Yup thanks! Is this still in development? Because it’s quite buggy for my, it looks fine inside of UI builder (and works using the preview tool) but in the editor the whole things collapses and is invisible? Looking at the debugger the two pane split view has a height of 0.

If this is not yet ready for release I’ll just wait! But maybe I’m doing something wrong

13

My bet is that there is a layout issue independent of the TwoPaneSplitView. You must make sure it receives an height for example with height=100% or flex-grow=1.

14

Hi I am not seeing TwoPaneSplitView in UI builder, here are my versions:

  • Unity 2020.3.0f1
  • UI Builder @ 1.0.0-preview.14
    Any ETA on when it will make it to UI builder? I can edit the XML and it works perfectly, but I really want to be able to drag and drop it in ui builder… that would be super cool.

TBH I am only seeing a very small number of controls in general for ui builder, is this that has been exposed?

7146098--855107--upload_2021-5-16_18-58-4.png

15

Nope, in preview 14, we have a bunch of widgets already for editor. But you need to enable the editor authoring. In the UI Builder: click on the UXML file name on the left hand side in the UI Builder. On the right hand side you will need to see this Document Settins. Make sure the checkbox is set. You can enable to be the default in the settings too. But you need to keep in mind that for some reason Unity is separating the Editor Widgets from Runtime Widgets, they aren’t and won’t be interchangeable. So if you enable this, you will need ot make sure you don’t put editor widget in a runtime XML.
There is no Split component exposed in the builder yet.

7146470--855158--screenshot2.png 7146470--855161--screenshot1.png

16

Ace! Worked like a charm, thanks very much. I’m only considering ui toolkit for editor tooling at the moment, but cheers for the heads up.

It looks like TwoPanelSplitView is an internal class. I was hoping to create my own type and subclass it to have it appear in ui builder but doesn’t look like I can do that unfortunately. I’ll just have to go with the xml approach for now.

EDIT: I was looking in the wrong namespace for it, it’s in UnityEngine.UIElements, not UnityEditor.UIElements.

This is what I have now, and it appears in UI builder, hoorar! Except the inherited properties don’t appear in the inspector correctly. It’s missing ‘Fixed Pane Initial Dimension, Fixed Pane Index, and Orientation’ properties. So close!

EDIT EDIT: I finally got it all working, with inherited properties displaying in UI builder. I just needed to pass the UXmlTraits from TwoPaneSplitView class into the xml factory object.

Everything is working, and I believe this is a great method to expose internal Unity types that aren’t officially in ui builder yet.

Success!

using UnityEngine.UIElements;
using UnityEngine.UIElements;

public class SplitView : TwoPaneSplitView
{
    public new class UxmlFactory : UxmlFactory<SplitView, UxmlTraits> { }
}
17

Thanks for this, it seems to work! I even nested some of them and it works pretty much as expected.

However I can’t seem to find any way to control the initial spread of the split view so my dragline is starting in an undefined position that is very unappealing. How do we specify the position of the dragline? I did try setting the minimum sizes for the child elements which seems to auto size things correctly but then the dragline doesn’t snap to the correct initial position still, you have to interact with it twice to get it to snap back to where it should be.

Any ideas?

18

Looks like the initial position is not ever correctly set until you interact with the pane dragger. The UI Builder doesn’t have any exposure to set the initial value so you have to do this manually in code when you load the UXML template.

            SplitView mainSplit = rootVisualElement.Q<SplitView>("MAIN_SPLIT");
            SplitView columnSplit = rootVisualElement.Q<SplitView>("NESTED_SPLIT");
            mainSplit.fixedPaneInitialDimension = 399;
            columnSplit.fixedPaneInitialDimension = 200;

This is definitely a workaround for an incomplete feature. Not sure how this will behave if they ever add full UI Builder support because if you’re forcing min/max sizes on the wrapper pane then they’ll properly fire and constrain but the dragger’s will not position themselves properly so doing this makes some assumptions and introduces a QA concern.

If anyone knows of a better way to trigger the drag anchors to properly position please let us know. :slight_smile:

19

Hi All,

Have been able to see a Split View in the custom controls by creating a custom class like so:

    public class SplitView : TwoPaneSplitView {
        public new class UxmlFactory : UxmlFactory<SplitView, TwoPaneSplitView.UxmlTraits> { }
    }

But when added to the Hierarchy in the UIBuilder the preview looks good but I’m not able to see the split view in the actual Editor Window.

Unity 2022.1.3f1

20

In your EditorWindow class:

public void CreateGUI()
{
    // don't use: rootVisualElement.Add(vt.Instantiate());
    VisualTreeAsset vt = Resources.Load<VisualTreeAsset>("Your_Uxml_Asset");
    vt.CloneTree(rootVisualElement);
}
2 Likes