Formatieren eines Steuerelements, das Vorlagen unterstützt

Sie können Windows Presentation Foundation (WPF)- und Microsoft Silverlight-Steuerelemente anpassen, indem Sie Vorlagen und Formatvorlagen für Steuerelementvorlagen erstellen und bearbeiten. Dies führt zu einem unverwechselbaren, konsistenten Aussehen Ihrer Anwendung.

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 Formatvorlagen und Vorlagen. Anhand der Tabelle können Sie einfacher entscheiden, ob Sie die Formatvorlage 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 einer für eine Schaltfläche gültigen Formatvorlage einen Auslöser angeben, der die Hintergrundfarbe ändert, wenn ein Benutzer den Mauszeiger auf die Schaltfläche bewegt. 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 ein Benutzer den Mauszeiger auf die Schaltfläche bewegt. 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 im Panel 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 Aktuellen bearbeiten (um die Formatvorlage zu ändern, die 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 Formatvorlage bearbeiten ist nicht verfügbar, wenn die Systemformatvorlage auf das Steuerelement angewendet wird. Ein Beispiel finden Sie unter Erstellen einer Formatvorlage. Mit dem Ressourcenpanel (zum Ändern eines vorhandenen Stils) Suchen Sie im Ressourcenpanel nach der Formatvorlage, und klicken Sie neben ihr auf die Schaltfläche Ressource bearbeiten. 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 Formatvorlage.	Sie können den Bearbeitungsmodus für eine Steuerelementvorlage mit den folgenden Methoden aufrufen: Mit dem Menü Wählen Sie im Panel Objekte und Zeitachsen das Steuerelement aus. Führen Sie einen der folgenden Schritte aus: Zeigen Sie im Menü Objekt auf Vorlage bearbeiten. Klicken Sie mit der rechten Maustaste auf das Steuerelement, und zeigen Sie auf Vorlage bearbeiten. Klicken Sie auf Aktuellen bearbeiten (um die gerade auf das Steuerelement angewendete Vorlage zu bearbeiten) oder 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 Aktuellen bearbeiten ist nicht verfügbar, wenn die Systemvorlage auf das Steuerelement angewendet wird. Ein Beispiel finden Sie unter Erstellen oder Bearbeiten einer Vorlage. 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 im Panel Objekte und Zeitachsen auf die Style-Elemente, zeigen Sie auf Vorlage bearbeiten, und klicken Sie auf Aktuellen 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 nicht auf Kopie bearbeiten, sondern auf Aktuellen bearbeiten, weil die Kopie der Formatvorlage die Vorlage enthält.Wenn Sie in den Bearbeitungsbereich des Hauptdokuments zurückkehren möchten, klicken Sie zweimal auf Zurück zum Anfang . Durch das erste Klicken kehren Sie in den Bearbeitungsmodus der Formatvorlage 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 einer Vorlage.
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 im Panel 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 des Objektepanels zum Zeichnen eines Steuerelements mit zugewiesener Formatvorlage auf der Zeichenfläche Öffnen Sie das Objektepanel, indem Sie auf Objekte klicken. Führen Sie einen der folgenden Schritte aus: Wenn die Formatvorlage in dem Dokument erstellt wurde, in dem Sie gerade arbeiten, klicken Sie auf die Kategorie Formatvorlagen. Wenn die Formatvorlage in einem Ressourcenverzeichnis erstellt wurde, erweitern Sie die Kategorie Formatvorlagen, und klicken Sie anschließend auf den Namen des Verzeichnisses. 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 im Panel Objekte und Zeitachsen das Steuerelement aus. Zeigen Sie im Menü Objekt auf Vorlage bearbeiten, zeigen Sie auf Ressource anwenden, und wählen Sie Sie anschließend die Vorlage aus der angezeigten Dropdownliste aus. Die Dropdownliste zeigt nur Vorlagen an, die für das ausgewählte Steuerelement verfügbar sind. Sie können beispielsweise keine Textfeldvorlage auf eine Schaltfläche anwenden. Verwenden des Objektepanels zum Ziehen eines Steuerelements mit zugewiesener Vorlage auf der Zeichenfläche Vorlagen sind in Formatvorlagen enthalten. Um eine Vorlage auf ein Steuerelement auf der Zeichenfläche anzuwenden, gehen Sie wie bei der Anwendung von Formatvorlagen vor.

Expression Blend enthält eine Reihe einfacher Formatvorlagen 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 unter "Einfache Formatvorlagen- und Ressourcenverzeichnisse" weiter unten in diesem Thema.

Ãndern von Stilen und Vorlagen

Wenn Sie sich im Bearbeitungsbereich einer Formatvorlage oder einer Vorlage in Expression Blend 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 einer Vorlage.

Bewährte Methoden

Wenn Sie Formatvorlagen oder Vorlagen ändern, stellen Sie sicher, dass Sie die folgenden bewährten Methoden übernehmen:

• Ä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. Bindungen werden durch eine gelbe Markierung um die Eigenschaft oder durch die gelbe Schaltfläche Erweiterte Eigenschaftenoptionen identifiziert. 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.

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

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 WPF wird beispielsweise ein Design für WPF-Anwendungen verwendet, die unter 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 Formatvorlagen 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 der 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.

Einfache Stile und Ressourcenverzeichnisse

Hinweis:
Einfache Formatvorlagen werden in Silverlight-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 Ressourcenverzeichnissen können Sie Designs in mehreren Anwendungen wieder verwenden. 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 Formatvorlagen für gängige Steuerelemente wie Schaltflächen, Listenfelder u. a. enthält. Sie können im Objektepanel auf der Registerkarte Steuerelemente unter Einfache Steuerelemente auf diese Steuerelemente 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 ein System-Button-Element auf der Zeichenfläche erstellen, ergibt sich folgender 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 verlinkt, sodass die Stile im Bereich der Anwendung definiert werden. Sie können alle Stile im Ressourcenpanel anzeigen.

Weitere Informationen zum Verwalten von Ressourcen finden Sie unter Erstellen von wiederverwendbaren Ressourcen.

Siehe auch

Konzepte

Formatierungstipps für einfache WPF-Formatvorlagen

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente