Tips on generating GUI from C# attributes in WinForms

Question

Context

I have a very large number of small classes or structures. The implementation details of these classes are not important, but for each of these there will be a few simple built-in data type properties that I want to expose so that they can be edited in a WinForms control. These will be completely different from class to class though. For example:

class SleepAction : IGameAction
{
    public float Duration { get; set; }
}

class TeleportCharacterAction : IGameAction
{
    public string CharacterId { get; set;
    public string DestinationRoomId { get; set; }
    public Vector2 DestinationPosition { get; set; }
}

The problem is that I wanted to have a single WinForms control that is capable of editing all of these object types. There would be a dropdown list of all the class types on top, and when selecting an item from this dropdown list, the interface would change to accomodate the properties of that type, as well as create an instance of that type to store the data.

At first I was considering handcrafting each of these interfaces, possibly using a TabControl object, one tab per class, with the tabs hidden. But then the number of classes grew exponentially, so I'm turning to some other solution, probably using attributes and reflection. I'm just not sure how to get started.

What I have in mind now is something like:

class ActionEditorControl : UserControl
{
    void ChangeEditorMode(Type type)
    {
        // Clear all GUI interface
        // Create object of type Type with default constructor
        // Use Type metadata to generate new GUI interface
        // Databind new interface to object properties
    }

    object GetObject()
    {
        // Return current object
    }
}

And on my model objects I could use attributes to add the necessary metadata:

class SleepAction : IGameAction
{
    [FieldLabel("Duration")]
    [FieldType("NumericSpinner")]
    public float Duration { get; set; }
}

class TeleportCharacterAction : IGameAction
{
    [FieldLabel("Character")]
    [FieldType("CharacterList")]
    public string CharacterId { get; set;

    [FieldLabel("Room")]
    [FieldType("RoomList")]
    public string DestinationRoomId { get; set; }

    [FieldLabel("Position")]
    [FieldType("VectorPicker")]
    public Vector2 DestinationPosition { get; set; }
}

Of course I'd need to teach my control how to interpret these attributes. Now for my actual questions.

Specific Questions

Would this work?
Is there a better alternative to solving this problem that I'm overlooking?
How to deal with the placement or layout of the controls in the interface?
Finally, I've never used custom attributes before. Any good example to get me started?

quip quip · Accepted Answer · 2012-02-21T23:53:20

Yes, this should work, I have built something similar for generating dynamic search dialogs based on entities.

Custom attributes can identify the properties that should appear on the form. The form can then generate controls for those properties and use databinding to link the control back to the property on the object.

A TableLayoutPanel can help with the layout of the generated controls. One column could store the label objects and the second column could store the control (textbox, etc). Or several sets of these if you want more columns.

Working with Attributes

Since you have a type, you can search each property for your special attributes:

foreach (var property in searchObjectType.GetProperties())
{
    var labelAttrib = (FieldLabelAttribute)property.GetCustomAttributes(typeof(FieldLabelAttribute), false).FirstOrDefault();
    var typeAttrib = (FieldTypeAttribute)property.GetCustomAttributes(typeof(FieldTypeAttribute), false).FirstOrDefault();
 }

Table Panel:

Once you know you need to build a control, figure out what kind of control you're going to build: (This assumes you have an attribute with an Order property so you know 'where' to place the control in the grid. This example is based on five columns, being label, control, spacer, label, control):

if (type == typeof(string))
{
  generatedControl = new Textbox();
  generatedControl.DataBindings.Add("Text", myObject, property.Name);
}

And then add the control to the table (this assumes you created a label control):

pnlLayout.Controls.Add(label, (myAttrib.Order % 2 * 3), myAttrib.Order / 2);

pnlLayout.Controls.Add(generatedControl, (myAttrib.Order % 2 * 3) + 1, myAttrib.Order / 2);

Tips on generating GUI from C# attributes in WinForms

2 Answers