How can add items in markup for user control?

Question

I have a user control that generates a series of arrow buttons. I want each button to display a custom user control. My custom arrow button navigation control looks like this when rendered:

When complete, clicking a button will display a user control below the arrows. Each arrow button needs to be tied to a custom user control containing unique functionality specific to that button. Currently I have a simple List<ArrowTab> Tabs { get; set; } property on the user control, and in the page_load of the page hosting the user control I add some sample tabs (seen above) programmatically, like this:

            TabWizard1.Tabs = new List<ArrowTab>
            {
                new ArrowTab
                {
                    Text = "Project Settings",
                    Selected = true
                },
                new ArrowTab { Text = "Groups" },
                new ArrowTab { Text = "Products" },
                new ArrowTab { Text = "Make Assignments" },
                new ArrowTab { Text = "Review Assignments" },
                new ArrowTab { Text = "Commitments" }
            };

This works for adding the button from the code behind but what I actually want is to add the button in the markup for the user control on the page and also associate a different custom user control to that button. For example, I want to do something like this:

    <uc:TabWizard ID="TabWizard1" runat="server">
        <items>
            <arrowTab Text="Project Settings">
                <uc:ProjectSettingsControl ID="projectSettings1" runat="server" />
            </arrowTab>
            <arrowTab Text="Groups">
                <uc:GroupsControl ID="groups1" runat="server" />
            </arrowTab>
            <arrowTab Text="Products">
                <uc:ProductsControl ID="products1" runat="server" />
            </arrowTab>
            <arrowTab Text="Make Assignments">
                <uc:MakeAssignmentsControl ID="makeAssignments1" runat="server" />
            </arrowTab>
            <arrowTab Text="Review Assignments">
                <uc:ReviewAssignmentsControl ID="reviewAssignments1" runat="server" />
            </arrowTab>
            <arrowTab Text="Commitments">
                <uc:CommitmentsControl ID="commitments1" runat="server" />
            </arrowTab>
        </items>
    </uc:TabWizard>

An example of someone already doing something similar is the Telerik RadPanel control.

<telerik:RadPanelItem Text="Mail" ImageUrl="Img/mail.gif" Expanded="True">
    <Items>
        <telerik:RadPanelItem ImageUrl="Img/mailPersonalFolders.gif" Text="Personal Folders" />
        <telerik:RadPanelItem ImageUrl="Img/mailDeletedItems.gif" Text="Deleted Items" />
        <telerik:RadPanelItem ImageUrl="Img/mailInbox.gif" Text="Inbox" />
        <telerik:RadPanelItem ImageUrl="Img/mailFolder.gif" Text="My Mail" />
        <telerik:RadPanelItem ImageUrl="Img/mailSent.gif" Text="Sent Items" />
        <telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="Outbox" />
        <telerik:RadPanelItem ImageUrl="Img/mailSearch.gif" Text="Search Folders" />
    </Items>
</telerik:RadPanelItem>

I have no idea how to create a user control that allows this behavior. Even just a nudge in the right direction would be beneficial.

Answer 1

The link Richard provided should point you in the right direction, but to answer some of your questions:

How do I allow child elements?

You can make a server control support child elements by marking the property with the PersistenceMode and DesignerSieralizationVisibility attributes. In your case, this property would be a collection of elements, like in the example below:

    /// <summary>
    /// Gets the columns collection.
    /// </summary>
    [Browsable(true)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    public GridColumnCollection Columns
    {
        get
        {
            if (columnsCollection == null)
            {
                if (columnsArrayList == null)
                {
                    this.EnsureChildControls();
                    if (columnsArrayList == null)
                        columnsArrayList = new ArrayList();
                }
                columnsCollection = new GridColumnCollection(columnsArrayList);
            }
            return columnsCollection;
        }
    }

How do I iterate over those elements in page load the user control?

The child element collection will be mapped to a property, and you can iterate over the collection to add the elements to your control.

foreach (GridColumn dataColumn in columnsCollection)
{
    var cell = new GridCell(dataColumn.HeaderStyle, dataColumn.HeaderText);
    item.Cells.Add(cell);
}

Do child items need to be user controls as well?

No, child items will be other server controls. Your items property will map to a collection of server controls, which in your case are the ArrowTab controls.

And finally, if the child items need to be their own user control then do those controls need some sort of ContentTemplate thing?

Yes, you would want to implement the ITemplate interface in your ArrowTab server control. The link that Richard provided should explain how to do this.