Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung

Zum Erstellen einer Schaltfläche in einer Microsoft Silverlight 1.0-Anwendung müssen Sie die Elemente für die Schaltfläche zeichnen, die Elemente zur Vereinfachung von Kopiervorgängen mit einem Layoutpanel umschließen sowie JavaScript-Code schreiben, der beim Auftreten von Schaltflächenereignissen eine bestimmte Aktion ausführt (z. B. beim Klicken auf die Schaltfläche).

Hinweis:
Ein vollständiges Beispiel mit mehreren Schaltflächenereignissen finden Sie im ButtonGallery-Beispiel. Zum Öffnen dieses Beispiel klicken Sie im Hilfemenü auf Willkommenseite und klicken dann auf der Registerkarte Beispiele auf ButtonGallery.

Zeichnen der Schaltflächenelemente

Beim Erstellen der Schaltfläche können Sie beliebige Elemente verwenden, wie z. B. Formen, Linien, Text und Bilder. Im folgenden Verfahren wird gezeigt, wie Sie ein Rechteck und einen Textblock zeichnen. Sie können jedoch alle unter Hinzufügen von Elementen zu XAML-Dokumenten in Silverlight-Projekten beschriebenen Verfahren verwenden.

So zeichnen Sie die Schaltflächenelemente

1. Wählen Sie in der Werkzeugpalette das Rechteckwerkzeug aus, während ein Silverlight 1.0-Projekt in Microsoft Expression Blend 2 geöffnet ist.

   

   Wenn das Rechteckwerkzeug nicht angezeigt wird, klicken Sie mit der rechten Maustaste auf die Werkzeugcontainer, um das Rechteckwerkzeug zu suchen und auszuwählen.

   

2. Zeichnen Sie durch Ziehen des Mauszeigers ein Rechteck auf der Zeichenfläche. Beim Zeichnen nimmt der Mauszeiger die Form eines Fadenkreuzes an.

   

3. Wählen Sie das neue Rechteckelement unter Objekte und Zeitachsen aus, und ändern Sie dessen Darstellung. Klicken Sie beispielsweise im Eigenschaftenpanel unter Pinsel auf der Registerkarte Farbverlaufspinsel auf Füllung, und definieren Sie anschließend Farben für die Farbverlaufsstopps.

   

   Hinweis:
   Mithilfe der unter Darstellung und Transformationen beschriebenen Verfahren können Sie weitere Änderungen an der Darstellung des Rechtecks vornehmen.

4. Wählen Sie in der Werkzeugpalette das TextBlock-Steuerelement aus.

   

5. Zeichnen Sie über dem Rechteck ein Textblockelement. Möglicherweise müssen Sie die Größe des Rechtecks oder der Textblockelemente ändern oder diese Elemente verschieben, indem Sie in der Werkzeugpalette das Auswahlwerkzeug auswählen und die blauen Funktionsindikatoren der Elemente auf der Zeichenfläche ziehen.

   

6. Wählen Sie ein neues Textblockelement unter Objekte und Zeitachsen aus, und drücken Sie F2 zum Aktivieren des Textbearbeitungsmodus, und geben Sie Button ein, um den für das Element angezeigten Text zu ändern. Klicken Sie außerhalb des Textblockelements, um den Textbearbeitungsmodus zu beenden.

   Hinweis:
   Weitere Informationen zum Ändern der Darstellung des Textblocks finden Sie unter Text und Typografie.

7. Um die Schaltfläche fertig zu stellen, können Sie mithilfe der unter Hinzufügen von Elementen zu XAML-Dokumenten in Silverlight-Projekten beschriebenen Verfahren weitere Elemente auf der Zeichenfläche zeichnen.

Nach oben

Umschließen von Schaltflächenelementen in einem Layoutpanel

Durch Umschließen der Schaltflächenelemente in einem einzelnen Layoutpanel (ein Canvas-Element), vereinfachen Sie das Duplizieren der Schaltfläche. Dies liegt daran, dass Sie einfach das Layoutpanel kopieren und einfügen können und nicht alle Elemente, aus denen die Schaltfläche besteht, auswählen und anschließend duplizieren müssen. Darüber hinaus wird durch das Umschließen der Schaltflächenelemente im Canvas-Layoutpanel auch das Erstellen von Ereignishandlern für Ihre Schaltflächen vereinfacht. Beispielsweise können Sie einen Ereignishandler erstellen, der ausgelöst wird, wenn der Mauszeiger über das Layoutpanel als Ganzes bewegt wird. Normalerweise würde der Ereignishandler ausgelöst, wenn der Mauszeiger über einen Teil der Schaltfläche bewegt wird.

So umschließen Sie Elemente in einem Layoutpanel

1. Halten Sie unter Objekte und Zeitachsen die STRG-TASTE gedrückt, und wählen Sie alle Elemente aus, aus denen Ihre Schaltfläche besteht.

2. Klicken Sie mit der rechten Maustaste auf die ausgewählten Elemente, zeigen Sie auf Gruppieren in, und klicken Sie dann auf Canvas.

   

3. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das neue Canvaselement, klicken Sie auf Umbenennen, geben Sie einen neuen Namen für die Schaltfläche ein (z. B. MyButton), und drücken Sie dann die EINGABETASTE.

   Wenn Sie nun Ihre Schaltfläche duplizieren möchten, können Sie das MyButton-Element kopieren und einfügen.

Nach oben

Erstellen eines Animationsstoryboards zum Ändern der Schaltflächendarstellung

Wenn Benutzer auf eine Schaltfläche in einer Anwendung klicken, wird die Schaltfläche normalerweise anders dargestellt. Im folgenden Verfahren wird gezeigt, wie Sie ein Animationsstoryboard erstellen, mit dem die Schaltflächenelemente erweitert werden.

Hinweis:
Sie können beliebige Elemente in der Anwendung animieren, nicht nur die Elemente, die zu der Schaltfläche gehören. Beispielsweise könnte ein kleines Bild um die Schaltfläche kreisen, wenn darauf geklickt wird.

So erstellen Sie ein Animationsstoryboard

1. Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche Neu.

   

   Das Dialogfeld Storyboard erstellen wird geöffnet.

   

2. Standardmäßig lautet der Name des Storyboards Storyboard1. Behalten Sie den Namen Storyboard1 bei, da der Code im nächsten Schritt auf diesen Namen verweist.

3. Außerdem ist standardmäßig das Kontrollkästchen Als Storyboard erstellen aktiviert. Deaktivieren Sie dieses Kontrollkästchen nicht, da die Animation nicht sofort ausgeführt werden soll, wenn die Anwendung im Browserfenster geladen wird. Vielmehr sollte die Animation mithilfe von Code vollständig kontrolliert werden (gestartet und beendet).

4. Klicken Sie auf OK.

   Expression Blend erstellt das Storyboard und wechselt in den Animationsmodus.

   

   Hinweis:
   Durch Drücken von F6 könnten Sie optional den Speicherort des Interaktionspanels ändern. Wenn sich das Interaktionspanel unter der Zeichenfläche befindet, kann ein größerer Ausschnitt der Zeitachse angezeigt werden.

5. Wählen Sie unter Objekte und Zeitachsen das MyButton-Element aus.

6. Klicken Sie über der Zeitachse auf die Schaltfläche Keyframe aufzeichnen.

   Ein neuer Keyframe wird festgelegt, um die aktuelle Darstellung der Schaltflächenelemente aufzuzeichnen.

7. Verschieben Sie die Zeitachsenposition auf die 0,5-Sekunden-Marke (die Endzeit der Animation), und klicken Sie erneut auf die Schaltfläche Keyframe aufzeichnen .

   Ein neuer Keyframe wird festgelegt, um die aktuelle Darstellung der Schaltflächenelemente aufzuzeichnen. Die Schaltfläche sieht am Ende der Animation so oder ähnlich wie in der folgenden Abbildung aus.

   

8. Verschieben Sie die Zeitachsenposition auf die 0,25-Sekunde-Marke. An dieser Stelle werden Sie eine Änderung bei der Schaltflächendarstellung erstellen.

   Hinweis:
   Wenn Sie die Zeitachse nicht genau auf die 0,25-Sekunde-Marke (0:00.250) verschieben können, liegt dies daran, dass die Andockauflösung zu niedrig ist. Zum Erhöhen der Andockauflösung klicken Sie auf die Schaltfläche Andockoptionen, legen Andockauflösung pro Sekunde auf 20 fest und klicken dann auf OK.

9. Wenn sich die Zeitachsenposition auf der 0,25-Sekunde-Marke befindet und das MyButton-Element ausgewählt ist, ändern Sie die Größe der Schaltfläche auf der Zeichenfläche. Dazu ziehen Sie den rechten unteren Steuerpunkt zur Größenänderung und halten die ALT-TASTE gedrückt, um den Mittelpunkt beizubehalten.

   

   Neue Keyframes werden automatisch der Zeitachse an der 0,25-Sekunde-Marke hinzugefügt, um die neue Größe und Position der Schaltfläche aufzuzeichnen. Beachten Sie, dass unter Objekte und Zeitachsen ein RenderTransform-Element hinzugefügt wurde, um die neue Größe (Scale) und die neue Position (Translation) der Schaltfläche anzugeben. Außerdem wurden Keyframes für diese Elemente hinzugefügt, wo Sie zuvor in MyButton Keyframes festgelegt hatten. Expression Blend geht davon aus, dass Sie basierend auf den in MyButton festgelegten Start- und Endkeyframes animieren möchten. Daher werden Anfangs- und Endkeyframes im RenderTransform-Element für Sie festgelegt.

10. Klicken Sie auf die Schaltfläche Wiedergabe, um die Animation zu testen.

11. Beenden Sie den Animationsmodus, indem Sie auf die Schaltfläche Storyboard schließen klicken. Dadurch wird sichergestellt, dass alle Änderungen, die Sie an den Elementen vornehmen, nicht Teil des Animationsstoryboards sind.

12. Speichern Sie alle Dateien.

Nach oben

Erstellen eines Ereignishandlers zum Auslösen des Animationsstoryboards beim Klicken auf die Schaltfläche

Das Registrieren eines Ereignishandlers und das Schreiben des Codes für den Ereignishandler kann in der CodeBehind-Datei vorgenommen werden. Dadurch können Programmierer und Designer separat arbeiten und dann die fertige Präsentation einer Anwendung und den fertigen Code auf einfache Weise zusammenfassen. Darüber hinaus könnte ein Programmierer andere Aktionen auslösen, wenn auf eine Schaltfläche geklickt wird, indem er dem Ereignishandler Code hinzufügt (z. B. zum Navigieren zu einer Webseite). Ein Beispiel finden Sie unter Erstellen von Hyperlinks in Silverlight-Anwendungen.

So erstellen Sie den Ereignishandler

1. Doppelklicken Sie auf der Registerkarte Projekt auf die CodeBehind-Datei Page.xaml.js, um sie zum Bearbeiten zu öffnen.

   Die Datei Page.xaml.js enthält bereits den folgenden JavaScript-Code:

   • Eine Definition für das Page-Objekt.

   • Die Registrierung für das MouseLeftButtonDown-Ereignis.

   • Eine Definition des Ereignishandlers für das MouseLeftButtonDown-Ereignis.

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   Hinweis:
   Weitere Informationen zu JavaScript in Microsoft Silverlight und zur Struktur von Objekten finden Sie auf der Webseite zu Skripting und Mausereignissen (möglicherweise in englischer Sprache).

2. Der Code zum Aufrufen des Storyboards, wenn mit der linken Maustaste geklickt wird, ist bereits vorhanden, jedoch mit doppelten Schrägstrichen (//) auskommentiert.

                   // this.control.content.findName("Storyboard1").Begin();
   

   Entfernen Sie die doppelten Schrägstriche, um die Auskommentierung des Codes aufzuheben.

   this.control.content.findName("Storyboard1").Begin();
   

3. Speichern Sie alle Dateien.

4. Testen Sie das Projekt, indem Sie im Menü Projekt auf Projekt testen klicken, oder indem Sie F5 drücken.

   Wenn die Testerstellung erfolgreich ist, wird das Projekt mit dem lokalen Development Server, der in Microsoft Expression Studio enthalten ist, automatisch in Ihrem Standardwebbrowser geöffnet. Weitere Informationen zum Testen von Silverlight-Projekten finden Sie unter Testen von Silverlight-Projekten aus Expression Blend.

   Klicken Sie auf Ihre Schaltfläche, um festzustellen, ob das Storyboard ausgelöst wird. Beachten Sie, dass beim Klicken auf eine beliebige Stelle innerhalb des Browsers ebenfalls das Storyboard ausgelöst wird. Dies ist darauf zurückzuführen, dass der Ereignishandler im Bereich des Stammelements (Page) registriert wurde.

5. Kommentieren Sie die Codezeile aus, in der der Ereignishandler registriert ist, indem Sie doppelte Schrägstriche vor der Zeile hinzufügen. Dies sieht dann so oder ähnlich aus:

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. Fügen Sie die folgende Codezeile nach der auskommentierten Zeile hinzu:

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   Der einzige Unterschied zwischen diesen beiden Codezeilen ist das Element, in dem der Ereignishandler registriert ist. In der Zeile, die Sie auskommentierten, war der Ereignishandler im rootElement registriert. In der von Ihnen eingefügten Zeile wurde der Ereignishandler im MyButton-Element mithilfe der findName-Methode registriert, um nach dem Element zu suchen.

7. Speichern Sie alle Dateien erneut.

8. Testen Sie das Projekt, indem Sie im Menü Projekt auf Projekt testen klicken, oder indem Sie F5 drücken.

   Klicken Sie auf und neben die Schaltfläche, um zu bestätigen, dass das Animationsstoryboard nur ausgelöst wird, wenn Sie auf die Schaltfläche klicken.

Nach oben

Siehe auch

Konzepte

Testen von Silverlight-Projekten aus Expression Blend