Formatierungstipps für einfache WPF-Formatvorlagen
.png "This page applies to WPF projects only")
Mit Microsoft Expression Blend müssen Sie nicht ausschließlich die standardmäßigen Steuerelemente oder Systemsteuerelemente verwenden, wenn Sie die Benutzeroberfläche 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.
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 Formatvorlagenressourcen werden von Expression Blend bereitgestellt, weil für das Ändern der Formatvorlage eines Systemsteuerelements einige Kenntnisse in Bezug auf Formatvorlagen und Vorlagen von Windows Presentation Foundation (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.
Erstellen eines Steuerelements für einen einfachen Stil
Einfache Formatvorlagen stehen Ihnen im Objektepanel in der Kategorie Formatvorlagen durch Klicken auf Einfache Formatvorlagen zur Verfügung. Nachdem Sie eine einfache Formatvorlage aus dem Objektepanel ausgewählt haben, wird das Symbol für die einfache Formatvorlage oberhalb der Schaltfläche Objekte.png "Cc294894.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png")
angezeigt. Zudem ist die neue Formatvorlage bereits ausgewählt, sodass sie auf die Zeichenfläche gezogen 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.
Das Objektepanel mit den verfügbaren einfachen Formatvorlagensteuerelementen
.png "Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(DE-DE,Expression.30).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.30).png") |
SimpleCheckBox-Steuerelementvorlage |
CheckBox-Steuerelementvorlage |
.png "Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(DE-DE,Expression.30).png") |
SimpleComboBox-Steuerelementvorlage |
ComboBox-Steuerelementvorlage |
.png "Cc294894.b174a511-dd12-4a45-a986-034de7693de9(DE-DE,Expression.30).png") |
SimpleComboBoxItem-Steuerelementvorlage |
ComboBoxItem-Steuerelement |
|
SimpleExpander-Steuerelementvorlage |
Expander-Steuerelementvorlage |
.png "Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(DE-DE,Expression.30).png") |
SimpleLabel-Steuerelement |
Etikett (Label) |
.png "Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(DE-DE,Expression.30).png") |
SimpleListBox-Steuerelementvorlage |
ListBox-Steuerelementvorlage |
.png "Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(DE-DE,Expression.30).png") |
SimpleListBoxItem-Steuerelementvorlage |
ListBoxItem-Steuerelement |
|
SimpleMenu-Steuerelementvorlage |
Menu-Steuerelementvorlage |
.png "Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(DE-DE,Expression.30).png") |
SimpleMenuItem-Steuerelementvorlage |
MenuItem-Steuerelementvorlage |
.png "Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(DE-DE,Expression.30).png") |
SimpleProgressBar-Steuerelementvorlage |
ProgressBar-Steuerelementvorlage |
.png "Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(DE-DE,Expression.30).png") |
SimpleRadioButton-Steuerelementvorlage |
RadioButton-Steuerelementvorlage |
.png "Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(DE-DE,Expression.30).png") |
SimpleRepeatButton-Steuerelementvorlage |
RepeatButton-Steuerelement in einem ListBox-Steuerelement |
|
SimpleScrollBar-Steuerelementvorlage |
ScrollBar-Elemente |
.png "Cc294894.6513a026-499e-4296-8a67-7558b466bd33(DE-DE,Expression.30).png") |
SimpleScrollBarRepeatButtonStyle-Steuerelementvorlage |
RepeatButton-Steuerelement in einem ScrollBar-Steuerelement |
|
SimpleScrollViewer-Steuerelementvorlage |
ScrollViewer |
.png "Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(DE-DE,Expression.30).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.30).png") |
SimpleSliderThumb-Steuerelementvorlage |
Thumb-Element in einem Slider-Steuerelement |
|
SimpleTabControl-Steuerelementvorlage |
TabControl-Steuerelementvorlage |
.png "Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(DE-DE,Expression.30).png") |
SimpleTabItem-Steuerelementvorlage |
TabItem-Element in einem TabControl-Steuerelement |
|
SimpleTextBox-Steuerelementvorlage |
TextBox |
.png "Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(DE-DE,Expression.30).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.30).png") |
SimpleTreeViewItem-Steuerelementvorlage |
TreeViewItem-Element in einem TreeView-Steuerelement |
|
SimpleTreeViewItemToggleButton-Steuerelementvorlage |
ToggleButton-Element in einem TreeView-Steuerelement |
Ändern von einfachen Stilen
Die Ressourcen für einfache Formatvorlagen sind in einem Ressourcenverzeichnis mit der Bezeichnung SimpleStyles.xaml enthalten. Nachdem Sie der Zeichenfläche eine einfache Formatvorlage über das Werkzeugpanel hinzugefügt haben, wird das Ressourcenverzeichnis SimpleStyles.xaml dem Projekt hinzugefügt. Alle Ressourcen für einfache Formatvorlagen 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 Formatvorlagen 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 Festlegen von Farben, Pinseln und Masken.
Auswählen der Bearbeitung einer Pinselressource im Ressourcenpanel
.png "Cc294894.64136c65-52bc-4225-a948-b1171634baca(DE-DE,Expression.30).png")
Ändern der Formatvorlage Sie können die Formatvorlage eines Steuerelements in Expression Blend verwenden, um Eigenschaften und Auslöser anzugeben, die als Standardwerte von dem Steuerelement verwendet werden, auf das die Formatvorlage 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 die SimpleButton-Formatvorlage 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.30).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 die SimpleTextBox-Formatvorlage auf der Zeichenfläche auf ein TextBox-Element angewandt wird. Zusätzlich zur Formatvorlage können Sie auch Eigenschafts- und Ereignisauslöser in der Steuerelementvorlage festlegen.
Gehen Sie folgendermaßen vor, wenn Sie die Steuerelementvorlage für eine einfache Formatvorlage ändern möchten: Klicken Sie im Ressourcenpanel neben der einfachen Formatvorlage auf die Schaltfläche Ressource bearbeiten, klicken Sie mit der rechten Maustaste auf das Style-Element, das im Panel Objekte und Zeitachsen aufgeführt wird, zeigen Sie auf Vorlage bearbeiten, und klicken Sie anschließend auf Aktuellen bearbeiten.
Auswählen der Bearbeitung der Steuerelementvorlage beim Beginnen vom Bearbeitungsbereich des Stils aus
.png "Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(DE-DE,Expression.30).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 Aktuellen bearbeiten getroffen wird.
Einen ausführlichen Vergleich zwischen Formatvorlagen und Vorlagen finden Sie unter Formatieren eines Steuerelements, das Vorlagen unterstützt.
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.
Weitere Informationen zu Ressourcen finden Sie unter Erstellen von wiederverwendbaren Ressourcen.