Freigeben über


Erstellen einer Silverlight 1.0-Website mit Interaktivität

Diese Seite bezieht sich nur auf Silverlight 1-Projekte

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

  1. Klicken Sie in Microsoft Expression Blend im Menü Datei auf Neues Projekt.

    Das Dialogfeld Neues Projekt wird angezeigt.

    Cc296370.ef6e983a-52a3-4258-a42d-a76beb1e48f1(de-de,Expression.10).png

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

  3. Wählen Sie aus der Werkzeugpalette das Stiftwerkzeug Cc296370.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(de-de,Expression.10).png 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.

    Cc296370.25239939-a612-49fd-9b4a-743971738d5e(de-de,Expression.10).png

    Eine Liste der Möglichkeiten, Pfade mit der Maus zu ändern finden Sie unter Verwendung von Stift und Direktauswahl.

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

    Cc296370.93b269b5-d07e-4b73-9543-644f6e50e0fd(de-de,Expression.10).png

    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.

  5. Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche Neu Cc296370.86937695-03dd-44ea-aa30-28d4029b3ad0(de-de,Expression.10).png. 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.

    Cc296370.68230d0a-c687-4ca3-af6a-63e7f2e7a9a7(de-de,Expression.10).png

    Ein neues Storyboard wird erstellt und die Zeitachsenaufzeichnung aktiviert.

  6. Klicken Sie mit der Zeitachsenposition Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(de-de,Expression.10).png an der 0-Sekunden-Marke auf die Schaltfläche Keyframe aufzeichnen, um die aktuelle Position des Objekts MeinPfad aufzuzeichnen.

    Cc296370.a9d19126-f7dd-43b9-9663-6a39e02af8e6(de-de,Expression.10).png

  7. Verschieben Sie die Zeitachsenposition Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(de-de,Expression.10).png 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.

    Cc296370.8a2c43ac-1a9f-497d-8aab-5e94c74d1560(de-de,Expression.10).png

  8. Doppelklicken Sie im Projektpanel auf die Datei Page.xaml.js, um sie zum Bearbeiten zu öffnen.

  9. Entfernen Sie den Kommentar für die folgende Codezeile, indem Sie die //-Zeichen entfernen:

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

    Cc296370.76e80641-82b4-4cb5-bb0d-447c70a01f8a(de-de,Expression.10).png

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

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