In our talk at Unite 2024 titled “Tackling UI Challenges in Football Manager 2025”, we explored, in the demo portion how users can create a simple player card in UITK and incorporate data binding to display dynamic UI. In this companion post, we provide you with the demo (attached at the end of this post) and we will remind you of the techniques used during the demo. We also provide you the demo project itself, which you can use with Unity 6 Preview! For more details about the project’s structure, please refer to the project’s README.md file.
This exercise is meant to display how fast you can get a working prototype through the UI Builder, complete with data binding and basic styling. The goal is not to deliver a launch-ready asset, but rather to help you get used to the UI Builder and its many features to get something efficient working as soon as possible.
For this exercise, we will use little to no coding, assuming that you already have a data source ready to be used. This data source does not have to be a Scriptable Object: it can work with any C# object in your project.
Imagine a sports management game where you are in charge of leading a team. You would be selecting and training its players. In order to make decisions, you would need to have access to a player’s information through a PlayerCard.
This demo provides you with a UXML file titled PlayerCard.uxml at various stages of development. Using these stages, you can either bind the information in the PlayerCard, or style the PlayerCard itself. As an exercise, try using data binding in TeamSheet.uxml so that the Template Containers of the PlayerCard display different players! Hint: you will need to edit the data binding setup found in the PlayerCard in order to achieve this.
This post, however, has two areas of focus: the runtime data binding section and the design section. Our aim is to demonstrate how designers can effectively collaborate with developers, streamlining the workflow to minimize dependencies and delays, this is not to say one must come before another, the order here is not important.
Runtime Data Binding in the UI Builder
Runtime data binding is our newest solution in Unity 6 Preview for displaying a UI with dynamic data. In short, to create a binding, you need the following:
- a Visual Element that needs to be updated with runtime data,
- a Data Source: any C# object in your project with information that should be displayed,
- (Note: the UI Builder cannot hold references to a Scene or a GameObject in it. This would require some code).
- a Data Source Path: a string representing the property from your Data Source which will be used to update your UI,
- a Binding Mode: the relationship between your data source and your Visual Element.
Here are some tips to consider when using data binding in the UI Builder:
You can bind a Visual Element’s UXML attributes and USS styles: this gives you flexibility to create more dynamic styling for your UI without C# code.
A Visual Element inherits its parent’s concatenated data source and data source path as a data source: for example, if a parent has a data source array and a data source path representing an element from that array [i], then the child will have data source array[i].
Use a Visual Element as a root container to set a Data Source for all other elements: this ensures that, unless explicitly stated otherwise, all of your Visual Elements will share a data source, thus making it easier to preview how different data sources affect your entire UXML document.
You can implicitly convert many data types when creating a binding: when creating a binding through the UI, the Binding Window tells you which properties in your C# object can be automatically converted to the value type that your chosen UXML attribute or USS style expects.
How to add a binding to a Visual Element:
Here, we have a Label which inherits the ScriptableObject JohnMaple of type PlayerData from its hierarchy. We will binds its Text UXML attribute.
Select the attribute by right-clicking on it, and select the “Add binding…” option:
This opens a binding window with pre-populated fields for your data source and your binding mode. In this case, using ToTarget for the binding mode ensures that our UI will reflect the data source’s property.
Focusing on the Data Source Path field pops up a list of compatible properties in our data source. Select the physical attribute to bind its value of type int to the label’s text, and click on the Add Binding button at the bottom of the window:
If done correctly, the Text attribute will seem disabled, with an icon indicating that the binding is resolved, meaning that the property physical is found in our PlayerData:
Your UXML attribute is now bound and its value is reflected in the Canvas!
For more information, consult the latest documentation on runtime data binding.
Designing and Styling Elements in the UI Builder
There are two primary methods for styling Visual Elements in the UI Builder, each with its own benefits.
Inline Styles: Inline styling involves directly adjusting the styles of a selected Visual Element in the inspector. This method is quick and straightforward, allowing for immediate design, but the styles applied this way are not reusable. There is a white vertical bar in the inspector to show that inline styles are being used on an element or used to override a selector, Inline styles are not the most performant way to design.
Selectors: Selectors are sets of styling rules that can be applied to multiple Visual Elements. A selector can define attributes like font style, font color, background color, alignment, and border thickness. The key advantage of selectors is their reusability; once defined, they can be applied to any Visual Element, and updates to the selector will automatically propagate to all elements using it.
To use a selector, first create new or open an existing style sheet, and use the “Add new selector” textbox to create a selector, to apply a selector to a visual element, simply drag the selector on top of the visual element you want to target.
For more information on selectors, visit Unity Manual on USS Selectors..
Additional Styling Techniques:
USS Variables: USS Variables function similarly to CSS variables. These variables can be applied to selectors in the UI Builder to enhance consistency. For example, defining a variable for border color can eliminate guesswork when applying border colors to multiple selectors. They are also invaluable for defining themes, such as dark or light modes for your UI.
For more information on variables, visit Unity Manual on USS Custom Properties.
Extracting Inline Styles to Selectors: Previously, if you made changes to a Visual Element that had a selector, you needed to manually replicate those changes in the selector. Now, there’s a quick and easy way to make inline changes and extract those changes to any selector applied to the Visual Element, or even create a new selector via the context menu. You can choose to extract a single override or all overrides at once.
We hope that this recap post provides you with a clear understanding of the data binding and design strategies we discussed. Thank you for reading!
The demo is available here: unite-2024-uitk-demo.zip (10.0 MB)