It is pretty common to visualize not only a single object, but a list of the same objects. To facilitate the usage of data collections, DataBind contains an own collection class (Slash.Unity.DataBind.Core.Data.Collection). This class can be used to store simple values or other data contexts to visualize them with the aid of GridItemsSetter (NGUI) and LayoutGroupItemsSetter (Unity UI).

Let's have a look at an example to present the usage of the collection and the setters. You can find the examples in the data package under Examples/Collection

Setting up the UI

The user interface of the example consists of a list of texts on the right which visualize the items in the collection and two buttons on the left to add a new item and to remove the last one.

The list of texts uses a GridLayoutGroup (Unity UI) to arrange them and update the position of the items when a new child is added or one is removed.

Setting up the data context

The data context contains a collection of item contexts which hold a Text data property. This data is the one we like to visualize in our UI.

#!c#

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="CollectionExampleContext.cs" company="Slash Games">
//   Copyright (c) Slash Games. All rights reserved.
// </copyright>
// --------------------------------------------------------------------------------------------------------------------
namespace Slash.Unity.DataBind.Examples.Collection
{
    using System.Linq;
    using Slash.Unity.DataBind.Core.Data;

    public class CollectionExampleContext : Context
    {
        #region Fields

        private readonly Property<Collection<CollectionExampleItemContext>> itemsProperty = new Property<Collection<CollectionExampleItemContext>>(new Collection<CollectionExampleItemContext>());

        #endregion

        #region Constructors and Destructors

        public CollectionExampleContext()
        {
            this.Items.Add(new CollectionExampleItemContext { Text = "This" });
            this.Items.Add(new CollectionExampleItemContext { Text = "Is" });
            this.Items.Add(new CollectionExampleItemContext { Text = "Data Bind" });
        }

        #endregion

        #region Properties

        public Collection<CollectionExampleItemContext> Items
        {
            get
            {
                return this.itemsProperty.Value;
            }
            set
            {
                this.itemsProperty.Value = value;
            }
        }

        #endregion

        #region Public Methods and Operators

        public void AddItem()
        {
            this.Items.Add(new CollectionExampleItemContext { Text = this.Items.Count.ToString() });
        }

        public void RemoveItem()
        {
            if (this.Items.Count > 0)
            {
                this.Items.Remove(this.Items.Last());
            }
        }

        #endregion
    }
}

#!c#

// --------------------------------------------------------------------------------------------------------------------
// <copyright file="CollectionExampleItemContext.cs" company="Slash Games">
//   Copyright (c) Slash Games. All rights reserved.
// </copyright>
// --------------------------------------------------------------------------------------------------------------------
namespace Slash.Unity.DataBind.Examples.Collection
{
    using Slash.Unity.DataBind.Core.Data;

    public class CollectionExampleItemContext : Context
    {
        #region Fields 

        private readonly Property<string> textProperty = new Property<string>();

        #endregion

        #region Properties

        public string Text
        {
            get
            {
                return this.textProperty.Value;
            }
            set
            {
                this.textProperty.Value = value;
            }
        }

        #endregion
    }
}

Additionally we have two public methods called AddItem and RemoveItem which are called from the user interface when the buttons are clicked. They perform the required logic to add/remove an item.

As you can see there is nothing really new here, the Collection can just be handled like every other data value. 

Doing the connection

Now that we have both the visual and the data side setup, we return to the Unity editor to add some stuff to our UI to define where and how our collection should be visualized.

Visualization of the items

First of all we need a prefab to define how the items are visualized. As the item context only consists of the Text value, we only need a Text control and a TextTextSetter to fetch the data from the context.

Other than that the prefab doesn't need something special. The data context is setup automatically by the setter when the list is filled.

Creating the collection items

The next thing we have to do is to define where the items for the collection should be created. This is done by adding an ItemsSetter.

The path has to be set to the name of the collection data property which is called Items in the example. Furthermore the prefab we have created earlier has to be referenced.

As the target it requires a Transform which should be the root of the item game objects.

If you start the scene now, we already see the initial items which we set up in the data context.

Modifying the collection during runtime

To show that changes in the collection are updated dynamically, we have two buttons in the example to add and remove an item.

To both buttons a ButtonClickCommand has to be added, so the method which is specified on the command is called when the button is clicked.

And that's all there is to do. If you click on one of the buttons you will see how the list is updated directly.

Congratulations, you created your first dynamic collection!

Hope this shows how to setup your own data collections and visualize them in your UI. Normal C# collections like List can be used directly as a data property, but the items setters won't update when the collection is changed. So better use the data collection class if your collections change during runtime.

Here are the steps you need to visualize your collection:

• Setup your UI with a single game object which should contain the items (e.g. GridLayoutGroup (Unity UI) or UIGrid (NGUI))
• Setup your data context by adding a data property for your collection
• Connect your UI and your data collection with a LayoutGroupItemsSetter (UnityUI) or GridItemsSetter (NGUI)

To make the creation of a data property for the collection even easier, have a look at the Data Context, Property and Collection.