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-Objekts (ein Button -Objekt) erläutert, dessen Content-Eigenschaft (Inhalt) auf ein Layoutpanel (ein StackPanel -Objekt) festgelegt wird. Sie können dieses Verfahren auch für andere ContentControl-Elemente verwenden, die im Thema ContentControl-Typen Cc295336.xtlink_newWindow(de-de,Expression.40).png (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 Cc295336.0d8b8d29-1af9-418f-8741-be3097d76eab(de-de,Expression.40).png. Wählen Sie im Objektepanel in der Kategorie Steuerelemente das Button -Steuerelement Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(de-de,Expression.40).png aus.

    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 -Objekt hinzufügen.

    tip noteTipp:

    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 im Werkzeugpanel auf das Button -Symbol doppelklicken. Der Standardinhalt eines Button -Objekts ist die Zeichenfolge "Button".

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

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(de-de,Expression.40).png

    tip noteTipp:

    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.

    tip noteTipp:

    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 -Steuerelement Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(de-de,Expression.40).png aus. 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.

    Die Inhaltszeichenfolge des Button -Objekts wird durch das StackPanel -Objekt ersetzt. Sie können dies überprüfen, indem Sie im Panel Objekte und Zeitachsen das [Button] -Objekt auswählen und sich dann im Eigenschaftenpanel in der Kategorie Allgemeine Eigenschaften die Content -Eigenschaft ansehen.

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

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(de-de,Expression.40).png

  5. Das StackPanel -Objekt weist eine Höhe und Breite von "100" und eine minimale Höhe und Breite von "0" (Standardgröße) auf. Sie können die Verwendung des StackPanel -Objekts vereinfachen, indem Sie im Panel Objekte und Zeitachsen das [StackPanel] -Objekt auswählen und dann im Eigenschaftenpanel in der Kategorie Layout für die Width-Eigenschaft (Breite) den Wert 150 und für die Height-Eigenschaft (Höhe) den Wert 75 festlegen. Beide Werte werden in Pixel (geräteunabhängige Einheiten von ca. 1/96 Zoll) angegeben.

    tip noteTipp:

    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ählen Sie im Panel Objekte und Zeitachsen das [StackPanel] -Objekt aus, setzen Sie im Eigenschaftenpanel in der Kategorie Layout die Orientation -Eigenschaft (Ausrichtung) auf Horizontal, sodass die untergeordneten Objekte im StackPanel -Objekt 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.

    tip noteTipp:

    Anders als die meisten Elemente der Benutzeroberfläche können einige Layoutpanels (z. B. das StackPanel - und das Grid -Panel) 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 im Werkzeugpanel das Ellipse-Symbol Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(de-de,Expression.40).png aus, und zeichnen Sie auf der Zeichenfläche einen Kreis im Innern des StackPanel -Objekts. Wählen Sie anschließend im Werkzeugpanel das TextBox -Symbol Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(de-de,Expression.40).png 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

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(de-de,Expression.40).png

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

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.