Erstellen eines ItemsControl-Elements

  • Artikel

Diese Seite bezieht sich auf WPF und Silverlight 2

ItemsControl-Elemente weisen eine Items-Eigenschaft (Element) auf, die eine Auflistung von untergeordneten Elementen enthalten kann. Sie können jedem Typ der Elementauflistung untergeordnete Elemente hinzufügen oder eine Reihe von Elementen aus einer Datenquelle mithilfe von Datenbindung anzeigen. ItemsControl-Elemente weisen weder eine Content-Eigenschaft (Inhalt) noch eine Header-Eigenschaft (Kopfzeile) auf. Untergeordnete Elemente werden in das ItemsHost-Element des ItemsControl-Elements eingefügt, bei dem es sich im Falle eines ListBox-Steuerelements um ein StackPanel-Element handelt, bei dem die Elemente in einem vertikalen Stapel angeordnet werden. Das ItemsHost-Element wird in Microsoft Expression Blend unter Objekte und Zeitachsen erst angezeigt, wenn Sie die Vorlage des ItemsControl-Elements bearbeiten.

Im folgenden Verfahren wird gezeigt, wie Sie ein ItemsControl-Element (ein ListBox-Steuerelement) erstellen können und der Elementauflistung Elemente hinzufügen. Sie können dieses Verfahren bei anderen ItemsControl-Elementen verwenden, die unter "Typen" im Thema ItemsControl (Typen) in MSDN (möglicherweise in englischer Sprache) aufgeführt sind. Informationen zum Anzeigen einer Reihe von Elementen aus einer Datenquelle finden Sie im Thema Weiterführende Themen: Erstellen eines RSS-Newsreaders.

Cc294882.alert_note(de-de,Expression.10).gifHinweis:

ItemsControl-Elemente sind in Microsoft Silverlight 1.0-Projekten nicht verfügbar. Sie können jedoch TextBlock-Objekte in einem Layoutpanel vom Typ Canvas schichten und dann einen JavaScript-Ereignishandler einbinden, um die Elemente ein- bzw. auszublenden. Weitere Informationen zu JavaScript finden Sie unter Silverlight-Skripting- und Mausereignisse (möglicherweise in englischer Sprache).

So erstellen Sie ein ItemsControl-Element

  1. Klicken Sie in der Werkzeugpalette auf der linken Seite von Expression Blend auf die Schaltfläche Objektbibliothek Cc294882.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png. Klicken Sie auf der Registerkarte Steuerelemente auf Systemsteuerelemente (falls diese Option noch nicht ausgewählt ist), und wählen Sie dann aus der Liste die Option ListBoxCc294882.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png aus. Das Symbol für das ListBox-Steuerelement wird über der Schaltfläche Objektbibliothek angezeigt und ist ausgewählt. Sie können nun der Zeichenfläche ein ListBox-Steuerelement hinzufügen.

    Cc294882.alert_tip(de-de,Expression.10).gifTipp:

    Die am häufigsten verwendeten Benutzeroberflächenelemente (wie das Button-Steuerelement) werden bereits in Dropdownlisten über der Schaltfläche Objektbibliothek angezeigt, sodass Sie sie schnell hinzufügen können.

  2. Sie können der Zeichenfläche eine Schaltfläche hinzufügen, indem Sie auf das Werkzeugpalettensymbol für das ListBox-Steuerelement doppelklicken.

    Ein auf der Zeichenfläche erstelltes ListBox-Objekt mit der Standardgröße und der Standardposition (oben links)

    Cc294882.cd6e2b8c-8640-474d-81b3-5c476113947a(de-de,Expression.10).png

    Cc294882.alert_tip(de-de,Expression.10).gifTipp:

    Darüber hinaus können Sie der Zeichenfläche ein Steuerelement hinzufügen. Wählen Sie hierfür das Steuerelement in der Werkzeugpalette aus, klicken Sie auf die Zeichenfläche, und ziehen Sie die Maus, um das umgebende Rechteck für das Steuerelement festzulegen.
    Cc294882.alert_tip(de-de,Expression.10).gifTipp:

    Wenn ein Designelement der Benutzeroberfläche, wie z. B. ein ListBox-Steuerelement, der Zeichenfläche hinzugefügt wurde, wird es zu einem Objekt in der Anwendung.

  3. Doppelklicken Sie unter Objekte und Zeitachsen auf das ListBox-Objekt, um es zu aktivieren. Eine gelbe Hervorhebung wird um das Element angezeigt. Durch das Aktivieren eines Objekts wird das Hinzufügen eines untergeordneten Elements ermöglicht.

    Cc294882.alert_tip(de-de,Expression.10).gifTipp:

    Darüber hinaus können Sie ein Objekt auf der Zeichenfläche aktivieren, indem Sie in der Werkzeugpalette zunächst das Auswahlwerkzeug Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,Expression.10).png auswählen und dann auf das Objekt auf der Zeichenfläche doppelklicken.

  4. Zeichnen Sie mehrere Formen in das ListBox-Steuerelement, und verwenden Sie hierzu Elemente aus der Werkzeugpalette wie das TextBlock-Steuerelement Cc294882.42165963-00f7-4a33-abcd-b0849edebada(de-de,Expression.10).png, das Button-Steuerelement Cc294882.05df1779-a68f-436b-b834-a91b7995a3ec(de-de,Expression.10).png oder das Rectangle-Steuerelement Cc294882.ae750268-92e8-403a-9e07-b662da4e9e1e(de-de,Expression.10).png. Beachten Sie, wie diese untergeordneten Elemente vom ListBox-Steuerelement in einem vertikalen Stapel angeordnet werden:

    Einem ListBox-Objekt hinzugefügte untergeordnete Objekte

    Cc294882.926bd9e5-e1d9-47a3-a37a-33cd351984b4(de-de,Expression.10).png

    Cc294882.alert_note(de-de,Expression.10).gifHinweis:

    Wenn Sie in ItemsControl-Elementen mehr Elemente hinzufügen als dort hineinpassen, wird beim Ausführen der Anwendung eine Bildlaufleiste angezeigt. Dadurch können die zusätzlichen Elemente angezeigt werden.
    Cc294882.alert_tip(de-de,Expression.10).gifTipp:

    Sie können die Anordnung von Elementen in der Liste ändern, indem Sie die Objekte unter Objekte und Zeitachsen ziehen und ablegen. Sie können auch das Auswahlwerkzeug Cc294882.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,Expression.10).png verwenden, um die Elemente auf die Zeichenfläche zu ziehen.

  5. Sie können im Fenster Auflistungs-Editor die Elemente im ListBox-Steuerelement anzeigen und weitere Elemente hinzufügen. Klicken Sie auf die Schaltfläche Elemente in dieser Auflistung bearbeiten Cc294882.180d50dc-77e2-4d23-a353-1822e9056f2f(de-de,Expression.10).png neben der Items (Collection)-Eigenschaft (Elementauflistung) im Eigenschaftenpanel, um den Auflistungs-Editor zu öffnen.

  6. Erstellen Sie das Projekt (F5), um die geänderte Anwendung anzuzeigen.