Freigeben über


Steuerelemente (Übersicht)

Diese Seite bezieht sich auf WPF und Silverlight 2

In Microsoft Expression Blend steht Ihnen eine umfangreiche Liste von Steuerelementen zur Verfügung, mit denen Sie die Benutzeroberfläche Ihrer Windows Presentation Foundation-Anwendung (WPF) und Silverlight 2-Anwendung vielseitig gestalten können.

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

Eine Liste der in Microsoft Silverlight 1.0-Projekten verfügbaren Steuerelemente finden Sie im Abschnitt zu den Steuerelementen unter Silverlight 1.0 - Übersicht.

In Expression Blend haben Sie vielfältige Möglichkeiten zur Erstellung Ihrer Benutzeroberfläche, die weit über die Möglichkeiten hinausgehen, die Standard- oder Systemsteuerelemente von WPF bieten. Sie haben die Möglichkeit, Steuerelemente nach Bedarf anzupassen und zu gestalten, damit sie sich genau auf die gewünschte Weise verhalten. Mithilfe der Ressourcen in Expression Blend können Sie den benutzerdefinierten Steuerelementen ein attraktives und charakteristisches Aussehen verleihen und dadurch ein individuelles Erscheinungsbild Ihrer Anwendung oder eine konsistente Benutzeroberfläche für alle Anwendungen sicherstellen. Einer der größten Vorteile des Bearbeitungsmodells für Steuerelemente in Expression Blend liegt darin, dass Designer die Darstellung einer Anwendung entwerfen, während Entwickler gleichzeitig die Programmlogik schreiben. Da ein Designer das Design unmittelbar erstellen kann, geht es beim Wechseln vom Modell zur Implementierung nicht verloren.

Was sind Steuerelemente?

Steuerelemente (oder Designelemente der Benutzeroberfläche) sind die sichtbaren Komponenten einer Anwendung. Steuerelemente (wie Schaltflächen oder Listen mit auswählbaren Elementen) ermöglichen den Benutzern die Interaktion mit der Anwendung. Wenn Sie die in Expression Blend verfügbaren Steuerelemente kennen und wissen, wie sie angepasst werden, können Sie das Aussehen und Verhalten Ihrer Anwendung genau an Ihre Wünsche anpassen.

In Expression Blend ist es möglich, mit Steuerelementen visuell auf der Zeichenfläche zu arbeiten und ihre Dastellung und ihr Verhalten im Eigenschaftenpanel und im Interaktionspanel zu konfigurieren. Sie können beispielsweise der Zeichenfläche ein Button-Steuerelement (Schaltfläche) hinzufügen und sein Aussehen ändern, indem Sie die entsprechenden Werte im Eigenschaftenpanel ändern. Wenn auf die Schaltfläche geklickt wird, können Sie eine Animationszeitachse starten, indem Sie im Interaktionspanel einen Ereignisauslöser für die Schaltfläche einfügen.

Neben diesen einfachen Aktionen können Sie die folgenden Schritte mit einem Steuerelement ausführen:

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Kategorien von Steuerelementen

In Expression Blend stehen Ihnen viele verschiedene Steuerelementtypen zur Verfügung, mit denen Sie schnell eine Anwendung mit charakteristischem Aussehen entwerfen können.

Alle Steuerelemente sind in der Objektbibliothek verfügbar. Klicken Sie im unteren Bereich der Werkzeugpalette auf die Schaltfläche Objektbibliothek Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png. Die Werkzeugpalette befindet sich an der linken Seite von Expression Blend. Wenn Sie in der Objektbibliothek ein Element der Benutzeroberfläche auswählen, wird das Symbol für dieses Element über der Schaltfläche Objektbibliothek angezeigt. Auf diese Weise können Sie das Element zu einem späteren Zeitpunkt schnell und einfach erneut auswählen. Die gängigsten Elemente der Benutzeroberfläche werden bereits über der Schaltfläche Objektbibliothek angezeigt, sodass sie schnell auffindbar sind.

Die folgende Abbildung zeigt die Zeichenfläche, nachdem einige der üblichen Elemente der Benutzeroberfläche als Objekte hinzugefügt wurden. Das Stiftwerkzeug Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(de-de,Expression.10).png generiert ein Pfadobjekt Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(de-de,Expression.10).png. Das Bildsymbol Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(de-de,Expression.10).png wird in der Werkzeugpalette angezeigt, nachdem das Image-Steuerelement (Bild) aus der Objektbibliothek ausgewählt wurde.

Von der Werkzeugpalette zur Zeichenfläche

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(de-de,Expression.10).png

Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(de-de,Expression.10).png

Pfadobjekt namens Path_40, das die Form des orangefarbenen Farbmusters darstellt

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(de-de,Expression.10).png

Unbenanntes Button-Objekt, das in der Anwendung die Schaltfläche mit der Bezeichnung Reset Image darstellt. Unter Objekte und Zeitachsen wird die Zugriffstaste für die Schaltfläche mit dem Unterstrich (_) angegeben.

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(de-de,Expression.10).png

Rectangle-Objekt namens Rectangle_44, das für einen der Farb-Chips auf dem Farbmuster steht

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(de-de,Expression.10).png

Image-Objekt namens photo_bathroom, das das Hintergrundbild des Raums darstellt

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(de-de,Expression.10).png

Unbenannter Textblock, der durch den enthaltenen Text identifiziert wird, der den Titel der Anwendung Color Swatch Sample Pack 1 darstellt

Sie können sich die Steuerelemente in folgenden Kategorien vorstellen, um besser entscheiden zu können, welches Steuerelement Sie verwenden sollten:

Kategorie (Category)

Verwendung

Beispiele

Formen (verfügbar in Silverlight 1.0-Projekten)

Verwendet zum Erstellen aufwändiger visueller Elemente mithilfe von Ellipsen, Linien und Rechtecken, deren Darstellung Sie ganz nach Wunsch einfach, komplex oder farbig gestalten können. Weitere Informationen finden Sie unter Zeichnen von Formen und Pfaden.

Sie können die Darstellung und das Verhalten der Expression Blend-Elemente im Eigenschaftenpanel oder durch Verwendung von Stilen (nicht Vorlagen) anpassen. Weitere Informationen finden Sie unter Bearbeiten eines Stils.

Rechteck Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(de-de,Expression.10).png

Ellipse Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(de-de,Expression.10).png

Pfad (generiert durch die Zeichenwerkzeuge Linie Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(de-de,Expression.10).png, Stift Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(de-de,Expression.10).png und Zeichenstift Cc294749.509dc167-734f-46c9-b012-987ee63450cd(de-de,Expression.10).png)

LayoutPanel-Elemente

Verwendet als Container für andere Elemente der Benutzeroberfläche, um deren Position und Verhalten bei der Größenänderung von Fenstern anzugeben.

Anders als die meisten Elemente der Benutzeroberfläche können einige LayoutPanel-Elemente (z. B. das Rasterpanel) mehrere untergeordnete Elemente enthalten. Dies ist für die Strukturierung und das Layout des Anwendungsdesigns hilfreich.

Weitere Informationen finden Sie unter Layout.

Sie können die Darstellung und das Verhalten dieser Elemente in Expression Blend anpassen. Verwenden Sie hierfür das Eigenschaftenpanel oder Stile (nicht Vorlagen). Weitere Informationen finden Sie unter Bearbeiten eines Stils.

Canvas Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(de-de,Expression.10).png (verfügbar in Silverlight 1.0-Projekten)

Dock Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(de-de,Expression.10).png

Raster Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(de-de,Expression.10).png

Stapel Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(de-de,Expression.10).png

Umbruch Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(de-de,Expression.10).png

Dokument/Text

Verwendet zum Definieren von Dokumentpräsentation und Textformatierung. Weitere Informationen finden Sie unter Text und Typografie (Übersicht).

Sie können die Darstellung und das Verhalten dieser Elemente in Expression Blend anpassen. Verwenden Sie hierfür das Eigenschaftenpanel oder Stile und Vorlagen. Weitere Informationen finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen und Bearbeiten eines Stils.

TextBox Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(de-de,Expression.10).png

TextBlock Cc294749.42165963-00f7-4a33-abcd-b0849edebada(de-de,Expression.10).png (verfügbar in Silverlight 1.0-Projekten)

RichTextBox Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(de-de,Expression.10).png

Label Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(de-de,Expression.10).png

PasswordBox Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(de-de,Expression.10).png

Steuerelemente

Verwendet zum Bereitstellen einer Methode für Benutzer zum Interagieren mit Ihrer Anwendung.

Sie können die Darstellung und das Verhalten dieser Elemente in Expression Blend anpassen. Verwenden Sie hierfür das Eigenschaftenpanel oder Stile und Vorlagen. Weitere Informationen finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen und Bearbeiten eines Stils.

Button Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(de-de,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png

Menu Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(de-de,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(de-de,Expression.10).png

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(de-de,Expression.10).png

Decorator-Elemente

Verwendet zum Anwenden von Effekten auf ein anderes Element. Decorator-Elemente können ein einzelnes untergeordnetes Element enthalten. Dabei handelt es sich normalerweise um das Element, auf dessen Darstellung sie sich auswirken.

Normalerweise werden diese Elemente in Vorlagen verwendet, die auf andere Steuerelemente angewendet werden. Ein Beispiel hierfür ist das ButtonChrome-Element in der Vorlage einer Schaltfläche. Sie können die Darstellung und das Verhalten der Decorator-Elemente mithilfe des Eigenschaftenpanels oder durch Verwenden von Stilen (nicht durch Vorlagen) anpassen. Weitere Informationen finden Sie unter Bearbeiten eines Stils.

Border Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(de-de,Expression.10).png

ButtonChrome-Element

Viewbox

Weitere Informationen zu den Merkmale dieser Steuerelementtypen finden Sie unter dem Thema zuTypfamilien im Abschnitt Windows Presentation Foundation von MSDN (möglicherweise in englischer Sprache).

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Erstellen und Ändern von Steuerelementen

Sie können der Zeichenfläche Steuerelemente hinzufügen. Doppelklicken Sie hierfür in der Werkzeugpalette auf das entsprechende Symbol, oder wählen Sie das Symbol in der Werkzeugpalette aus, und zeichnen Sie dann das Element mit der Maus auf die Zeichenfläche. Weitere Informationen finden Sie unter den in Steuerelemente aufgeführten Themen zu Vorgehensweisen. Wenn Sie auf ein Steuerelement in der Objektbibliothek doppelklicken, wird es als aktives Element in Standardgröße eingefügt. Dies ist nützlich, da in vielen Fällen die Standardgröße auf Auto festgelegt wird, sodass das Steuerelement die richtige Größe aufweist, wenn Inhalt hinzugefügt wird.

Steuerelemente, die Sie auf die Zeichenfläche in Expression Blend einfügen, werden zu einem Objekt Ihrer Anwendung. Sie können Objekte auf vielfältige Weise bearbeiten: mit objektgebundenen Steuerpunkten in der Größe ändern, verschieben, drehen, kippen oder neigen oder im Eigenschaftenpanel genaue Werte für Größe, Position und Drehung eingeben. Weitere Informationen finden Sie unter Hinzufügen oder Ändern eines Objekts oder in den unter Arbeiten mit Objekten und Eigenschaften aufgeführten Themen zu Vorgehensweisen.

Die Möglichkeiten zur Bearbeitung von Steuerelementen sind einzigartig in Expression Blend. Sie können beliebige andere Steuerelemente, Panelelemente oder Formenelemente in ein Steuerelement einfügen. Dies ist beim Kombinieren von Steuerelementen nützlich. Wenn Sie beispielsweise eine Schaltfläche mit einem Bild und Text erstellen möchten, platzieren Sie einfach ein StackPanel-Steuerelement innerhalb der Schaltfläche, und fügen Sie dann Steuerelemente für Bild und Text in das StackPanel-Element ein.

Steuerelemente folgen bestimmten Vererbungsregeln. Beispielsweise dienen einige Steuerelemente als übergeordnetes Element und können untergeordnete Elemente (Inhalt) enthalten, die darin geschachtelt sind. Andere Steuerelemente unterstützen keine untergeordnete Elemente. In Expression Blend wird immer versucht, untergeordnete Elemente in das Stammpanel (oder Panel der oberen Ebene) in einem Dokument einzufügen. Wenn Sie mit der Arbeit in Expression Blend beginnen, wird daher zunächst vom LayoutRoot-Element als Stammpanel ausgegangen. Das Element ist das Standardziel für alle untergeordneten Elemente, die Sie in das Dokument einfügen. Wenn Sie untergeordnete Elemente in ein anderes Steuerelement im Dokument einfügen möchten, müssen Sie das Steuerelement aktivieren. Doppelklicken Sie hierzu unter Objekte und Zeitachsen auf den entsprechenden Namen. Eine gelbe Hervorhebung kennzeichnet das aktivierte Element, sodass Sie wissen, wo ein neues Steuerelement hinzugefügt wird.

Expression Blend unterstützt die folgenden Steuerelementtypen. Sie sind nach dem Typ der unterstützten Vererbung in Kategorien untergliedert:

Kategorie (Category)

Beschreibung

Beispiele

Einfache Steuerelemente

Einfache Steuerelemente bestehen aus dem eigentlichen Steuerelement und den Eigenschaften, die für das Steuerelement festgelegt werden können. Einfache Steuerelemente können keinen Inhalt aufnehmen. Sie können also keine untergeordneten Elemente enthalten.

Image Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(de-de,Expression.10).png (verfügbar in Silverlight 1.0-Projekten)

ScrollBar Cc294749.6513a026-499e-4296-8a67-7558b466bd33(de-de,Expression.10).png

ContentControl-Elemente

ContentControl-Elemente können andere Elemente aufnehmen (oder bei einfachen Szenarien eine Zeichenfolge als Text anzeigen). ContentControl-Elemente weisen eine Content-Eigenschaft auf. Dies bedeutet, dass sie einzelne Inhalte enthalten können, wie beispielsweise eine Zeichenfolge. Außerdem können ContentControl-Elemente ein anderes Element enthalten, wie z. B. ein LayoutPanel-Element. Ein Beispiel finden Sie unter dem Thema Erstellen eines ContentControl-Elements.

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(de-de,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(de-de,Expression.10).png

ItemsControl-Elemente

ItemsControl-Elemente enthalten eine Auflistung von untergeordneten Elementen. Sie können entweder der Items-Auflistungseigenschaft die Elemente manuell hinzufügen, oder Sie können eine Datenauflistung an die ItemsSource-Eigenschaft binden. ItemsControl-Elemente machen Elementauflistungen verfügbar und weisen weder eine Content-Eigenschaft noch eine Header-Eigenschaft auf. Ein Beispiel finden Sie unter dem Thema Erstellen eines ItemsControl-Elements.

ComboBox Cc294749.b174a511-dd12-4a45-a986-034de7693de9(de-de,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png

Steuerelemente mit Kopfzeile

Steuerelemente mit Kopfzeile enthalten als untergeordnetes Element eine Kopfzeile, die das Steuerelement beschriftet. Steuerelemente mit Header können entweder Inhalt (ContentControl-Element mit Header) oder eine Auflistung von Elementen (ItemsControl-Element mit Header) enthalten. Ein Beispiel finden Sie unter dem Thema Erstellen eines Steuerelements mit Kopfzeile.

TabControl Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(de-de,Expression.10).png

TabItem-Steuerelement

MenuItem Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(de-de,Expression.10).png

Weitere Informationen zu den Merkmalen dieser Steuerelementtypen finden Sie unter dem Thema zu den Inhaltsmodellen im Abschnitt zu Windows Presentation Foundation in MSDN.

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Stile und Vorlagen

Wie bereits unter Steuerelemente (Übersicht) erläutert, lassen sich Steuerelemente auf vielfältige Weise anpassen. Beispielsweise können Sie Vorlagen und Stile erstellen, um ein charakteristisches und konsistentes Aussehen Ihrer Anwendung zu erzielen. Vorlagen und Stile definieren die Komponenten, aus denen Steuerelemente und deren jeweiliges Standardverhalten bestehen. Das Erstellen von Vorlagen und Stilen erfolgt durch Kopieren der standardmäßigen Systemstile und -vorlagen für ein Steuerelement, da es nicht möglich ist, Systemstile und -vorlagen zu ändern. Durch Ändern der Vorlagen und Stile können Sie auf einfache Weise neue Steuerelemente in der Designansicht von Expression Blend erstellen, ohne Code verwenden zu müssen. Weitere Informationen finden Sie unter Stile und Vorlagen (Übersicht).

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben