Auswählen und Verwenden von interaktiven Steuerelementen
In Microsoft Expression Blend steht eine umfangreiche Liste mit Steuerelementen zur Verfügung, mit denen Sie die Benutzeroberfläche für Ihre Windows Presentation Foundation (WPF)- und Microsoft Silverlight-Anwendungen vielseitig gestalten können.
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 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 Darstellung und ihr Verhalten im Eigenschaftenpanel und im Panel Objekte und Zeitachsen 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 Objektepanel ein Verhalten einfügen.
Weitere Informationen finden Sie unter Eigenschaftenpanel und Objekte und Zeitachsen (Panel).
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 im folgenden Abschnitt "Stile und Vorlagen".
Weitere Informationen finden Sie unter den folgenden Themen:
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.
Weitere Informationen finden Sie unter Erstellen einer neuen Ereignishandlermethode und Weiterführende Themen: Dynamisches Laden einer neuen Seite in die Silverlight-Anwendung.
Entwerfen und Verwenden eigener benutzerdefinierter Steuerelemente in Expression Blend.
Weitere Informationen finden Sie unter den folgenden Themen:
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 werden im Objektepanel aufgerufen. Klicken Sie im unteren Bereich des Werkzeugpanels auf die Schaltfläche Objekte.png "Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png")
. Das Werkzeugpanel befindet sich auf der linken Seite von Expression Blend. Wenn Sie im Objektepanel ein Element der Benutzeroberfläche auswählen, wird das Symbol für dieses Element unter der Schaltfläche Objekte 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 unter der Schaltfläche Objekte angezeigt, sodass sie schnell auffindbar sind.
Weitere Informationen finden Sie unter Objektepanel und Werkzeugpanel.
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.30).png")
generiert ein Pfadobjekt .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(DE-DE,Expression.30).png")
. Das Bildsymbol .png "Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(DE-DE,Expression.30).png")
wird im Werkzeugpanel angezeigt, nachdem das Image-Steuerelement (Bild) aus dem Objektepanel ausgewählt wurde.
Vom Werkzeugpanel zur Zeichenfläche
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(DE-DE,Expression.30).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(DE-DE,Expression.30).png") |
Pfadobjekt namens Path_40, das die Form des orangefarbenen Farbmusters darstellt |
.png "Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(DE-DE,Expression.30).png") |
Unbenanntes Button-Objekt, das in der Anwendung die Schaltfläche mit der Bezeichnung Reset Image darstellt. Im Panel 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.30).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.30).png") |
Image-Objekt namens photo_bathroom, das das Hintergrundbild des Raums darstellt |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(DE-DE,Expression.30).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 |
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 Anordnen von Objekten. 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 Zeichnen von Text. 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 einer Vorlage 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 einer Vorlage 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.30).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(DE-DE,Expression.30).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(DE-DE,Expression.30).png")
, Stift .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(DE-DE,Expression.30).png")
).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(DE-DE,Expression.30).png")
.png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(DE-DE,Expression.30).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(DE-DE,Expression.30).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(DE-DE,Expression.30).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(DE-DE,Expression.30).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(DE-DE,Expression.30).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(DE-DE,Expression.30).png")
.png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(DE-DE,Expression.30).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(DE-DE,Expression.30).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(DE-DE,Expression.30).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(DE-DE,Expression.30).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(DE-DE,Expression.30).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(DE-DE,Expression.30).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(DE-DE,Expression.30).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(DE-DE,Expression.30).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(DE-DE,Expression.30).png")
Weitere Informationen zu den Merkmalen dieser Steuerelementtypen finden Sie im Thema Typfamilien unter Windows Presentation Foundation (möglicherweise in englischer Sprache) in MSDN.
Erstellen und Ändern von Steuerelementen
Sie können der Zeichenfläche Steuerelemente hinzufügen. Doppelklicken Sie hierfür im Panel Werkzeuge auf das entsprechende Symbol, oder wählen Sie das Symbol im Panel Werkzeuge aus, und zeichnen Sie dann das Element mit der Maus auf die Zeichenfläche.
Weitere Informationen finden Sie in den unter Auswählen und Verwenden von interaktiven Steuerelementen aufgeführten Themen zu Vorgehensweisen.
Wenn Sie auf ein Steuerelement im Panel Objekte 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, ziehen Sie einfach ein StackPanel-Layoutpanel auf die Schaltfläche, und fügen Sie dann Steuerelemente für Bild und Text in das StackPanel-Layoutpanel 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 untergeordneten 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 im Panel 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 Zeichnen eines Content-Steuerelements. |
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 Zeichnen 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 Zeichnen eines Steuerelements mit Kopfzeile. |
TabControl TabItem-Steuerelement MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(DE-DE,Expression.30).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(DE-DE,Expression.30).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(DE-DE,Expression.30).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(DE-DE,Expression.30).png")
Weitere Informationen zu den Merkmalen dieser Steuerelementtypen finden Sie unter dem Thema zu den Inhaltsmodellen im Abschnitt zu Windows Presentation Foundation in MSDN.
Stile und Vorlagen
Wie bereits zuvor 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 Formatieren eines Steuerelements, das Vorlagen unterstützt.