Steuerelemente (Übersicht)
.png "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.
.gif "Hinweis") Hinweis: |
|---|
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:
Konvertieren einer Eigenschaft (wie einer Pinselfarbe) in eine Ressource, die Sie auf andere Steuerelemente anwenden können. Auf diese Weise können Sie Ihrer Anwendung ein charakteristisches und einheitliches Aussehen verleihen. Ein Beispiel finden Sie unter Erstellen einer Ressource.
Erstellen einer neuen Vorlage und eines neuen Stils für ein Steuerelement, um dessen Darstellung und Verhalten zu definieren. Auch dies führt zu einem charakteristischen und einheitlichen Aussehen Ihrer Anwendung. Vorlagen und Stile können Auslöser enthalten und Ressourcen zum Festlegen von Eigenschaften verwenden. Weitere Informationen finden Sie unter Styles and templates. Beispiele für WPF finden Sie unter Erstellen einer Stilressource und Erstellen oder Bearbeiten von Steuerelementvorlagen. Beispiele für Silverlight 2 finden Sie unter Erstellen einer wiederverwendbaren Vorlage für ein Systemsteuerelement und Erstellen eines Designs für ein Steuerelement in einem Silverlight 2-Projekt.
Hinzufügen von Animationen und Interaktivität zu Ihrem Steuerelement. Ein Beispiel finden Sie unter Erstellen einer einfachen Animation.
Programmieren komplexeren Verhaltens für Ihr Steuerelement mit Ereignishandlermethoden in einer CodeBehind-Datei. Ein Beispiel für WPF finden Sie unter Erstellen einer neuen Ereignishandlermethode. Ein Beispiel für Silverlight 2 finden Sie unter Dynamisches Laden neuer Seiten in die Silverlight 2-Anwendung.
Entwerfen und Verwenden eigener benutzerdefinierter Steuerelemente in Expression Blend. Beispiele für WPF finden Sie unter Weiterführende Themen: Erstellen eines benutzerdefinierten WPF-Steuerelements und Weiterführende Themen: Erstellen von WPF-Benutzersteuerelementen. Ein Beispiel für Silverlight 2 finden Sie unter Erstellen eines neuen Benutzersteuerelements in einem Silverlight 2-Projekt.
.gif "Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gif")
Nach 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 .png "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 .png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(de-de,Expression.10).png")
generiert ein Pfadobjekt .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(de-de,Expression.10).png")
. Das Bildsymbol .png "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
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(de-de,Expression.10).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(de-de,Expression.10).png") |
Pfadobjekt namens Path_40, das die Form des orangefarbenen Farbmusters darstellt |
.png "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. |
.png "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 |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(de-de,Expression.10).png") |
Image-Objekt namens photo_bathroom, das das Hintergrundbild des Raums darstellt |
.png "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 Ellipse Pfad (generiert durch die Zeichenwerkzeuge Linie |
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 Dock Raster Stapel Umbruch |
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 TextBlock RichTextBox Label PasswordBox |
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 ListBox Menu RadioButton CheckBox |
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 ButtonChrome-Element Viewbox |
.png "Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(de-de,Expression.10).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(de-de,Expression.10).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(de-de,Expression.10).png")
, Stift .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(de-de,Expression.10).png")
).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(de-de,Expression.10).png")
(verfügbar in Silverlight 1.0-Projekten).png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(de-de,Expression.10).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(de-de,Expression.10).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(de-de,Expression.10).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(de-de,Expression.10).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(de-de,Expression.10).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(de-de,Expression.10).png")
(verfügbar in Silverlight 1.0-Projekten).png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(de-de,Expression.10).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(de-de,Expression.10).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(de-de,Expression.10).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(de-de,Expression.10).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(de-de,Expression.10).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(de-de,Expression.10).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(de-de,Expression.10).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(de-de,Expression.10).png")
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).
Nach 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 ScrollBar |
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 RadioButton |
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 ListBox |
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 TabItem-Steuerelement MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(de-de,Expression.10).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(de-de,Expression.10).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(de-de,Expression.10).png")
.png "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.
Nach 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).
Nach oben