如何在标记中添加项目以供用户控制？

Question

我有一个用户控件，可以生成一系列箭头按钮。我希望每个按钮都显示一个自定义用户控件。渲染时，我的自定义箭头按钮导航控件如下所示：

完成后，单击按钮将在箭头下方显示用户控件。每个箭头按钮都需要绑定到包含特定于该按钮的唯一功能的自定义用户控件。目前我在用户控件上有一个简单的List<ArrowTab> Tabs { get; set; }属性，在托管用户控件的页面的page_load中，我以编程方式添加了一些示例选项卡（如上所示），如下所示：

            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" }
            };

这适用于添加后面代码中的按钮，但我真正想要的是在页面上为用户控件添加标记按钮，并将不同的自定义用户控件与该按钮相关联。例如，我想做这样的事情：

    <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>

一个已经做类似事情的人的例子是Telerik RadPanel控件。

<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>

我不知道如何创建允许此行为的用户控件。即使只是朝着正确的方向轻推也是有益的。

Answer 1

理查德提供的链接应指向正确的方向，但要回答您的一些问题：

如何允许子元素？

您可以通过使用PersistenceMode和DesignerSieralizationVisibility属性标记属性来使服务器控件支持子元素。在您的情况下，此属性将是元素的集合，如下例所示：

    /// <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;
        }
    }

如何在页面中迭代这些元素加载用户控件？

子元素集合将映射到属性，您可以遍历集合以将元素添加到控件中。

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

子项目也需要是用户控件吗？

不，子项将是其他服务器控件。您的items属性将映射到服务器控件的集合，在您的情况下是ArrowTab控件。

最后，如果子项需要是他们自己的用户控件，那么这些控件是否需要某种ContentTemplate？

是的，您希望在ITemplate服务器控件中实现ArrowTab接口。理查德提供的链接应解释如何执行此操作。

Answer 2

我相信你所追求的是Building Templated Custom ASP.NET Server Controls。