How to add elements to the markup for user control?

Question

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

When the button is clicked, the user control below the arrows will be displayed. Each arrow button must be associated with a user control containing unique functions specific to that button. I currently have a simple property List<ArrowTab> Tabs { get; set; } List<ArrowTab> Tabs { get; set; } List<ArrowTab> Tabs { get; set; } in the user control, and in the page_load of the page where the user control is placed, I add some example tabs (see above) programmatically, for example:

  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 to add a button from the code behind, but I really want to add the button to the markup for the user control on the page, and also associate another user setting with it. 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 pushing in the right direction would be helpful.

Answer 1

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

How to allow child elements?

You can customize child server management support elements by marking the property with the PersistenceMode and DesignerSieralizationVisibility attributes. In your case, this property will be a set of elements, as 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 to iterate over these elements on a page loads a user control?

The collection of child elements will be mapped to the property, and you can iterate through the collection to add elements to your control.

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

Are child elements needed as well as user controls?

No, child elements will be other server controls. The property of your objects will be displayed as a set of server controls, which in your case are ArrowTab .

And finally, if the children should be their own user control, then do these controls need some sort of ContentTemplate?

Yes, you would like to implement the ITemplate interface in your ArrowTab server element. The link provided by Richard should explain how to do this.

Answer 2

I believe that you need to create ASP.NET Server user control templates .