NGUI Dynamic Layout Controls – Update

Over the last two weeks I’ve made some good progress on the layout controls for Unity using NGUI. I’m very close to having my old UIs completely replaced which means that I’m about ready to start polishing up everything and making it available for other people to use! In the process of replacing all of my old Unity UI code with my new NGUI controls I’ve uncovered a lot of bugs and design mistakes in my controls and fixed them. I also added quite a bit of functionality.

Two way data binding is now possible. This means that not only will the UI change based on the data context provided, but the UI can change properties on the data context. This is required for UIs that have input elements like checkboxes. I created a LayoutCheckbox so that checkboxes work in layouts and work with two way data binding. I still need to create a LayoutTextbox.

Data bindings can now support value converters. These allow you to massage values from your data context into what your control needs. As an example of this, you might have an “Updated” property on one of your game classes and you want to use a different font when it is true. Instead of having the class keep track of the fonts as well, you can create a converter that will be used by a data binding that will allow the data binding to get the bool from the class and set the correct font.

Previously, only LayoutScrollViewer had a max size property that allowed you to specify the maximum size a scroll viewer would take up in the layout. This has been moved to LayoutCapable (the layout base class) and concrete size has been added. Now all controls honor maximum sizes and absolute concrete sizes if you wish to specify them.

I also added a Visible property to LayoutCapable. This allows for data binding on visibility, and layout controls will no longer create space for controls that are invisible.

Here’s a short example of a much more complex UI that I’ve built using the layout controls. To show off the power of data binding, I’m showing the exact same UI with an empty data context and with a fully populated data context:

The demo makes heavy use of the ItemsControl, binding it to an ObservableCollection of objects that I create when the UI opens. The add and remove buttons directly affect those collections which in turn update the ItemsControls. I didn’t show how the UI got its data source, but I set it in some code.