Zeichnen eines Content-Steuerelements

ContentControl-Elemente weisen eine einzige Content-Eigenschaft 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 Objekte hinzufügen. Dadurch kann die Einschränkung auf ein einziges Inhaltsobjekt 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 ContentControl-Typen (möglicherweise in englischer Sprache) in MSDN unter "Typen" aufgelistet sind.

So erstellen Sie ein ContentControl-Element

1. Klicken Sie im Werkzeugpanel auf der linken Seite des Microsoft Expression Blend-Anwendungsfensters auf Objekte . Wählen Sie im Objektepanel in der Kategorie Steuerelemente das Steuerelement Button aus der Liste.

   Das Symbol für das Button-Steuerelement wird im Werkzeugpanel über der Schaltfläche Objekte 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 unterhalb der Schaltfläche Objekte angezeigt, sodass Sie diese schnell hinzufügen können.

2. Sie können der Zeichenfläche eine Schaltfläche hinzufügen, indem Sie auf das Werkzeugpanelsymbol 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 im Werkzeugpanel auswählen, auf die Zeichenfläche klicken und die Maus ziehen, um das 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. Wählen Sie im Objektepanel in der Kategorie Steuerelemente unter Panels das StackPanel. Doppelklicken Sie auf das Symbol für das StackPanel-Steuerelement, um es zur Zeichenfläche hinzuzufügen.

4. Ziehen Sie im Panel Objekte und Zeitachsen das StackPanel-Objekt auf das Button-Objekt.

   Das StackPanel-Steuerelement ersetzt die Inhaltszeichenfolge des Button-Objekts. Sie können dies überprüfen, indem Sie im Panel Objekte und Zeitachsen die Option [Button] auswählen und dann im Eigenschaftenpanel in der Kategorie AllgemeineEigenschaften die Content-Eigenschaft anzeigen.

   Ein als untergeordnetes Objekt 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 im Panel Objekte und Zeitachsen die Option [StackPanel] auswählen und dann im Eigenschaftenpanel in der Kategorie Layout die Width-Eigenschaft in 150 Pixel (oder geräteunabhängige Einheiten von ca. 1/96 Zoll) und die Height-Eigenschaft in 75 Pixel ä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. Damit sich die Größe des Button-Objekts automatisch ändert, wenn Sie die Größe seines untergeordneten Objekts (des StackPanel-Objekts) ändern, wählen Sie das Button-Objekt aus und setzen dann im Eigenschaftenpanel in der Kategorie Layout die Width- und Height-Eigenschaft auf Auto.

7. Während [StackPanel] im Panel Objekte und Zeitachsen ausgewählt ist, setzen Sie im Eigenschaftenpanel in der Kategorie Layout die Orientation-Eigenschaft auf Horizontal, sodass die untergeordneten Objekte im StackPanel-Element horizontal gestapelt werden.

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

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

9. Wählen Sie aus dem Werkzeugpanel die Option Ellipse, und zeichnen Sie auf der Zeichenfläche einen Kreis im Innern des StackPanel-Elements. Wählen Sie anschließend aus dem Werkzeugpanel das TextBox-Objekt aus, und ziehen Sie es ins Innere des StackPanel-Objekts. Die untergeordneten Objekte werden nebeneinander von links nach rechts gestapelt, weil das StackPanel-Objekt, in dem sie enthalten sind, horizontal ausgerichtet ist. Wenn Sie einen Abstand zwischen den untergeordneten Objekten hinzufügen möchten, können Sie im Eigenschaftenpanel in der Kategorie Layout die Margin-Eigenschaften anpassen.

   Einem StackPanel-Objekt hinzugefügte untergeordnete Objekte

   

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