iTranslated by AI
[UE5] How to Create a Slate Window with Tabs
Environment at Time of Writing
| Item | Version |
|---|---|
| Unreal Engine | 5.6.1 |
| OS | Windows 11 |
| Platform | Windows |
Overview
There are occasional opportunities to create a window using Slate.
In such cases, I often find myself wanting to separate functionality into tabs.
While looking at how other engine tools are built is the most practical approach,
honestly, digging through them can be quite tedious, so I created a simple sample and will provide a brief explanation.
What Was Created
The image below shows a nearly empty, simple window.
It contains a TextBox intended as a menu bar and two tabs.
It also includes window layout restoration, so feel free to rearrange the tab layout and restart the window.
It should open with the layout you had when you closed it.
Source Code
The code is publicly available at the link below.
To run it, create a Plugins folder in your project, clone it inside, build, and execute.
The essential parts are in the C++ file below, so if you just want to see the code, look there.
Steps to Create a Window with Tabs
Create a TabManager from the Created Window
There might be other ways to do this, but this is the fastest approach.
Pass the tab to Construct, then generate the TabManager from it.
Configure the Window Layout
Create a TabManagerLayout and configure how the layout should be arranged.
This is also where you decide whether to arrange them horizontally or vertically.
Tabs are added to the Stack created here.
Create and Configure Tabs
Create tabs for the defined layout and register them.
The key parts are TabManager->RegisterTabSpawner and Stack->AddTab.
Here, you register the tab and set its display options.
Configure Child Elements
Set up the child elements you want inside the window.
The important part is TabManager->RestoreFrom. This registers all the tab contents together.
Configure Window Layout Restoration
This is an extra feature.
It's a sample showing how to save and restore the window layout.
Use FLayoutSaveRestore to save to config, then restore the saved layout and overwrite the TabManagerLayout.
If you do this, call it before RestoreFrom. Important.
Summary
Slate can be a bit intimidating at first, but once you get the hang of it, it's convenient for registering functionality in an immediate-GUI-like manner.
Since you sometimes need C++ to call engine features, you'll likely use it fairly often.
Adding tabs gives tools a more polished look, so this was an introduction to creating them.
I hope this serves as a useful reference.
Discussion