Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente

Artikel
10/11/2017

Ee371156.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(de-de,Expression.40).png

Microsoft Expression Blend beinhaltet eine ganze Reihe von Microsoft Silverlight-Steuerelementen, die Sie zum Gestalten einer einzigartigen Benutzererfahrung einsetzen können. Sie können Steuerelemente auch aus vertrauenswürdigen Quellen herunterladen.

Weitere Informationen finden Sie unter Importieren von benutzerdefinierten Steuerelementen durch Hinzufügen von Verweisen.

Falls Sie ein Steuerelement ausgewählt haben, das Ihre Funktionsanforderungen erfüllt, aber nicht wie gewünscht aussieht, und dieses Steuerelement Vorlagen unterstützt, können Sie die Darstellung des Steuerelements ändern, indem Sie die Vorlagen anpassen.

Zeichnen Sie Ihren Entwurf der Einfachheit halber zunächst mit den Zeichenwerkzeugen auf der Zeichenfläche. Sie können auch Grafiken oder andere Objekte importieren. Anschließend können Sie die Objekte mit dem Befehl Steuerelement erstellen in eine Vorlage für ein beliebiges Steuerelement konvertieren.

Vorlagenbindung

Steuerelemente haben Eigenschaften, an die Objekte in einer Vorlage gebunden werden können. Dieser Vorgang wird als Vorlagenbindung bezeichnet. Wenn Sie Teile einer Vorlage an ein Steuerelement binden, erstellen Sie faktisch Parameter für die Vorlage. Sie sagen z. B. "Dieses Rectangle -Objekt hat die gleiche Farbe wie die Background -Eigenschaft des Steuerelements." anstatt "Dieses Rectangle -Objekt ist blau." Wenn Sie also die Vorlage an ein Steuerelement mit anderen Background -Eigenschaften binden, ist das Ergebnis eine farblich geänderte Vorlage.

Wählen Sie ein Objekt in einer Vorlage aus, klicken Sie im Eigenschaftenpanel auf Erweiterte Optionen, und wählen Sie dann über die Option Vorlagenbindung eine Eigenschaft aus, um diese Eigenschaft an die Vorlage zu binden.

Einige Eigenschaften, wie z. B. OpacityMask , Font , FontSize , LayoutTransform und RenderTransform müssen nicht vorlagengebunden sein. Diese Eigenschaften werden automatisch auf die Objekte in den Vorlagen angewendet.

Content- und Header-Eigenschaften

Einige Steuerelemente enthalten eine Content -Eigenschaft ( Button , CheckBox und RadioButton ) oder eine Header -Eigenschaft ( TabItem und MenuItem ). Mit Content - und Header -Eigenschaften kann jede Art von Inhalt angezeigt werden.

So zeigen Sie Inhalt beliebiger Art an

Wenn Sie Inhalt beliebiger Art anzeigen möchten (nicht einfach nur Text), benötigen Sie einen ContentPresenter in Ihrer Vorlage mit einer Content - oder einer Header -Eigenschaft, die an die Content - bzw. an die Header -Eigenschaft des Steuerelements gebunden ist. Wenn Sie die Option Steuerelement erstellen verwenden, um aus Vorlagen eine Vorlage zu erstellen, wird der Vorlage von Expression Blend ein ContentPresenter hinzugefügt. Wenn Sie ein TextBlock -Objekt zur Anzeige des Inhalts verwendet haben, löschen Sie das TextBlock-Objekt, nachdem Sie aus der Vorlage ein Steuerelement erstellt haben. Der zuvor im TextBlock -Objekt angezeigte Inhalt wird nun im ContentPresenter-Objekt angezeigt.

So zeigen Sie Text an

Wenn Sie nur Text anzeigen möchten, können Sie statt eines ContentPresenter -Objekts ein TextBlock -Objekt verwenden. Fügen Sie das TextBlock -Objekt in die Vorlage ein, und binden Sie die Text -Eigenschaft des TextBlock -Objekts mithilfe der Vorlagenbindung an die Content - bzw. die Header -Eigenschaft des Button -Objekts. Wenn Sie die Option Steuerelement erstellen verwenden, um aus Vorlagen eine Vorlage zu erstellen, und ein TextBlock -Objekt zur Anzeige des Inhalts verwendet haben, löschen Sie das ContentPresenter-Objekt, das der Vorlage in Expression Blend hinzugefügt wurde. Wenn Sie der Content -Eigenschaft (oder der Header -Eigenschaft) eines Steuerelements Text hinzufügen und dabei diesen Stil anwenden, wird der Text im TextBlock -Objekt angezeigt.

Erstellen eines ContentControl-Steuerelements

Wenn Sie die Option Steuerelement erstellen verwenden, um aus Vorlagen mit einem TextBlock -Objekt eine Vorlage für ein ContentControl -Steuerelement (z. B. eine Schaltfläche) zu erstellen, werden in Expression Blend folgende Schritte ausgeführt:

An die Stelle des TextBlock -Objekts wird ein ContentPresenter -Objekt in die Vorlage eingefügt.
Die Layout-Eigenschaften des TextBlock -Objekts werden in das ContentPresenter -Objekt kopiert.
Die Typography -Eigenschaften des TextBlock -Objekts werden in den Stil des Steuerelements kopiert.
Die Text -Eigenschaften des TextBlock -Objekts werden in die Instanz der Content -Eigenschaft des Steuerelements kopiert.

Erstellen eines TextBox-Steuerelements

Wenn Sie die Option Steuerelement erstellen verwenden, um aus Vorlagen mit einem TextBlock -Objekt eine Vorlage für ein TextBox -Steuerelement zu erstellen, werden in Expression Blend folgende Schritte ausgeführt:

An die Stelle des TextBlock -Objekts wird ein ScrollViewer -Objekt in die Vorlage eingefügt, das das ContentElement -Teil darstellt.
Die Layout-Eigenschaften des TextBlock -Objekts werden in das ContentElement -Teil kopiert.
Die Typography -Eigenschaften des TextBlock -Objekts werden in den TextBox -Stil kopiert.
Die Text -Eigenschaft des TextBlock -Objekts werden in die Instanz des TextBox -Steuerelements kopiert.

Visueller Zustand

Visuelle Zustände schließen sich in einer Statusgruppe gegenseitig aus. Zustände in einer Gruppe sind jedoch unabhängig von den Zuständen in anderen Gruppen. Das bedeutet, dass jeder Zustand einer Gruppe zu jeder Zeit angewendet werden kann, ohne dass dies zu einem Konflikt führt.

Es kommt häufig vor, dass eine Eigenschaft eines Objekts in mehr als einem Zustand in derselben Gruppe geändert wird. Angenommen, Sie möchten die Fill -Eigenschaft des Rectangle -Objekts für die Zustände MouseOver , Pressed und Disabled ändern. Dies ist möglich, da nie mehrere Zustände aus der CommonStates -Statusgruppe gleichzeitig angewendet werden. Wenn Sie jedoch die Eigenschaft eines Objekts in mehreren Statusgruppen ändern, ist die Unabhängigkeit der Statusgruppen nicht mehr gewährleistet und es können Konflikte auftreten, wenn von mehreren Zuständen gleichzeitig versucht wird, die Eigenschaft desselben Objekts festzulegen. Von Expression Blend wird eine Warnung ausgegeben, wenn ein Zustandskonflikt auftritt.

Wichtig:
Jedem Zustand muss innerhalb einer Vorlage ein eindeutiger Name zugewiesen werden, sogar über Statusgruppen hinweg.

Der visuelle Zustand "Normal"

Jede Statusgruppe enthält einen Standardzustand. So enthält z. B. die Statusgruppe CommonStates den Standardzustand Normal und die Statusgruppe CheckedStates den Standardzustand Unchecked . In der Praxis hat es sich bewährt, den Standardzustand beizubehalten, wenn die Eigenschaften eines Objekts geändert werden. So sind z. B. für das CheckBox-Objekt die Rechtecke für das Häkchen und das Kontrollkästchen in der Base -Vorlage leer (hidden, ausgeblendet). In den Zuständen Checked (für das Häkchen) und Focused (für das Rechteck des Kontrollkästchen) werden sie jedoch angezeigt.

Beachten Sie, dass Base kein Zustand ist. Aus diesem Grund können Sie keine Übergänge von und nach Base definieren oder steuern. Sie können z. B. keinen Übergang von Base zum Zustand MouseOver definieren, da Base kein Zustand ist. Base ist eine einfache Vorlage, auf die keine Zustände angewendet sind. Beim Definieren von Übergängen sollten nur Zustände berücksichtigt werden.

Wenn Sie Ihre eigenen Steuerelementvorlagen erstellen, muss für jede Statusgruppe ein Normal-Zustand definiert sein und das Steuerelement muss sich beim Laden standardmäßig im Normal-Zustand befinden. Wenn sich das Steuerelement (z. B. ein Button ) beim Laden nicht im Normal-Zustand befindet, wird der Übergang (z. B. vom Normal -Zustand in den MouseOver -Zustand) nicht ausgeführt.

In diesem Abschnitt

Siehe auch

Konzepte

Definieren unterschiedlicher visueller Zustände für ein Steuerelement
Formatieren der Teile einer Silverlight-Steuerelementvorlage
Formatieren eines Steuerelements, das Vorlagen unterstützt
Formatierungstipps für einfache WPF-Formatvorlagen

Freigeben über