Wie können Elemente in Markup für die Benutzersteuerung hinzugefügt werden?

Question

Ich habe eine Benutzersteuerung, die eine Reihe von Pfeiltasten erzeugt. Ich möchte, dass jede Schaltfläche eine benutzerdefinierte Benutzersteuerung anzeigt. Meine benutzerdefinierte Pfeiltasten-Navigationssteuerung sieht so aus, wenn sie gerendert wird:

Wenn Sie eine Schaltfläche angeklickt haben, wird unter den Pfeilen eine Benutzersteuerung angezeigt. Jede Pfeilschaltfläche muss mit einem benutzerdefinierten Steuerelement verknüpft werden, das eine für diese Schaltfläche spezifische Funktionalität enthält. Derzeit habe ich eine einfache List<ArrowTab> Tabs { get; set; } Eigenschaft auf dem Benutzersteuerelement, und in der page_load der Seite, die das Benutzersteuerelement hostet, füge ich einige Beispielregisterkarten (siehe oben) programmatisch hinzu, wie folgt:

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

Dies funktioniert für das Hinzufügen der Schaltfläche aus dem Code hinter, aber was ich eigentlich will, ist die Schaltfläche in das Markup für die Benutzersteuerung auf der Seite hinzufügen und auch eine andere benutzerdefinierte Benutzersteuerung zu dieser Schaltfläche zuordnen. Ich möchte zum Beispiel so etwas wie dies tun:

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

Ein Beispiel dafür, dass jemand bereits etwas Ähnliches tut, ist das Telerik RadPanel-Steuerelement.

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

Ich habe keine Ahnung, wie ich eine Benutzersteuerung erstellen kann, die dieses Verhalten ermöglicht. Selbst ein kleiner Hinweis in die richtige Richtung wäre hilfreich.

Answer 1

Der von Richard angegebene Link sollte Sie in die richtige Richtung führen, aber um einige Ihrer Fragen zu beantworten:

Wie kann ich untergeordnete Elemente zulassen?

Sie können ein Server-Steuerelement dazu bringen, untergeordnete Elemente zu unterstützen, indem Sie die Eigenschaft mit dem PersistenceMode y DesignerSieralizationVisibility Eigenschaften. In Ihrem Fall wäre diese Eigenschaft eine Sammlung von Elementen, wie im folgenden Beispiel:

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

Wie iteriere ich über diese Elemente in der Seite laden die Benutzersteuerung?

Die Sammlung der untergeordneten Elemente wird einer Eigenschaft zugeordnet, und Sie können über die Sammlung iterieren, um die Elemente zu Ihrem Steuerelement hinzuzufügen.

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

Müssen untergeordnete Elemente auch Benutzerkontrollen sein?

Nein, untergeordnete Elemente sind andere Server-Steuerelemente. Ihre items-Eigenschaft wird auf eine Sammlung von Server-Steuerelementen abgebildet, die in Ihrem Fall die ArrowTab Kontrollen.

Und schließlich, wenn die untergeordneten Elemente ihre eigenen Benutzer-Steuerelement sein müssen, benötigen diese Steuerelemente eine Art von ContentTemplate Sache?

Ja, Sie sollten die Option ITemplate Schnittstelle in Ihrem ArrowTab Server-Kontrolle. Der Link, den Richard zur Verfügung gestellt hat, sollte erklären, wie man das macht.

Answer 2

Ich glaube, was Sie wollen, ist Erstellen von vorgefertigten benutzerdefinierten ASP.NET-Server-Steuerelementen .