Verwenden von einfachen Stilen
.png "Diese Seite bezieht sich nur auf WPF-Projekte")
Mit Microsoft Expression Blend müssen Sie nicht ausschließlich die standardmäßigen Steuerelemente oder Systemsteuerelemente verwenden, wenn Sie die Benutzeroberfläche (UI) Ihrer Anwendung entwerfen. Sie können Steuerelemente nach Bedarf anpassen und gestalten, damit sie sich genau auf die gewünschte Weise verhalten. Mithilfe der Ressourcen in Expression Blend können Sie den Steuerelementen ein attraktives und charakteristisches Aussehen verleihen und dadurch ein individuelles Erscheinungsbild Ihrer Anwendung oder eine konsistente Benutzeroberfläche für alle Anwendungen sicherstellen.
.gif "Hinweis") Hinweis: |
|---|
Die einfachen Stile von Expression Blend sind in Microsoft Silverlight 1.0-Projekten nicht verfügbar. Sie können jedoch JavaScript-Klassen erstellen, um wiederverwendbare Steuerelemente zu definieren. Ein Beispiel finden Sie in der Button-Klasse im ButtonGallery-Beispiel. Klicken Sie hierfür im Hilfemenü auf Willkommenseite und dann auf Samples. Weitere Informationen finden Sie im Silverlight-Trainingscenter. |
Was sind einfache Stile?
Bei einfachen Stilen handelt es sich um eine Gruppe von benutzerdefinierten und sofort verwendbaren Stilressourcen für eine Gruppe von häufigen Systemsteuerelementen, wie die Steuerelemente Button und ListBox. Die einfachen Stilressourcen werden von Expression Blend bereitgestellt, da für das Ändern des Stils eines Systemsteuerelements einige Kenntnisse in Bezug auf Windows Presentation Foundation-Stile und -Vorlagen (WPF) erforderlich sind, um die Funktionalität des Steuerelements nicht zu beeinträchtigen. Sie können die einfachen Stile in Expression Blend als in sich geschlossene Gruppe von Ressourcen verwenden, die schnell geändert werden können, um Ihrer Anwendung ein charakteristisches Aussehen zu verleihen. Es ist zu diesem Zweck nicht erforderlich, sich mit WPF-Stilen und -Vorlagen vertraut zu machen.
.gif "Cc294894.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gif")
Nach oben
Erstellen eines Steuerelements für einen einfachen Stil
Einfache Stile stehen Ihnen in der Objektbibliothek auf der Registerkarte Steuerelemente durch Klicken auf Einfache Stile zur Verfügung. Aktivieren Sie das Kontrollkästchen Alles anzeigen, um alle verfügbaren einfachen Stile anzuzeigen. Nachdem Sie einen einfachen Stil in der Objektbibliothek ausgewählt haben, wird das Symbol für den einfachen Stil oberhalb der Schaltfläche Objektbibliothek.png "Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png")
angezeigt. Zudem ist der neue Stil bereits ausgewählt, sodass er auf der Zeichenfläche gezeichnet werden kann. Wenn Sie einen einfachen Stil (wie die SimpleButton-Steuerelementvorlage) auf der Zeichenfläche zeichnen, erstellen Sie effektiv eine Instanz des Systemsteuerelements (wie des Button-Steuerelements), wenden jedoch den SimpleButton-Stil darauf an.
Wenn Sie die einfachen Stile auf die Werkzeuge anwenden möchten, die in den Dropdownlisten für einige der Werkzeuge in der Werkzeugpalette verfügbar sind, klicken Sie in der Objektbibliothek auf die Schaltfläche Als Standard verwenden, wenn auf der Registerkarte Steuerelemente die Kategorie Einfache Stile ausgewählt ist.
Die Objektbibliothek zeigt die verfügbaren einfachen Stile sowie die Option zum Festlegen als Standardstile an
.png "Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(de-de,Expression.10).png")
Die folgende Tabelle enthält die verfügbaren einfachen Stile und die jeweiligen Steuerelemente, auf welche die Stile angewendet werden.
Einfacher Stil |
Zugehöriges Steuerelement |
Symbol |
|---|---|---|
SimpleButton-Steuerelementvorlage |
Button-Steuerelementvorlage |
.png "Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(de-de,Expression.10).png") |
SimpleCheckBox-Steuerelementvorlage |
CheckBox-Steuerelementvorlage |
.png "Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(de-de,Expression.10).png") |
SimpleComboBox-Steuerelementvorlage |
ComboBox-Steuerelementvorlage |
.png "Cc294894.b174a511-dd12-4a45-a986-034de7693de9(de-de,Expression.10).png") |
SimpleComboBoxItem-Steuerelementvorlage |
ComboBoxItem-Steuerelement |
|
SimpleExpander-Steuerelementvorlage |
Expander-Steuerelementvorlage |
.png "Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(de-de,Expression.10).png") |
SimpleLabel-Steuerelement |
Etikett (Label) |
.png "Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(de-de,Expression.10).png") |
SimpleListBox-Steuerelementvorlage |
ListBox-Steuerelementvorlage |
.png "Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(de-de,Expression.10).png") |
SimpleListBoxItem-Steuerelementvorlage |
ListBoxItem-Steuerelement |
|
SimpleMenu-Steuerelementvorlage |
Menu-Steuerelementvorlage |
.png "Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(de-de,Expression.10).png") |
SimpleMenuItem-Steuerelementvorlage |
MenuItem-Steuerelementvorlage |
.png "Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(de-de,Expression.10).png") |
SimpleProgressBar-Steuerelementvorlage |
ProgressBar-Steuerelementvorlage |
.png "Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(de-de,Expression.10).png") |
SimpleRadioButton-Steuerelementvorlage |
RadioButton-Steuerelementvorlage |
.png "Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(de-de,Expression.10).png") |
SimpleRepeatButton-Steuerelementvorlage |
RepeatButton-Steuerelement in einem ListBox-Steuerelement |
|
SimpleScrollBar-Steuerelementvorlage |
ScrollBar-Elemente |
.png "Cc294894.6513a026-499e-4296-8a67-7558b466bd33(de-de,Expression.10).png") |
SimpleScrollBarRepeatButtonStyle-Steuerelementvorlage |
RepeatButton-Steuerelement in einem ScrollBar-Steuerelement |
|
SimpleScrollViewer-Steuerelementvorlage |
ScrollViewer |
.png "Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(de-de,Expression.10).png") |
SimpleSeparator-Steuerelementvorlage |
Separator-Steuerelement in einem ListBox-, Menu- oder ToolBar-Steuerelement |
|
SimpleSlider-Steuerelementvorlage |
Slider-Steuerelementvorlage |
.png "Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(de-de,Expression.10).png") |
SimpleSliderThumb-Steuerelementvorlage |
Thumb-Element in einem Slider-Steuerelement |
|
SimpleTabControl-Steuerelementvorlage |
TabControl-Steuerelementvorlage |
.png "Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(de-de,Expression.10).png") |
SimpleTabItem-Steuerelementvorlage |
TabItem-Element in einem TabControl-Steuerelement |
|
SimpleTextBox-Steuerelementvorlage |
TextBox |
.png "Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(de-de,Expression.10).png") |
SimpleThumbStyle-Steuerelementvorlage |
Thumb-Element in einem ScrollBar-Steuerelement in einem ListBox-Steuerelement |
|
SimpleTreeView-Steuerelementvorlage |
TreeView-Steuerelementvorlage |
.png "Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(de-de,Expression.10).png") |
SimpleTreeViewItem-Steuerelementvorlage |
TreeViewItem-Element in einem TreeView-Steuerelement |
|
SimpleTreeViewItemToggleButton-Steuerelementvorlage |
ToggleButton-Element in einem TreeView-Steuerelement |
Nach oben
Ändern von einfachen Stilen
Die Ressourcen für einfache Stile sind in einem Ressourcenverzeichnis mit der Bezeichnung SimpleStyles.xaml enthalten. Nachdem Sie der Zeichenfläche einen einfachen Stil über die Werkzeugpalette hinzugefügt haben, wird das Ressourcenverzeichnis SimpleStyles.xaml Ihrem Projekt hinzugefügt. Alle Ressourcen für einfache Stile sind dann im Ressourcenpanel sichtbar.
Das Ressourcenverzeichnis SimpleStyles.xaml enthält Pinselressourcen und andere Vorlagen, die von den einfachen Stilen verwendet werden. Sie können jede der folgenden Änderungen an den einfachen Stilen vornehmen:
Ändern der Farben Die Farben, die von allen einfachen Stilen verwendet werden, sind als Ressourcen gespeichert, die Sie ändern können. Klicken Sie auf die Dropdownschaltflächen neben der Farbressource im Ressourcenpanel, um eine der Farbressourcen zu ändern. Weitere Informationen zu Pinseln finden Sie unter Darstellung (Übersicht).
Auswählen der Bearbeitung einer Pinselressource im Ressourcenpanel
.png "Cc294894.64136c65-52bc-4225-a948-b1171634baca(de-de,Expression.10).png")
Ändern des Stils Sie können den Stil eines Steuerelements in Expression Blend verwenden, um Eigenschaften und Auslöser anzugeben, die als Standardwerte von dem Steuerelement verwendet werden, auf das der Stil angewendet wird. Die Eigenschaften (wie die Farbe des Hintergrundpinsels) wirken sich auf die Darstellung des Steuerelements aus, während die Auslöser die Reaktion des Steuerelements auf Eigenschaftenänderungen und Ereignisse beeinflussen. Beispielsweise enthält der SimpleButton-Stil einen Auslöser für die IsMouseOver-Eigenschaft, sodass die Darstellung der Schaltfläche geändert wird, wenn der Benutzer den Mauszeiger über das Steuerelement bewegt. Der Auslöser wird aktiviert, wenn sich der Wert der IsMouseOver-Eigenschaft von False in True ändert. Klicken Sie auf die Schaltfläche Ressource bearbeiten neben dem einfachen Stil im Ressourcenpanel, um einen der einfachen Stile zu ändern.
Auswählen der Bearbeitung einer Stilressource im Ressourcenpanel
.png "Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(de-de,Expression.10).png")
Ändern der Steuerelementvorlage Die Darstellung eines Steuerelements wird durch dessen Vorlage definiert. Hierzu werden in der Vorlage die untergeordneten Steuerelemente definiert, die im Steuerelement enthalten sind. Beispielsweise enthält die Steuerelementvorlage für das SimpleTextBox-Element ein Grid-Element, das wiederum ein Border-Element enthält. In diesem Element ist ein ScrollViewer-Element mit der Bezeichnung PART_ContentHost enthalten. Das ScrollViewer-Element zeigt den Inhalt des TextBox-Elements an, wenn der SimpleTextBox-Stil auf der Zeichenfläche auf ein TextBox-Element angewendet wird. Zusätzlich zum Stil können Sie auch Eigenschafts- und Ereignisauslöser in der Steuerelementvorlage festlegen. Gehen Sie folgendermaßen vor, wenn Sie die Steuerelementvorlage für einen einfachen Stil ändern möchten: Klicken Sie auf die Schaltfläche Ressource bearbeiten neben dem einfachen Stil im Ressourcenpanel, klicken Sie mit der rechten Maustaste auf das Style-Element, das unter Objekte und Zeitachsen aufgeführt wird, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten.
Auswählen der Bearbeitung der Steuerelementvorlage beim Beginnen vom Bearbeitungsbereich des Stils aus
.png "Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(de-de,Expression.10).png")
.gif "Tipp")
Tipp:Steuerelementvorlagen sind von Stilen umschlossen. Daher umfasst der Stil, der auf ein Steuerelement angewendet wird, sowohl die Darstellung (Teile) als auch das Verhalten des Steuerelements. Dies muss berücksichtigt werden, wenn die Auswahl zwischen Kopie bearbeiten und Vorlage bearbeiten getroffen wird.
Einen ausführlichen Vergleich zwischen Stilen und Vorlagen finden Sie unter Stile und Vorlagen. Spezifische Informationen zu einfachen Stilen sowie Beispiele für das Ändern der einfachen Stile und Steuerelementvorlagen finden Sie in den Themen, die unter Referenz und Weiterführende Themen in Einfache Stile aufgeführt werden.
Nach oben
Anwenden einer Stilressource auf ein vorhandenes Steuerelement auf der Zeichenfläche
Bei den einfachen Stilen handelt es sich um Ressourcen, die wie jede andere Ressource angewendet und verwaltet werden können. Ein Beispiel finden Sie unter Anwenden einer Stilressource in diesem Benutzerhandbuch. Weitere Informationen zu Ressourcen finden Sie in diesem Benutzerhandbuch unter Ressourcen (Übersicht).
Nach oben