Anleitung: Erstellen einer Schaltfläche mit Microsoft Expression Blend

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

Wichtig

Microsoft Expression Blend funktioniert, indem erweiterbare Anwendungsmarkierungssprache (XAML) generiert wird, die dann kompiliert wird, um das ausführbare Programm zu erstellen. Wenn Sie lieber direkt mit XAML arbeiten möchten, gibt es eine andere exemplarische Vorgehensweise, die dieselbe Anwendung wie diese erstellt, jedoch XAML zusammen mit Visual Studio anstelle von Blend verwendet. Weitere Informationen finden Sie unter Erstellen einer Schaltfläche mithilfe von XAML-.

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

Konvertiere eine 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 Vorlage der Schaltfläche zusätzliche Shapes hinzu, wodurch eine komplexer aussehende Schaltfläche erstellt wird. Warum nicht mit einer regulären Schaltfläche beginnen und anpassen? Da 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

1. Starten Sie Expression Blend. (Klicken Sie auf Start, gehen Sie zu Alle Programme, gehen Sie zu Microsoft Expression, und klicken Sie dann auf Microsoft Expression Blend.)

2. Maximieren Sie die Anwendung, falls erforderlich.

3. Klicken Sie im Menü Datei auf Neues Projekt.

4. Wählen Sie Standardanwendung (.exe) aus.

5. Benennen Sie das Projekt 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 Sie erwarten, besteht die Anwendung nur aus einem leeren Fenster. Als Nächstes erstellen Sie ein abgerundetes Rechteck und konvertieren es in eine Schaltfläche.

So konvertieren Sie ein Rechteck in eine Schaltfläche

1. Legen Sie die Eigenschaft "Fensterhintergrund" auf Schwarz fest: Fenster auswählen, klicken Sie auf die Registerkarte Eigenschaften, und legen Sie die Background Eigenschaft auf Blackfest.

   

2. Zeichnen Sie ein Rechteck in etwa der Größe einer Schaltfläche im Fenster: Wählen Sie das Rechteckwerkzeug in der linken Werkzeugleiste aus, dann ziehen Sie das Rechteck ins Fenster.

   

3. 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.

   

4. Ändern des Rechtecks in eine Schaltfläche: Wählen Sie das Rechteck aus. Klicken Sie im Menü Extras auf Schaltfläche erstellen.

   

5. 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 wird die resultierende Stil- und Schaltflächenvorlage auf die gesamte Anwendung anwendbar sein. Wenn Sie die Werte in diesen beiden Feldern festlegen, gelten der Schaltflächenstil und die Vorlage für alle Schaltflächen innerhalb der gesamten Anwendung, und alle Schaltflächen, die Sie in der Anwendung erstellen, verwenden standardmäßig diese Vorlage.

Vorlage für Schaltflächen bearbeiten

Sie haben jetzt ein Rechteck, das zu einer Schaltfläche geändert wurde. In diesem Abschnitt ändern Sie die Vorlage der Schaltfläche und passen die Darstellung weiter an.

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

1. In die Bearbeitungsvorlagenansicht wechseln: Um das Erscheinungsbild unserer Schaltfläche weiter anzupassen, müssen wir die Schaltflächenvorlage bearbeiten. Diese Vorlage wurde erstellt, als wir das Rechteck in eine Schaltfläche konvertiert 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 im Vorlagen-Editor, dass die Schaltfläche jetzt in Rectangle und ContentPresenteraufgeteilt 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.

   

2. Ä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“.

   

3. 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.

   

4. Erstellen Sie ein inneres Rechteck: Erstellen Sie jetzt ein weiteres Rechteck (nennen Sie es "innerRectangle") und positionieren Sie es symmetrisch auf der Innenseite des outerRectangle . Für diese Art von Arbeit möchten Sie wahrscheinlich zoomen, um die Schaltfläche im Bearbeitungsbereich zu vergrößern.

   Anmerkung

   Ihr Rechteck sieht möglicherweise anders aus als das Rechteck in der Abbildung (z. B. abgerundete Ecken).

   

5. ContentPresenter nach oben verschieben: 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.

   Anmerkung

   Alternativ können Sie auch myContentPresenter ganz oben positionieren, indem Sie mit der rechten Maustaste darauf klicken und In den Vordergrund auswählen.

   

6. Ändern des Aussehens von innerRectangle: Legen Sie die Werte RadiusX, RadiusYund 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.

   

7. Oben eine Glasschicht hinzufügen: Der letzte Teil der Anpassung des Erscheinungsbilds der Schaltfläche besteht darin, eine Glasschicht oben hinzuzufügen. Diese Glasschicht 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. Nennen Sie dieses neue Rechteck "glassCube".

8. 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.

9. Geben Sie „glassCube“ eine etwas andere Form als „outerRectangle“: Ändern Sie die Eigenschaften von glassCube. Beginnen Sie, indem Sie die Eigenschaften RadiusX und RadiusY auf 10 und die StrokeThickness auf 2 ändern.

   

10. 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.

    

11. 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 Erscheinungsbild der Schaltfläche durch Bearbeiten der Vorlage angepasst, sie reagiert jedoch nicht auf Benutzeraktionen wie typische Schaltflächen (z. B. das Ändern der Darstellung beim Überfahren mit der Maus, das Fokussieren und das Klicken.) Die nächsten beiden Verfahren zeigen, wie solche Verhaltensweisen in der benutzerdefinierten Schaltfläche erstellt werden können. Wir beginnen mit einfachen Eigenschaftentriggern und fügen dann Ereignistrigger und Animationen hinzu.

So legen Sie Eigenschaftsauslöser fest

1. 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.

2. Machen Sie IsMouseOver zur Eigenschaft, die vom Trigger verwendet wird: Ändern Sie die Eigenschaft in IsMouseOver. Dadurch wird der Eigenschaftstrigger aktiviert, wenn die Eigenschaft IsMouseOver den Wert true hat (wenn der Benutzer mit der Maus auf die Schaltfläche zeigt).

   

3. 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 und von der Schaltfläche hinweg. Die Glasebene sollte erscheinen, wenn Sie mit der Maus auf die Schaltfläche zeigen, und verschwinden, wenn der Mauszeiger nicht mehr darauf zeigt.

4. 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 anzuzeigen, wenn Sie mit der Maus auf die Schaltfläche klicken.

   

5. 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.

   

   Anmerkung

   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 einer Schaltfläche ist, dass sie hervorgehoben wird, wenn sie im Fokus steht (wie nach dem Klicken). Wir können dieses Verhalten hinzufügen, indem wir einen weiteren Eigenschaftsauslöser für die Eigenschaft IsFocused hinzufügen.

6. Erstellen Sie einen Eigenschaftsauslöser für IsFocused: Verwenden Sie das gleiche Verfahren wie für IsMouseOver (siehe den ersten Schritt dieses Abschnitts), um einen weiteren Eigenschaftsauslöser für die IsFocused-Eigenschaft 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 letzter 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 Ereignistrigger und Animationen zum Hinzufügen von Interaktivität

1. Einen MouseEnter-Ereignistrigger erstellen: Fügen Sie einen neuen Ereignistrigger hinzu, und wählen Sie MouseEnter als ereignis aus, das im Trigger verwendet werden soll.

   

2. 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).

   Anmerkung

   Möglicherweise müssen Sie die Größe des Fensters und/oder der Panels ändern, um die Anzeige zu sehen.

   

3. Erstellen eines Keyframes: Um eine Animation zu erstellen, wählen Sie das Zu animierenden Objekt aus, erstellen Sie zwei oder mehr Keyframes auf der Zeitachse, und legen Sie für diese Keyframes die Eigenschaftswerte fest, zwischen denen die Animation interpoliert werden soll. Die folgende Abbildung leitet Sie durch die Erstellung eines Keyframes.

   

4. 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 Glasschicht über der Taste schrumpft.

5. Erstellen Sie einen weiteren Ereignisauslöser, und ordnen Sie ihm eine andere Animation zu: Fügen wir eine weitere Animation hinzu. Verwenden Sie eine ähnliche Prozedur wie zum Erstellen der vorherigen Ereignistriggeranimation:

   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 Glasschicht umdreht.

Schlussfolgerung

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 aussehen und sich verhalten wie Ihre benutzerdefinierte Schaltfläche und nicht wie die Standardschaltfläche.

Drücken Sie F5, um die Anwendung auszuführen. Klicken Sie auf die Schaltflächen, und beachten Sie, wie 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}). Aus diesem Grund werden beim Festlegen der Hintergrundfarbe der einzelnen Schaltflächen der von Ihnen festgelegte Hintergrund für diese 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.

Abschließend haben Sie im Prozess der Anpassung einer Schaltflächenvorlage gelernt, wie Sie die folgenden Schritte in Microsoft Expression Blend ausführen:

• Passen Sie das Aussehen eines Steuerelements an.

• Festlegen von Eigenschaftsauslösern. Eigenschaftsauslöser sind sehr nützlich, da sie für die meisten Objekte verwendet werden können, nicht nur Steuerelemente.

• Ereignistrigger einstellen. Ereignistrigger sind sehr nützlich, da sie für die meisten Objekte verwendet werden können, nicht nur Steuerelemente.

• Erstellen sie Animationen.

• Sonstiges: Erstellen von Farbverläufen, Hinzufügen von BitmapEffects, Verwenden von Transformationen und Festlegen grundlegender Eigenschaften von Objekten.

Siehe auch

• Erstellen einer Schaltfläche mithilfe von XAML-
• Erstellen von Formaten und Vorlagen
• Übersicht über Animationen
• Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen
• Übersicht über Bitmapeffekte