Erstellen einer Silverlight 1.0-Website mit Interaktivität
Interaktivität wird in Microsoft Silverlight 1.0-Anwendungen erstellt, indem Sie in den JavaScript-CodeBehind-Dateien der XAML-Dokumente, in denen Sie die Benutzeroberfläche entwerfen, Ereignishandler verwenden. Im folgenden Verfahren wird gezeigt, wie Ihre Anwendung als Folge eines Mausklicks ein Animationsstoryboard abspielt.
So erstellen Sie eine Silverlight 1-Website, die über Interaktivität verfügt
Klicken Sie in Microsoft Expression Blend im Menü Datei auf Neues Projekt.
Das Dialogfeld Neues Projekt wird angezeigt.
Klicken Sie unter Projekttyp auswählen auf Silverlight 1.0-Website. In den anderen Feldern werden für den Projektnamen und den Speicherort Standardwerte angezeigt. Sie können die Werte dieser Felder übernehmen und auf OK klicken.
Ein neues Silverlight-Projekt wird erstellt. Die Startseite Page.XAML wird zur Bearbeitung geöffnet.
Wählen Sie aus der Werkzeugpalette das Stiftwerkzeug aus. Zeichnen Sie eine Kurvenform. Klicken Sie, um Punkte zu erstellen, und ziehen Sie, um Kurven zu erstellen. Klicken Sie auf den ersten Punkt, um die Form zu schließen.
Eine Liste der Möglichkeiten, Pfade mit der Maus zu ändern finden Sie unter Verwendung von Stift und Direktauswahl.
Klicken Sie mit der rechten Maustaste auf das neue Pfadobjekt unter Objekte und Zeitachsen, klicken Sie auf Umbenennen, und geben Sie den Namen MeinPfad ein.
Wenn von einer CodeBehind-Datei auf ein Objekt verwiesen werden soll, müssen Sie das Objekt benennen. Dieses Objekt muss von Code referenziert werden, damit ein Click-Ereignishandler eingebunden wird.
Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche Neu . Das Dialogfeld Storyboard erstellen wird geöffnet. Übernehmen Sie im Feld Name den Eintrag Storyboard1, und lassen Sie das Kontrollkästchen Als Ressource erstellen aktiviert. Klicken Sie auf OK.
Ein neues Storyboard wird erstellt und die Zeitachsenaufzeichnung aktiviert.
Klicken Sie mit der Zeitachsenposition an der 0-Sekunden-Marke auf die Schaltfläche Keyframe aufzeichnen, um die aktuelle Position des Objekts MeinPfad aufzuzeichnen.
Verschieben Sie die Zeitachsenposition an die 1-Sekunden-Markierung, und verschieben Sie das Objekt MeinPfad mit dem Auswahlwerkzeug. Keyframes werden auf die 1-Sekunden-Markierung eingestellt, um die neue Position des Objekts MeinPfad aufzuzeichnen.
Doppelklicken Sie im Projektpanel auf die Datei Page.xaml.js, um sie zum Bearbeiten zu öffnen.
Entfernen Sie den Kommentar für die folgende Codezeile, indem Sie die //-Zeichen entfernen:
// this.control.content.findName("Storyboard1").Begin();
Expression Blend 2 generiert JavaScript-Anfangscode, um Ihnen zu zeigen, wie Sie einen Ereignishandler mit einem Mausklick auf dem Stammelement einbinden. Der Ereignishandler ruft die Begin-Methode für Storyboard1 auf. Aus diesem Grund haben Sie das Feld Name nicht geändert, als Sie das Storyboard erstellt haben. Weitere Informationen zu Silverlight 1.0-Skripting finden Sie unter Silverlight-Skripting- und Mausereignisse (möglicherweise in englischer Sprache).
Testen Sie die Silverlight 1.0-Website, indem Sie F5 drücken und in das Browserfenster klicken, um das Animationsstoryboard auszulösen.
Siehe auch
Konzepte
Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung
Erstellen, Ändern oder Löschen eines Storyboards
Einstellen der Wiederholung oder Umkehrung von Storyboards am Ende des Zyklus