Window Framework for Unity UI Toolkit

USS Style Sheets

Window Framework uses the Unity USS stylesheet system for display settings. The Unity USS system works much like the HTML stylesheet standard with additional functionality to meet the needs of the environment. This gives us a powerful tool for creating themes to meet any need and the option to set that theme at any time.

The default stylesheet comes as basic as possible so that modifications are easy. There are a few named areas that have inline styles applied in code. These are for areas such as the header label so that the text overflow is rendered in a reliable fashion. The Content section, so that wrapping is properly applied, and the Footer Toolbar, again so overflow is properly handled. These can be edited in code or new values applied after window creation. Window Framework comes with the following defined areas for styling:
.windowFrame
.windowFrameLocked
#windowFrameHeader
#windowFrameTitle
#windowFrameOptionsMenu
#windowFrameContent
#windowFrameFooter
#windowFrameFooterToolbar
#windowFrameResizeArea
#Tooltip
#Tooltip > label
#ContextMenu
#ContextMenu > Label


You may notice that most items are using named calls (#xxx) which uses the visual elements defined name to apply the style, while the first uses a standard style class call (.xxx). The window's name is set by the programmer and is unreliable for style calls so the style class is added, whereas named child sections in the code have fixed names that never change and can be relied on for existence.

Creating New Stylesheets Using UI Builder

The Window Framework is UI Builder compatible and will show as a custom control so that you can use the visual features of the interface while creating your USS Style sheets. We have included a WindowFrameworkStylingTemplate.uxml file that has a single window loaded with the default stylesheet attached as shown below, you can also take note of the window options that are available on the right hand inspector. Some of these settings need a runtime environment to work but other like size and header,footer options all work. Entering preview will even allow you to move and resize the window so you can see how your new style reacts in use without having to enter play mode.

One thing to note is that the positioning system reacts strangly in UI builder, it is due to the absolute positioning and location load system built into the custom control and should be left in the upper left selection so that the rendered window does not move around on you during UI Builder GUI updates.

The fastest way to get started would be to make a duplicate of the default stylesheet, In the project window select the WindowFrameDefault.uss file and press CTRL+D to make a duplicate. Name the new file something you will remember and take note of the path, it should be within a resource folder or a child of a resource folder.

Now from within UI Builder you can attach the new stylesheet to the document, this document is meant to be used like scratch paper because not all style elements will be applied until the file gets saved so do not use your actual game UI documents for this unless you know what your doing as it will be in constant change and may cause undesired results. After adding the new stylesheet simply delete the old reference and save the file. You can now modify the new style sheet to meet the desired look and feel. Once you are happy with your changes make sure to save again to write all USS data file changes to disk.

Applying New Styles

Applying styles is simple and the Window Framework has a style manager to do it. This manager contained in the Window Framework Controller will tell all window frames to set the newly selected stylesheet, also any new windows will automatically use the selected stylesheet.

Player Theming

This feature is currently disabled because at the time of this writing, Unity does not support the loading of Style Sheet resources at runtime. We cannot imagine that this will be the case for long so the underlying system is there just disabled and hidden in the inspector. It will create theme folders in the persistent data directory, show them in the selector and clean up on destroy so it works…
BUT, as stated before, because Unity itself will not allow the Style Sheet to be loaded at runtime, the style sheets reference is always null. We are going to get this working so we are leaving the underlying support logic in the system, just disabled for now, we will enable this feature and publish an updated as soon as we can figure out a way around the Unity limitation or, hopefully, Unity adds the load at runtime ability.