title: How can add items in markup for user control?
body: <p>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:</p>
  
  <p><img src="https://i.imgur.com/3xKvU.jpg" alt=""></p>
  
  <p>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 <code>List&lt;ArrowTab&gt; Tabs { get; set; }</code> 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:</p>
  
  <pre><code>            TabWizard1.Tabs = new List&lt;ArrowTab&gt;
              {
                  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" }
              };
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>    &lt;uc:TabWizard ID="TabWizard1" runat="server"&gt;
          &lt;items&gt;
              &lt;arrowTab Text="Project Settings"&gt;
                  &lt;uc:ProjectSettingsControl ID="projectSettings1" runat="server" /&gt;
              &lt;/arrowTab&gt;
              &lt;arrowTab Text="Groups"&gt;
                  &lt;uc:GroupsControl ID="groups1" runat="server" /&gt;
              &lt;/arrowTab&gt;
              &lt;arrowTab Text="Products"&gt;
                  &lt;uc:ProductsControl ID="products1" runat="server" /&gt;
              &lt;/arrowTab&gt;
              &lt;arrowTab Text="Make Assignments"&gt;
                  &lt;uc:MakeAssignmentsControl ID="makeAssignments1" runat="server" /&gt;
              &lt;/arrowTab&gt;
              &lt;arrowTab Text="Review Assignments"&gt;
                  &lt;uc:ReviewAssignmentsControl ID="reviewAssignments1" runat="server" /&gt;
              &lt;/arrowTab&gt;
              &lt;arrowTab Text="Commitments"&gt;
                  &lt;uc:CommitmentsControl ID="commitments1" runat="server" /&gt;
              &lt;/arrowTab&gt;
          &lt;/items&gt;
      &lt;/uc:TabWizard&gt;
  </code></pre>
  
  <p>An example of someone already doing something similar is the Telerik RadPanel control.</p>
  
  <pre><code>&lt;telerik:RadPanelItem Text="Mail" ImageUrl="Img/mail.gif" Expanded="True"&gt;
      &lt;Items&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailPersonalFolders.gif" Text="Personal Folders" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailDeletedItems.gif" Text="Deleted Items" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailInbox.gif" Text="Inbox" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailFolder.gif" Text="My Mail" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailSent.gif" Text="Sent Items" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailOutbox.gif" Text="Outbox" /&gt;
          &lt;telerik:RadPanelItem ImageUrl="Img/mailSearch.gif" Text="Search Folders" /&gt;
      &lt;/Items&gt;
  &lt;/telerik:RadPanelItem&gt;
  </code></pre>
  
  <p>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.</p>