Exemplarische Vorgehensweise: Erstellen einer Schaltfläche mit Microsoft Expression Blend

Artikel
05/04/2023

Diese exemplarische Vorgehensweise führt Sie durch den Prozess der Erstellung einer benutzerdefinierten WPF-Schaltfläche mit Microsoft Expression Blend.

Wichtig

Microsoft Expression Blend generiert XAML-Code (Extensible Application Markup Language), der anschließend kompiliert wird, um das ausführbare Programm zu erhalten. Wenn Sie stattdessen lieber direkt mit XAML arbeiten möchten, finden Sie unter dem nachfolgenden Link eine weitere Anleitung, mit der Sie dieselbe Anwendung wie in diesem Artikel mit XAML und Visual Studio statt mit Blend erstellen können. Weitere Informationen finden Sie unter Erstellen einer Schaltfläche mithilfe von XAML.

Die folgende Abbildung zeigt die benutzerdefinierte Schaltfläche, die Sie erstellen werden.

Konvertieren einer Form in eine Schaltfläche

Im ersten Teil dieser exemplarischen Vorgehensweise entwerfen Sie das Aussehen der benutzerdefinierten Schaltfläche. Dazu konvertieren Sie zunächst ein Rechteck in eine Schaltfläche. Anschließend fügen Sie der Schaltflächenvorlage weitere Formen hinzu, um ein etwas komplexes Erscheinungsbild zu erhalten. Warum nicht gleich mit einer regulären Schaltfläche beginnen und diese anpassen? Weil eine Schaltfläche über integrierte Funktionen verfügt, die Sie nicht benötigen. Für benutzerdefinierte Schaltflächen ist es einfacher, mit einem Rechteck zu beginnen.

So erstellen Sie ein neues Projekt in Expression Blend

Starten Sie Expression Blend. (Klicken Sie auf Start, zeigen Sie auf Alle Programme, zeigen Sie auf Microsoft Expression, und klicken Sie dann auf Microsoft Expression Blend).
Maximieren Sie die Anwendung, falls erforderlich.
Klicken Sie im Menü Datei auf Neues Projekt.
Wählen Sie Standardanwendung (.exe) aus.
Geben Sie dem Projekt den Namen CustomButton, und drücken Sie OK.

An diesem Punkt verfügen Sie über ein leeres WPF-Projekt. Sie können F5 drücken, um die Anwendung auszuführen. Wie zu erwarten, besteht die Anwendung nur aus einem leeren Fenster. Als Nächstes erstellen Sie ein abgerundetes Rechteck und wandeln es in eine Schaltfläche um.

So konvertieren Sie ein Rechteck in eine Schaltfläche

Legen Sie die Eigenschaft „Fensterhintergrund“ auf „Schwarz“ fest: Wählen Sie das Fenster aus, klicken Sie auf die Registerkarte Eigenschaften, und legen Sie die Eigenschaft Background auf Black fest.
Zeichnen Sie im Fenster ein Rechteck, das ungefähr die Größe einer Schaltfläche hat: Wählen Sie im Toolbereich auf der linken Seite das Rechtecktool aus, und ziehen Sie das Rechteck auf das Fenster.
Runden Sie die Ecken des Rechtecks ab: Ziehen Sie entweder an den Kontrollpunkten des Rechtecks, oder legen Sie die Eigenschaften RadiusX und RadiusY direkt fest. Legen Sie die Werte von RadiusX und RadiusY auf 20 fest.
Ändern Sie das Rechteck in eine Schaltfläche: Wählen Sie das Rechteck aus. Klicken Sie im Menü Extras auf Schaltfläche erstellen.
Geben Sie den Bereich der Formatvorlage/Vorlage an: Ein Dialogfeld wie das folgende wird angezeigt.

Wählen Sie für Ressourcenname (Schlüssel) die Einstellung Auf alle anwenden aus. Dadurch werden der resultierende Stil und die Schaltflächenvorlage auf alle Objekte angewendet, bei denen es sich um Schaltflächen handelt. Wählen Sie für Definieren in die Option Anwendung aus. Dadurch gelten der resultierende Stil und die Schaltflächenvorlage für die gesamte Anwendung. Wenn Sie die Werte in diesen beiden Feldern festlegen, werden der Schaltflächenstil und die Vorlage auf alle Schaltflächen in der gesamten Anwendung angewendet, und jede Schaltfläche, die Sie in der Anwendung erstellen, verwendet standardmäßig diese Vorlage.

Bearbeiten der Schaltflächenvorlage

Sie verfügen jetzt über ein Rechteck, das in eine Schaltfläche geändert wurde. In diesem Abschnitt ändern Sie die Schaltflächenvorlage und passen das Aussehen der Schaltfläche weiter an.

So bearbeiten Sie die Schaltflächenvorlage, um das Aussehen der Schaltfläche zu ändern

Wechseln Sie zur Ansicht „Vorlage bearbeiten“: Um das Aussehen unserer Schaltfläche weiter anzupassen, müssen wir die Schaltflächenvorlage bearbeiten. Diese Vorlage wurde erstellt, als wir das Rechteck in eine Schaltfläche umgewandelt haben. Um die Schaltflächenvorlage zu bearbeiten, klicken Sie mit der rechten Maustaste auf die Schaltfläche und wählen Steuerelementteile bearbeiten (Vorlage) und dann Vorlage bearbeiten aus.

Beachten Sie, dass die Schaltfläche im Vorlagen-Editor jetzt in ein Rectangle und einen ContentPresenter unterteilt ist. ContentPresenter wird verwendet, um den Inhalt der Schaltfläche darzustellen (zum Beispiel die Zeichenfolge „Schaltfläche“). Sowohl das Rechteck als auch der ContentPresenter sind in einem Grid angeordnet.
Ändern Sie die Namen der Vorlagenkomponenten: Klicken Sie mit der rechten Maustaste auf das Rechteck im Vorlageninventar, ändern Sie den Rectangle-Namen von [Rectangle] in „outerRectangle“, und ändern Sie [ContentPresenter] in „myContentPresenter“.
Verändern Sie das Rechteck so, dass es innen leer ist (wie ein Donut): Wählen Sie outerRectangle, und legen Sie Fill auf „Transparent“ und StrokeThickness auf 5 fest.

Legen Sie dann Stroke auf die Farbe der Vorlage fest, die Sie verwenden möchten. Klicken Sie dazu auf das kleine weiße Feld neben Strich, wählen Sie CustomExpression aus, und geben Sie im Dialogfeld {TemplateBinding Background} ein.
Erstellen Sie ein inneres Rechteck: Erstellen Sie nun ein weiteres Rechteck (nennen Sie dieses „innerRectangle“), und positionieren Sie es symmetrisch auf der Innenseite von outerRectangle. Für diese Aufgabe empfiehlt es sich, die Ansicht zu vergrößern, damit die Schaltfläche im Bearbeitungsbereich größer erscheint.

Hinweis

Ihr Rechteck kann anders aussehen als das in der Abbildung (es kann z. B. abgerundete Ecken aufweisen).
Verschieben Sie den ContentPresenter nach oben: An diesem Punkt ist es möglich, dass der Text „Schaltfläche“ nicht mehr sichtbar ist. Dies liegt daran, dass innerRectangle sich über myContentPresenter befindet. Um dies zu beheben, ziehen Sie myContentPresenter unter innerRectangle. Positionieren Sie die Rechtecke und myContentPresenter so, dass sie ähnlich wie unten aussehen.

Hinweis

Alternativ können Sie auch myContentPresenter ganz oben positionieren, indem Sie mit der rechten Maustaste darauf klicken und In den Vordergrund auswählen.
Ändern Sie das Aussehen von innerRectangle: Legen Sie die Werte RadiusX, RadiusY und StrokeThickness auf 20 fest. Legen Sie außerdem Fill auf den Hintergrund der Vorlage fest, indem Sie den benutzerdefinierten Ausdruck {TemplateBinding Background} verwenden, und legen Sie Stroke auf „Transparent“ fest. Beachten Sie, dass die Einstellungen für Fill und Stroke von innerRectangle das Gegenteil der Einstellungen für outerRectangle sind.
Fügen Sie eine Glasebene hinzu: Der letzte Schritt beim Anpassen des Aussehens der Schaltfläche besteht darin, eine Glasebene über die Schaltfläche zu legen. Diese Glasebene besteht aus einem dritten Rechteck. Da das Glas die gesamte Schaltfläche abdeckt, hat das Glasrechteck ähnliche Abmessungen wie das outerRectangle. Erstellen Sie daher das Rechteck, indem Sie einfach eine Kopie von outerRectangle erstellen. Markieren Sie outerRectangle, und erstellen Sie mithilfe von STRG+C und STRG+V eine Kopie. Geben Sie diesem neuen Rechteck den Namen „glassCube“.
Positionieren Sie bei Bedarf „glassCube“ neu: Wenn der glassCube nicht bereits so positioniert ist, dass er die gesamte Schaltfläche abdeckt, ziehen Sie ihn in Position.
Geben Sie „glassCube“ eine etwas andere Form als „outerRectangle“: Ändern Sie die Eigenschaften von glassCube. Ändern Sie zunächst die Eigenschaften RadiusX und RadiusY in den Wert 10 und StrokeThickness in den Wert 2.
Erzeugen Sie ein gläsernes Aussehen von „glassCube“: Verleihen Sie dem Fill ein gläsernes Aussehen, indem Sie einen linearen Farbverlauf verwenden, der eine Deckkraft von 75 % aufweist und in 6 annähernd gleichen Abständen zwischen den Farben „Weiß“ und „Transparent“ wechselt. Legen Sie die Farbverlaufsstopps folgendermaßen fest:
- Farbverlaufsstopp 1: Weiß mit Alphawert von 75 %
- Farbverlaufsstopp 2: Transparent
- Farbverlaufsstopp 3: Weiß mit Alphawert von 75 %
- Farbverlaufsstopp 4: Transparent
- Farbverlaufsstopp 5: Weiß mit Alphawert von 75 %
- Farbverlaufsstopp 6: Transparent
Auf diese Weise wird ein „wellenförmiges“ gläsernes Aussehen erzielt.
Blenden Sie die Glasebene aus: Nachdem Sie nun gesehen haben, wie die Glasebene aussieht, wechseln Sie zum Darstellungsbereich des Eigenschaftenbereichs und legen die Deckkraft auf 0 % fest, um die Glasebene auszublenden. In den folgenden Abschnitten werden wir Eigenschaftsauslöser und Ereignisse verwenden, um die Glasebene anzuzeigen und zu bearbeiten.

Anpassen des Schaltflächenverhaltens

An diesem Punkt haben Sie das Aussehen der Schaltfläche angepasst, indem Sie ihre Vorlage bearbeitet haben. Die Schaltfläche reagiert jedoch nicht auf Benutzeraktionen, wie dies bei typischen Schaltflächen der Fall ist (z. B. eine Änderung des Aussehens, wenn Sie mit der Maus auf die Schaltfläche zeigen, den Fokus erhalten und darauf klicken). Die nächsten beiden Schritte veranschaulichen die Erstellung von Verhalten wie diesen über die benutzerdefinierte Schaltfläche. Wir beginnen mit einfachen Eigenschaftsauslösern und fügen dann Ereignisauslöser und Animationen hinzu.

So legen Sie Eigenschaftsauslöser fest

Erstellen Sie einen neuen Eigenschaftsauslöser: Klicken Sie bei ausgewähltem glassCube im Auslöserpanel auf + Eigenschaft (siehe Abbildung im nächsten Schritt). Dadurch wird ein Eigenschaftsauslöser mit einem Standardeigenschaftsauslöser erstellt.
Verwenden Sie „IsMouseOver“ als Eigenschaft für den Auslöser: Ändern Sie die Eigenschaft in IsMouseOver. Dadurch wird der Eigenschaftsauslöser aktiviert, wenn die IsMouseOver-Eigenschaft true lautet (wenn der Benutzer mit der Maus auf die Schaltfläche zeigt).
Lösen Sie für „IsMouseOver“ eine Deckkraft von 100 % für „glassCube“ aus: Beachten Sie, dass die Triggeraufzeichnung aktiviert ist (siehe vorherige Abbildung). Das bedeutet, dass alle Änderungen, die Sie an den Eigenschaftswerten von glassCube vornehmen, während die Aufzeichnung aktiviert ist, zu einer Aktion werden, die stattfindet, wenn IsMouseOver den Wert true annimmt. Ändern Sie während der Aufzeichnung den Opacity-Wert von glassCube in 100 %.

Sie haben soeben Ihren ersten Eigenschaftsauslöser erstellt. Beachten Sie, dass das Auslöserpanel des Editors die Änderung von Opacity in 100 % aufgezeichnet hat.

Drücken Sie F5, um die Anwendung auszuführen, und bewegen Sie den Mauszeiger über die Schaltfläche. Die Glasebene sollte erscheinen, wenn Sie mit der Maus auf die Schaltfläche zeigen, und verschwinden, wenn der Mauszeiger nicht mehr darauf zeigt.
Lösen Sie bei „IsMouseOver“ eine Änderung des Strichwerts aus: Ordnen wir dem IsMouseOver-Trigger einige weitere Aktionen zu. Während die Aufzeichnung fortgesetzt wird, ändern Sie Ihre Auswahl von glassCube zu outerRectangle. Legen Sie dann den Stroke-Wert von outerRectangle auf den benutzerdefinierten Ausdruck {DynamicResource {x:Static SystemColors.HighlightBrushKey}} fest. Dadurch wird Stroke auf die typische Hervorhebungsfarbe von Schaltflächen eingestellt. Drücken Sie F5, um den Effekt zu sehen, wenn Sie mit der Maus auf die Schaltfläche zeigen.
Lösen Sie bei „IsMouseOver“ verschwommenen Text aus: Ordnen wir dem IsMouseOver-Eigenschaftsauslöser eine weitere Aktion zu. Lassen Sie den Inhalt der Schaltfläche ein wenig verschwommen erscheinen, wenn die Glasebene über der Schaltfläche erscheint. Zu diesem Zweck können wir einen Weichzeichner-BitmapEffect auf den ContentPresenter (myContentPresenter) anwenden.

Hinweis

Um den Eigenschaftenbereich wieder in den Zustand vor der Suche nach BitmapEffect zu versetzen, löschen Sie den Text aus dem Suchfeld.

An diesem Punkt haben wir einen Eigenschaftsauslöser mit mehreren zugeordneten Aktionen verwendet, um ein Hervorhebungsverhalten zu erzeugen, wenn der Mauszeiger in den Schaltflächenbereich eintritt und diesen verlässt. Ein weiteres typisches Verhalten für eine Schaltfläche ist, dass sie hervorgehoben wird, wenn sie den Fokus hat (z. B. nachdem auf sie geklickt wurde). Wir können dieses Verhalten hinzufügen, indem wir einen weiteren Eigenschaftsauslöser für die Eigenschaft IsFocused hinzufügen.
Erstellen Sie einen Eigenschaftsauslöser für „IsFocused“: Verfahren Sie genauso wie bei IsMouseOver (siehe erster Schritt in diesem Abschnitt), um einen weiteren Eigenschaftsauslöser für die Eigenschaft IsFocused zu erstellen. Während die Triggeraufzeichnung aktiviert ist, fügen Sie dem Auslöser die folgenden Aktionen hinzu:
- glassCube erhält einen Opacity-Wert von 100 %.
- outerRectangle erhält für Stroke den benutzerdefinierten Ausdruckswert {DynamicResource {x:Static SystemColors.HighlightBrushKey}}.

Als letzten Schritt in dieser exemplarischen Vorgehensweise fügen wir der Schaltfläche Animationen hinzu. Diese Animationen werden durch Ereignisse ausgelöst, insbesondere durch die Ereignisse MouseEnter und Click.

So verwenden Sie Ereignisauslöser und Animationen zum Hinzufügen von Interaktivität

Erstellen Sie einen Ereignisauslöser für „MouseEnter“: Fügen Sie einen neuen Ereignisauslöser hinzu, und wählen Sie MouseEnter als Ereignis für den Auslöser aus.
Erstellen Sie eine Animationszeitachse: Als Nächstes ordnen Sie dem Ereignis MouseEnter eine Animationszeitachse zu.

Nachdem Sie auf OK gedrückt haben, um eine neue Zeitachse zu erstellen, erscheint ein Zeitachsenbereich, und im Designbereich wird „Zeitachsenaufzeichnung ist aktiviert“ angezeigt. Das bedeutet, dass wir mit der Aufzeichnung von Eigenschaftsänderungen in der Zeitachse beginnen können (Animation von Eigenschaftsänderungen).

Hinweis

Möglicherweise müssen Sie die Größe Ihres Fensters und/oder Ihrer Bereiche ändern, um die Anzeige zu sehen.
Erstellen Sie einen Keyframe: Um eine Animation zu erstellen, wählen Sie das Objekt aus, das Sie animieren möchten. Dann erstellen Sie mindestens zwei Keyframes auf der Zeitachse und legen für diese Keyframes die Eigenschaftswerte fest, zwischen denen die Animation interpoliert werden soll. Die folgende Abbildung leitet Sie durch die Erstellung eines Keyframes.
Verkleinern Sie „glassCube“ an diesem Keyframe: Während der zweite Keyframe ausgewählt ist, verringern Sie die Größe von glassCube mit der Funktion Größe transformieren auf 90 % seiner vollen Größe.

Drücken Sie F5, um die Anwendung auszuführen. Bewegen Sie den Mauszeiger über die Schaltfläche. Beachten Sie, dass die Glasebene über der Schaltfläche schrumpft.
Erstellen Sie einen weiteren Ereignisauslöser, und ordnen Sie ihm eine andere Animation zu: Fügen wir eine weitere Animation hinzu. Gehen Sie dabei ähnlich vor wie beim Erstellen der vorherigen Ereignisauslöseranimation:
1. Erstellen Sie einen neuen Ereignisauslöser, der das Ereignis Click verwendet.
2. Ordnen Sie dem Ereignis Click eine neue Zeitachse hinzu.
3. Erstellen Sie für diese Zeitachse zwei Keyframes, einen bei 0,0 Sekunden und den zweiten bei 0,3 Sekunden.
4. Während der Keyframe bei 0,3 Sekunden markiert ist, legen Sie den Drehwinkel auf 360 Grad fest.
5. Drücken Sie F5, um die Anwendung auszuführen. Klicken Sie auf die Schaltfläche. Beachten Sie, dass sich die Glasebene dreht.

Zusammenfassung

Sie haben eine benutzerdefinierte Schaltfläche erstellt. Dazu haben Sie eine Schaltflächenvorlage verwendet, die auf alle Schaltflächen in der Anwendung angewendet wurde. Wenn Sie den Bearbeitungsmodus der Vorlage verlassen (siehe folgende Abbildung) und weitere Schaltflächen erstellen, werden Sie feststellen, dass diese in Aussehen und Verhalten nicht der Standardschaltfläche, sondern Ihrer benutzerdefinierten Schaltfläche entsprechen.

Drücken Sie F5, um die Anwendung auszuführen. Klicken Sie auf die Schaltflächen und beachten Sie, dass sie sich alle gleich verhalten.

Zur Erinnerung: Beim Anpassen der Vorlage haben Sie die Fill-Eigenschaft von innerRectangle und die Stroke-Eigenschaft für outerRectangle auf den Vorlagenhintergrund festgelegt ({TemplateBinding Background}). Daher wird beim Festlegen der Hintergrundfarbe für die einzelnen Schaltflächen der von Ihnen festgelegte Hintergrund für die jeweiligen Eigenschaften verwendet. Versuchen Sie jetzt, die Hintergründe zu ändern. In der folgenden Abbildung werden verschiedene Farbverläufe verwendet. Obwohl eine Vorlage für die allgemeine Anpassung von Steuerelementen wie Schaltflächen nützlich ist, können Steuerelemente mit Vorlagen dennoch so verändert werden, dass sie sich voneinander unterscheiden.

Zusammenfassend lässt sich sagen, dass Sie durch die Anpassung einer Schaltflächenvorlage gelernt haben, wie Sie in Microsoft Expression Blend folgende Aufgaben ausführen können:

Anpassen des Aussehens eines Steuerelements
Festlegen von Eigenschaftsauslösern: Eigenschaftsauslöser sind sehr nützlich, da sie nicht nur für Steuerelemente, sondern für die meisten Objekte verwendet werden können.
Festlegen von Ereignisauslösern: Ereignisauslöser sind sehr nützlich, da sie nicht nur für Steuerelemente, sondern für die meisten Objekte verwendet werden können.
Erstellen von Animationen
Verschiedenes: Erstellen von Farbverläufen, Hinzufügen von BitmapEffects, Verwenden von Transformationen und Festlegen grundlegender Eigenschaften von Objekten.