Dynamic UI Layout in Unity using NGUI

I’ve spent a lot of time writing user interfaces using XAML. I loved (and hated) it. XAML has a ton of power and you can create some pretty amazing interfaces with creative use of the controls Microsoft have provided in WPF and Silverlight and data binding. None of that exists in Unity. NGUI is a plug-in for Unity that you can buy in the asset store that improves the UI story quite a bit. In fact, many Unity devs say that they wouldn’t use anything else. However, the creation of dynamic UIs still require quite a bit of code behind. I’ve been working on a game that involves a lot of UI with different amounts of information, and I finally tired of writing a lot of repetitive UI code. I longed for my days writing XAML – maybe I’m strange. To that end, I started working on a toolkit of controls to emulate some of the great features in XAML. Here’s my introductory overview video: http://youtu.be/Teglz9-dgU8. I need to stress that this is very early in development and that I’m learning as I go how to best demo these tools.

While that demo is nice, it certainly doesn’t cover everything I’ve done, and possibly some of the cooler features. In that video I cover my version of ItemsControl and StackPanel, simple data binding, commands, and some box model features. I have created more than those though, and I want to briefly list them here. As I mentioned in my video, if there is enough interest I’ll do videos going into more depth on each of these controls.

Scroll Viewer: I’ve created my own version of a scroll viewer. It allows you to place other layout capable controls inside it to scroll them around. It handles the placement of the content and the scrollbars to ensure that it stays inside its available area. In the demo video you can see a maximum size being set and how the scroll viewer responds to changes in the contained stacking panel’s layout.

Grid (For now, I have called it UILayoutTable to match an NGUI convention): Similar to the Grid in XAML you create row and column definitions, with the different sizing options proportional, auto, and absolute and shared size groups so that two grids can share row or column sizes (this is especially useful when creating a table with dynamic contents for row or column headers). This also allows you to do some simple alignments. The demo video starts with 2 rows and 3 columns all proportionally sized (they get an equal amount of space). The first column is then set to auto to show how it shrinks to the minimum size needed to contain the column’s contents, and the other two columns increase in size to take up half the remaining space. Then a row is added and one of the labels is placed on the new row.

TabPanel: Will automatically create tab buttons, with tab strip placement options, to view different tabs of UI elements. The video demonstrates how the tab panel works, showing two different locations for the tab strip and that creating a new tab is as easy as adding a new child to the TabPanel (the demo accomplishes this by duplicating one of the children.)

Data Binding supports binding paths so that you can drill down into a source or target using ‘.’ notation just like you would access the properties in code. For example, you can have a binding path of “SomeVectorProperty.x” to get just the x component of a vector stored at “SomeVectorProperty”.