4

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

完成后，单击按钮将在箭头下方显示用户控件。每个箭头按钮都需要绑定到包含特定于该按钮的独特功能的自定义用户控件。目前，我在用户控件上有一个简单的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>

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

4

2 回答 2

3

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

如何允许子元素？

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理查德提供的链接应该解释如何做到这一点。

于 2012-05-09T15:52:27.780 回答
2

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

于 2012-05-09T15:15:36.163 回答