Stile und Vorlagen (Übersicht)

Sie haben viele verschiedene Möglichkeiten, Windows Presentation Foundation-Steuerelemente (WPF) und Silverlight 2-Steuerelemente anzupassen. Unter anderem können Sie eine Reihe von Vorlagen und Stilen für Steuerelemente erstellen, die für ein einzigartiges und konsistentes Erscheinungsbild Ihrer Anwendung sorgen.

Hinweis:

Stile und Vorlagen werden in Microsoft Silverlight 1.0-Projekten nicht unterstützt. Sie können jedoch wiederverwendbare Steuerelemente mithilfe von JavaScript-Klassen definieren. Ein Beispiel hierfür finden Sie in der ButtonGallery unter der Button-Klasse, die auf der Willkommensseite auf der Registerkarte Beispiele im Menü Hilfe aufgerufen wird. Weitere Informationen finden Sie im Silverlight-Trainingscenter (möglicherweise in englischer Sprache).

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 Microsoft Expression Blend erstellen, ohne Code verwenden zu müssen.

Unterschied zwischen Stilen und Vorlagen

Die folgende Tabelle ermöglicht einen detaillierten Vergleich von Stilen und Vorlagen. Anhand der Tabelle können Sie einfacher entscheiden, ob Sie den Stil und/oder die Vorlage eines Steuerelements ändern möchten.

Merkmal	Stile	Vorlagen
Zweck	Über Stile können Sie die Standardwerte der Eigenschaften ändern, die für das Steuerelement gelten, auf das der Stil angewendet wird. Beispielsweise können Sie Standardfarben für Hintergrund, Rahmen und Vordergrund eines Steuerelements wie einer Schaltfläche angeben. Die Stileigenschaften können durch Werte überschieben werden, die beim Zeichnen des Steuerelements auf der Zeichenfläche festgelegt werden. Wenn Sie beispielsweise die Hintergrundfarbe im Stil einer Schaltfläche auf die Farbe Blau festlegen, wird die Schaltfläche beim Zeichnen auf der Zeichenfläche in blauer Farbe angezeigt. Sie haben jedoch die Möglichkeit, die Farbe zu ändern. Sie können im Stil nur bereits vorhandene Eigenschaften festlegen. Sie können beispielsweise keine Standardwerte für Eigenschaften festlegen, die zu einem neuen der Vorlage hinzugefügten Teil gehören. Schließlich können Sie Stile außerdem zum Angeben des Standardverhaltens eines Steuerelements verwenden. Sie können beispielsweise in einem für eine Schaltfläche gültigen Stil einen Auslöser angeben, der die Hintergrundfarbe ändert, wenn Benutzer den Mauszeiger auf die Schaltfläche bewegen. Diese Eigenschaftsänderungen werden sofort ausgeführt, sie können nicht schrittweise animiert werden.	Mit Vorlagen können Sie die Struktur des Steuerelements ändern, auf das die Vorlage angewendet wird. Sie können in einer Steuerelementvorlage festlegen, ob die Elemente (oder Teile) im Steuerelement neu angeordnet, hinzugefügt oder gelöscht werden sollen. Beispielsweise können Sie ein Hintergrundbild oder ein Design einem Steuerelement wie einer Schaltfläche hinzufügen. Sie können auch die Werte von Eigenschaften (wie die Hintergrundfarbe) ändern, die für das Steuerelement festgelegt sind, auf das die Vorlage angewendet wird. Die in der Vorlage festgelegten Werte können nicht durch Werte überschieben werden, die beim Zeichnen des Steuerelements auf der Zeichenfläche für das Steuerelement selbst festgelegt werden. Sie können jedoch mithilfe der Vorlagenbindung die Eigenschaften in der Vorlage an die Werte anpassen, die beim Zeichnen des Steuerelements auf der Zeichenfläche festgelegt werden. Wenn Sie Vorlagen bearbeiten, können Sie auf mehr Steuerelementteile zugreifen, als wenn Sie Stile bearbeiten. Durch Bearbeiten der Elementvorlage, können Sie beispielsweise das Aussehen der Popupliste in einem Kombinationsfeld oder das Aussehen der Schaltfläche, die die Popupliste im Kombinationsfeld auslöst, ändern. Einige Vorlagen bestehen aus den folgenden Teilen: ContentPresenter-Element   Ein ContentPresenter-Element ist ein Platzhalter in der Steuerelementvorlage, um den Inhalt des Steuerelements anzuzeigen, auf das die Vorlage angewendet wird. Dies kann der Wert einer Content-Eigenschaft (Inhalt) (z. B. in einer Schaltfläche) oder einer Text-Eigenschaft (in einem Textfeld) sein. Kopfzeile   Einige Steuerelemente weisen mehrere Eigenschaften auf, die Inhalt aufnehmen können. In diesem Fall wird ein zusätzliches ContentPresenter-Element in der Vorlage als Platzhalter für den Inhaltstyp verwendet, der als Kopfzeile verwendet wird. Ein Beispiel für ein Steuerelement mit Header ist ein TabItem-Steuerelement, bei dem der Header die Beschriftung auf der Registerkarte ist und der Inhalt unterhalb des Headers angezeigt wird. ItemsHost-Element   Ein ItemsHost-Element wird als Platzhalter für die untergeordneten Elemente eines Steuerelements verwendet. Der ItemsHost-Teil einer Vorlage wird durch IsItemsHost = True im Eigenschaftenpanel identifiziert. ItemContainerTemplate-Element   Eine Elementcontainervorlage wird auf ein Steuerelement angewendet, das Elemente enthält. Dazu zählen unter anderem Menu-Steuerelemente und List-Steuerelemente. Diese Vorlage wird verwendet, wenn Elemente zu einer Liste hinzugefügt werden. Schließlich können Sie das Verhalten von allen neuen und vorhandenen Teilen in einer Vorlage mit Auslösern angeben. Sie können beispielsweise einen Auslöser angeben, der die Farbe eines der Teile ändert, wenn Benutzer den Mauszeiger auf die Schaltfläche bewegen. Diese Eigenschaftenänderungen können sofort erfolgen oder animiert werden, um einen weichen Übergang zu erzeugen. Hinweis: Sie können nicht vom Wert einer vorlagengebundenen Eigenschaft oder einer Farbressource zu einem anderen Wert animieren. Verwenden Sie für Animationen in Auslösern spezifische Eigenschaftswerte.
Vorgehensweise	Sie können den Bearbeitungsmodus für einen Stil mit den folgenden Methoden aufrufen: Mit dem Menü Wählen Sie unter Objekte und Zeitachsen das Steuerelement aus. Zeigen Sie im Menü Objekt auf Stil bearbeiten. Führen Sie einen der folgenden Schritte aus: Klicken Sie auf Stil bearbeiten (um den Stil zu ändern, der gerade auf das Steuerelement angewendet wird). Klicken Sie auf Kopie bearbeiten (um eine neue Kopie des auf das Steuerelement angewendeten Stils zu erstellen und gleichzeitig den neuen Stil auf das Steuerelement anzuwenden). Die Option Vorlage bearbeiten ist nicht verfügbar, wenn der Systemstil auf das Steuerelement angewendet wird. Ein Beispiel finden Sie unter Erstellen einer Stilressource. Mit dem Ressourcenpanel (zum Ändern eines vorhandenen Stils) Hinweis: Stile und Vorlagen sind Ressourcen, die Sie auf verschiedene Weise auf Steuerelemente anwenden und an verschiedenen Stellen in Ihrer Anwendung speichern können. Ein Beispiel zum Erstellen eines Stils finden Sie unter Erstellen einer Stilressource.	Sie können den Bearbeitungsmodus für eine Steuerelementvorlage mit den folgenden Methoden aufrufen: Mit dem Menü Wählen Sie unter Objekte und Zeitachsen das Steuerelement aus. Führen Sie einen der folgenden Schritte aus: Zeigen Sie im Menü Objekt auf Steuerelementteile bearbeiten (Vorlage). Klicken Sie mit der rechten Maustaste auf das Steuerelement, und zeigen Sie auf Steuerelementteile bearbeiten (Vorlage). Klicken Sie auf Vorlage bearbeiten (um die gerade auf das Steuerelement angewendete Vorlage zu bearbeiten), oder klicken Sie auf Kopie bearbeiten (um eine neue Kopie der gerade auf das Steuerelement angewendeten Vorlage zu erstellen und gleichzeitig die neue Vorlage auf das Steuerelement anzuwenden). Die Option Vorlage bearbeiten ist nicht verfügbar, wenn die Systemvorlage auf das Steuerelement angewendet wird. Ein Beispiel finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen. Mit dem Ressourcenpanel (zum Ändern einer vorhandenen Vorlage) Suchen Sie im Ressourcenpanel nach dem Stil, der die Vorlage enthält, und klicken Sie dann neben dem Stil auf die Schaltfläche Ressource bearbeiten. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Stilelemente, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie auf Vorlage bearbeiten. 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. Klicken Sie daher nicht auf Kopie bearbeiten, sondern auf Vorlage bearbeiten, da die Kopie des Stils die Vorlage enthält.Wenn Sie in den Bearbeitungsbereich des Hauptdokuments zurückkehren möchten, klicken Sie zweimal auf die Schaltfläche Zurück zum Anfang . Durch das erste Klicken kehren Sie in den Bearbeitungsmodus des Stils zurück. Hinweis: Stile und Vorlagen sind Ressourcen, die Sie auf verschiedene Weise auf Steuerelemente anwenden und an verschiedenen Stellen in Ihrer Anwendung speichern können. Ein Beispiel zum Erstellen einer Vorlage finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen.
Vorgehensweise	Sie können einen vorhandenen Stil auf ein Steuerelement auf der Zeichenfläche mit den folgenden Methoden anwenden: Mit dem Menü Wählen Sie unter Objekte und Zeitachsen das Steuerelement aus. Zeigen Sie im Menü Objekt auf Stil bearbeiten, zeigen Sie auf Ressource anwenden, und wählen Sie dann den Stil aus der angezeigten Dropdownliste aus. Die Dropdownliste zeigt nur Stile an, die für das ausgewählte Steuerelement verfügbar sind. Sie können beispielsweise keinen Textfeldstil auf eine Schaltfläche anwenden. Verwenden der Objektbibliothek zum Zeichnen eines Steuerelements mit zugewiesenem Stil auf der Zeichenfläche Öffnen Sie die Objektbibliothek . Führen Sie einen der folgenden Schritte aus: Wenn der Stil in dem Dokument erstellt wurde, in dem Sie gerade arbeiten, klicken Sie auf die Registerkarte Lokal definierter Stil. Wenn der Stil in einem Ressourcenverzeichnis (nur WPF) erstellt wurde, klicken Sie auf die Registerkarte Steuerelemente, und wählen Sie dann das Verzeichnis aus. Wählen Sie den gewünschten Stil aus, und zeichnen Sie dann auf der Zeichenfläche.	Sie können eine vorhandene Vorlage auf ein Steuerelement auf der Zeichenfläche mit den folgenden Methoden anwenden: Mit dem Menü Wählen Sie unter Objekte und Zeitachsen das Steuerelement aus. Führen Sie einen der folgenden Schritte aus: Zeigen Sie im Menü Objekt auf Steuerelementteile bearbeiten (Vorlage). Klicken Sie mit der rechten Maustaste auf das Steuerelement, und zeigen Sie auf Steuerelementteile bearbeiten (Vorlage). Klicken Sie auf Vorlage bearbeiten (um die gerade auf das Steuerelement angewendete Vorlage zu bearbeiten), oder klicken Sie auf Kopie bearbeiten (um eine neue Kopie der auf das Steuerelement angewendeten Vorlage zu erstellen und gleichzeitig die neue Vorlage auf das Steuerelement anzuwenden). Die Option Vorlage bearbeiten ist nicht verfügbar, wenn die Systemvorlage auf das Steuerelement angewendet wird. Ein Beispiel finden Sie unter Erstellen oder Bearbeiten von Steuerelementvorlagen. Mit dem Ressourcenpanel (zum Ändern einer vorhandenen Vorlage) Suchen Sie im Ressourcenpanel nach dem Stil, der die Vorlage enthält, und klicken Sie dann neben dem Stil auf die Schaltfläche Ressource bearbeiten. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Stilelemente, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie auf Vorlage bearbeiten. Wenn Sie in den Bearbeitungsbereich des Hauptdokuments zurückkehren möchten, klicken Sie zweimal auf die Schaltfläche Zurück zum Anfang . Durch das erste Klicken kehren Sie in den Bearbeitungsmodus des Stils zurück.

Expression Blend enthält eine Reihe einfacher Stile und Vorlagen, die in einem Ressourcenverzeichnis in WPF-Projekten gepackt sind. Sie können mit Ressourcenverzeichnissen ein Thema für Ihre Anwendung entwerfen. Weitere Informationen finden Sie im Abschnitt Simple styles and resource dictionaries.

Nach oben

Ãndern von Stilen und Vorlagen

Wenn Sie sich im Bearbeitungsbereich eines Stils oder einer Vorlage in Expression Blend 2 befinden, wird im linken oberen Bereich der Zeichenfläche eine Breadcrumb-Navigationsleiste angezeigt.

Breadcrumb-Leiste mit ausgewähltem Vorlagenbearbeitungsmodus

Durch Klicken auf die einzelnen Schaltflächen der Breadcrumb-Leiste können Sie schnell zwischen dem Vorlagenbearbeitungsmodus, dem Stilbearbeitungsmodus und dem Bearbeitungsbereich für das ausgewählte Objekt umschalten. Die Breadcrumb-Leiste wird für alle ausgewählten Objekte angezeigt, auf die ein benutzerdefinierter Stil oder eine benutzerdefinierte Vorlage angewendet wurde.

Weitere Informationen über das Ändern von Stilen oder Vorlagen finden Sie unter Bearbeiten eines Stils und Erstellen oder Bearbeiten von Steuerelementvorlagen. Wenn Sie Stile oder Vorlagen ändern, stellen Sie sicher, dass Sie die folgenden Best practices übernehmen.

Nach oben

Bewährte Methoden

Vorsicht:
Berücksichtigen Sie beim Ändern von Stilen und Volagen die folgenden wichtigen Aspekte, um die Funktionalität des Systemsteuerelements nicht zu beeinträchtigen, auf das der Stil oder die Vorlage angewendet wird:

• Ändern Sie nach Möglichkeit keine vorhandenen Auslöser, außer wenn es sich lediglich um Farbpinsel handelt.

• Ändern Sie nicht den Namen oder andere Eigenschaften von Elementen, deren Name mit PART_ beginnt. Auf diese Elemente wird im Code verwiesen, der das Steuerelement implementiert.

• Löschen Sie keine Hilfselemente wie TabPanel-Elemente in der SimpleTabControl-Steuerelementvorlage oder Track-Elemente in der SimpleScrollBar-Steuerelementvorlage. Diese Elemente sind erforderlich, um die Funktionalität des Steuerelements zu gewährleisten.

• Setzen Sie im Eigenschaftenpanel keine Bindungen zurück, und ändern Sie keine Bindungen. Sie erkennen Bindungen daran, dass die Eigenschaft gelb hervorgehoben oder die Schaltfläche Erweiterte Eigenschaftenoptionen  gelb ist. Die Vorlagenbindung wird verwendet, um Eigenschaften in der Vorlage an die Eigenschaften des Steuerelements zu binden, auf das die Vorlage angewendet wird.

• Falls die Vorlage ein Presenter-Element enthält (z. B. ein ContentPresenter- oder ItemsPresenter-Element), stellen Sie sicher, dass dieses Element in der Vorlage verbleibt. Presenter-Elemente zeigen Inhalt an, der in dem Steuerelement definiert ist, auf das die Vorlage angewendet wird.

Nach oben

Designs

Bei einem Design handelt es sich um eine Gruppe von Stilen und Vorlagen, die ein einheitliches Aussehen für alle Steuerelemente der Benutzeroberfläche sicherstellen. In Windows Presentation Foundation wird beispielsweise ein Design für WPF-Anwendungen verwendet, die unter Microsoft Windows XP ausgeführt werden, und ein weiteres Design für WPF-Anwendungen, die unter Windows Vista ausgeführt werden. Aus diesem Grund sieht dieselbe Schaltfläche auf beiden Betriebssystemen unterschiedlich aus.

Anwendungen suchen nach den folgenden Eigenschaften, um das Aussehen eines Steuerelements (z. B. einer Schaltfläche) zu bestimmen:

1. Eigenschaften, die für ein Steuerelement festgelegt wurden   Beispiel: Sie erstellen eine Schaltfläche in Expression Blend und ändern dann die Hintergrundfarbe direkt auf der Schaltfläche. Durch das Festlegen einer Eigenschaft direkt auf einem Steuerelement werden alle Werte für diese Eigenschaft außer Kraft gesetzt, die an anderer Stelle festgelegt wurden.

2. Eigenschaften, die in den vom Steuerelement verwendeten benutzerdefinierten Stilen oder Vorlagen festgelegt wurden   Beispiel: Sie erstellen eine Schaltfläche in Expression Blend und bearbeiten dann eine Kopie der Vorlage, um die Hintergrundfarbe in der Vorlage festzulegen. Dies ist die Hintergrundfarbe, die für die Schaltfläche verwendet wird, falls die Hintergrundeigenschaft nicht direkt auf der Schaltfläche festgelegt wird. Sie können Ressourcen im Dokument, das das Steuerelement enthält, oder auf Anwendungsebene definieren (die Ressourcen werden allen Dokumenten in der Anwendung verfügbar gemacht). Ressourcen auf Dokumentebene setzen Ressourcen auf Anwendungsebene außer Kraft.

3. Eigenschaften, die für die vom Steuerelement verwendete Systemvorlage festgelegt wurden   In WPF-Anwendungen wird die Systemvorlage auf Basis des Designs (d. h. auf Basis des Betriebssystems) bestimmt.

Nach oben

Einfache Stile und Ressourcenverzeichnisse

Hinweis:
Einfache Stile und Ressourcenverzeichnisse werden in Silverlight 2-Projekten nicht unterstützt.

Sie können ein Design effektiv erstellen, indem Sie Eigenschafts-, Stil- und Vorlagenressourcen in einer einzelnen Datei mit dem Namen Ressourcenverzeichnis erstellen. Mithilfe von Ressourcenverzeichnis können Sie Designs in mehreren Anwendungen wiederverwenden. Sie können auch umschaltbare Designs erstellen, indem Sie mehrere Ressourcenverzeichnisse definieren, welche dieselben Ressourcentypen bereitstellen, jedoch mit unterschiedlichen Werten. Beispielsweise verwendet die Anwendung Expression Blend selbst unterschiedliche Ressourcenverzeichnisse für ein dunkles und ein helles Design. Sie können zwischen diesen Designs umschalten, indem Sie im Menü Werkzeuge auf Optionen klicken und dann das für den Arbeitsbereich ausgewählte Design ändern.

Für Ihre eigenen Anwendungen steht Ihnen in Expression Blend ein sofort verwendbares Ressourcenverzeichnis mit dem Namen SimpleStyles.xaml zur Verfügung, das eine Reihe von Stilen für gängige Steuerelemente wie u. a. Schaltflächen und Listenfelder enthält. Sie können in der Objektbibliothek auf der Registerkarte Steuerelemente unter Einfache Stile auf diese Stile zugreifen. Wenn Sie einen der einfachen Stile zum Zeichnen eines Steuerelements auf der Zeichenfläche verwenden, wird die Systemversion des Steuerelements gleichzeitig erstellt. Zudem wird der einfache Stil auf dieses Steuerelement angewendet. Wenn Sie beispielsweise eine Systemschaltfläche auf der Zeichenfläche erstellen, ergibt sich der folgende Code in Extensible Application Markup Language (XAML):

<Button Content="Button" ... />

Wenn Sie ein SimpleButton-Steuerelement auf der Zeichenfläche erstellen, enthält der resultierende XAML-Code einen Verweis auf den SimpleButton-Stil:

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

Nachdem Sie der Zeichenfläche ein Steuerelement für einen einfachen Stil hinzugefügt haben, wird Ihrer Anwendung eine Ressourcenverzeichnisdatei mit dem Namen SimpleStyles.xaml hinzugefügt. Diese Datei ist mit der Datei app.xaml verknüpft, sodass die Stile im Bereich der Anwendung definiert werden. Sie können alle Stile im Ressourcenpanel anzeigen.

Beispiele zur Verwendung einfacher Stile finden Sie in den Themen unter Einfache Stile. Weitere Informationen zum Verwalten von Ressourcen finden Sie unter Ressourcen (Übersicht).

Nach oben