Erstellen eines ContentControl-Elements

ContentControl-Elemente weisen eine einzige Content-Eigenschaft (Inhalt) auf, die die vom Steuerelement angezeigten Daten definiert. Die Content-Eigenschaft (Inhalt) kann einfach sein und nur eine Textzeichenfolge enthalten, oder sie kann komplex sein, wie z. B. ein Microsoft .NET Framework-Objekt. Falls Sie einem ContentControl-Element ein LayoutPanel-Steuerelement hinzufügen, wird das LayoutPanel-Steuerelement als Inhalt verwendet. Diesem Inhalt können Sie dann mehrere untergeordnete Elemente hinzufügen. Dadurch kann die Einschränkung auf ein einziges Inhaltselement umgangen werden.

Im folgenden Verfahren wird das Erstellen eines ContentControl-Elements (ein Button-Element) erläutert, dessen Content-Eigenschaft (Inhalt) auf ein LayoutPanel-Steuerelement (ein StackPanel-Element) festgelegt wird. Sie können dieses Verfahren auch für andere ContentControl-Elemente verwenden, die im Thema zu ContentControl (Typen) auf MSDN unter "Typen" (möglicherweise in englischer Sprache) aufgelistet sind.

Hinweis:

ContentControl-Elemente stehen in Microsoft Silverlight 1.0-Projekten nicht zur Verfügung. Sie können jedoch Objekte in einem Layoutpanel vom Typ Canvas in Ebenen anordnen (wobei sich ein TextBlock-Objekt oben im Panel befindet) und dann einen JavaScript-Ereignishandler einbinden, damit sich das Canvas-Element wie eine Schaltfläche oder ein anderes ContentControl-Element verhält. Ein Beispiel finden Sie unter Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung.

So erstellen Sie ein ContentControl-Element

1. Klicken Sie in der Werkzeugpalette auf der linken Seite von Microsoft Expression Blend auf die Schaltfläche Objektbibliothek . 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 Button aus.

   Das Symbol für das Button-Steuerelement wird über der Schaltfläche Objektbibliothek angezeigt und ist ausgewählt. Sie können nun der Zeichenfläche ein Button-Steuerelement hinzufügen.

   Tipp:
   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 Button-Steuerelement doppelklicken. Der Standardinhalt eines Button-Steuerelements ist die Zeichenfolge "Button".

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

   

   Tipp:
   Darüber hinaus können Sie der Zeichenfläche ein Steuerelement hinzufügen, indem Sie das Steuerelement in der Werkzeugpalette auswählen, auf die Zeichenfläche klicken und die Maus ziehen, um das umgebende BoundingBox-Element für das Steuerelement festzulegen.

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

3. Doppelklicken Sie unter Objekte und Zeitachsen auf das Button-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.

   Tipp:
   Darüber hinaus können Sie ein Objekt auf der Zeichenfläche aktivieren, indem Sie in der Werkzeugpalette zunächst das Auswahlwerkzeug  auswählen und dann auf das Objekt auf der Zeichenfläche doppelklicken.

4. Wählen Sie in der Werkzeugpalette das StackPanel-Steuerelement aus, entweder aus der Objektbibliothek oder aus einer Dropdownliste der häufig verwendeten Steuerelemente. Doppelklicken Sie auf das Symbol für das StackPanel-Steuerelement, um es als untergeordnetes Element innerhalb des Button-Objekts hinzuzufügen.

   Das StackPanel-Steuerelement ersetzt die Inhaltszeichenfolge des Button-Objekts. Sie können dies überprüfen, indem Sie unter Objekte und Zeitachsen die Option [Button] auswählen und dann die Content-Eigenschaft (Inhalt) in der Kategorie Allgemeine Eigenschaften des Eigenschaftenpanels anzeigen.

   Ein als untergeordnetes Element in einem Button-Objekt der Zeichenfläche hinzugefügtes StackPanel-Objekt

   

5. Das StackPanel-Steuerelement weist eine Höhe und Breite von 100 auf. Die minimale Höhe und Breite von 0 ist als Standardgröße festgelegt. Sie können die Verwendung des StackPanel-Steuerelements vereinfachen, indem Sie unter Objekte und Zeitachsen die Option [StackPanel] auswählen und dann in der Kategorie Layout des Eigenschaftenpanels die Width-Eigenschaft (Breite) in 150 Pixel (oder geräteunabhängigen Einheiten von ca.1/96 Zoll) und die Height-Eigenschaft (Höhe) in 75 Pixel ändern. Beachten Sie, dass die Größe der Schaltfläche automatisch geändert wird, wenn Sie das untergeordnete Element (StackPanel) ändern.

   Tipp:
   Sie können die Größe eines Objekts auf der Zeichenfläche auch ändern, indem Sie auf die Funktionsindikatoren an den Ecken des BoundingBox-Elements klicken und diese ziehen.

6. Während [StackPanel] unter Objekte und Zeitachsen ausgewählt ist, legen Sie die Orientation-Eigenschaft (Ausrichtung) in der Kategorie Layout des Eigenschaftenpanels auf Horizontal fest, sodass die untergeordneten Elemente im StackPanel-Element horizontal gestapelt werden. Diese Änderung der Eigenschaft wirkt sich erst dann auf die Anzeige des StackPanel-Elements auf der Zeichenfläche aus, wenn dem StackPanel-Element Elemente hinzugefügt werden.

7. Doppelklicken Sie unter Objekte und Zeitachsen auf das [StackPanel]-Objekt, um es zu aktivieren, sodass Sie untergeordnete Elemente hinzufügen können.

   Tipp:
   Anders als die meisten Benutzeroberflächenelemente können einige Layoutpanels (z. B. StackPanel und Grid) mehrere untergeordnete Elemente enthalten. Dies ist für die Strukturierung und das Layout des Anwendungsdesigns hilfreich. Weitere Informationen finden Sie unter Layout (Übersicht).

8. Wählen Sie in der Werkzeugpalette das Ellipsenwerkzeug aus, und zeichnen Sie dann auf der Zeichenfläche einen Kreis im StackPanel-Element. Wählen Sie dann das TextBox-Steuerelement aus der Werkzeugpalette aus, und zeichnen Sie es im StackPanel-Steuerelement. Die untergeordneten Elemente werden nebeneinander von links nach rechts gestapelt, da das StackPanel-Steuerelement, in dem sie enthalten sind, horizontal ausgerichtet ist. Wenn Sie einen Abstand zwischen den untergeordneten Elementen hinzufügen möchten, können Sie die Margin-Eigenschaften (Rand) der Elemente in der Kategorie Layout des Eigenschaftenpanels anpassen.

   Einem StackPanel-Objekt hinzugefügte untergeordnete Objekte

   

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