SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Abbildung 2.11: Die wichtigen Elemente in Expression Blend zur Erstellung eines Buttons

1. Klicken Sie in Expression Blend rechts auf die Registerkarte Eigenschaften und suchen Sie entweder mit Durchforsten oder anhand der Stichwortsuche im oberen Teil der Registerkarte die Eigenschaft Content heraus. Schreiben Sie anstelle des eingetragenen Wertes Button einen beliebigen Text, zum Beispiel Klick, hinein.

Der weiße Punkt hinter dem Eingabefeld der Content-Eigenschaft signalisiert die Angabe eines Wertes. Für Werte, hinter denen kein Punkt gesetzt ist, ist kein expliziter Wert hinterlegt. Löschen Sie den Wert einfach durch Löschen des Textes, so werden Sie vielleicht erstaunt sein: Der Punkt bleibt! Es ist nämlich auch ein Wert gesetzt, nämlich der Wert »«. Der Button bekommt also keine Beschriftung, die Standardbeschriftung Button wird überschrieben. Das können Sie auch im XAML-Quelltext und in Listing 2.3 nachvollziehen.

<Grid x:Name="LayoutRoot")
<Button Margin="121,49,268,O" VerticalAlignment="Top" Height="123" Content=""/)
</Grid)

Es ist also nach wie vor ein Wert für die Eigenschaft Content gesetzt. Möchten Sie den Wert einer Eigenschaft vollständig entfernen, so müssen Sie entweder Content= 1111 aus dem XAML-Code löschen oder Sie klicken auf den weißen Punkt im Eigenschaftenpanel und wählen Zurücksetzen.

Das Ergebnis bis hier ist ein Button, den Sie auf der Zeichenfläche aufgezogen haben und den Sie mit einer Beschriftung versehen haben.

Sie können das Projekt mit IT2J oder dem Menübefehl Projekt/ Projekt testen ausführen und sehen Ihren Button. Der ändert beim Darüberfahren mit dem Mauszeiger bereits seine Farbe und reagiert visuell auf einen Klick.

Erstellen einer Animation
Im nächsten Schritt werden wir eine Animation erstellen, die den Button horizontal durch das Fenster fliegen lässt. Anschließend soll diese Animation per Klick auf den Button ausgelöst werden.

Im linken unteren Bereich von Expression Blend sollten Sie einen Bereich Objekte und Zeitachsen sehen. Ist dies nicht der Fall, setzen Sie die Arbeitsfläche gegebenenfalls mit der Tastenkombination [STRG] + [SHIFT] +[R] zurück.

1. Erstellen Sie ein neues Storyboard, indern Sie auf die Schaltfläche mit dem Pluszeichen oben rechts in diesem Bereich klicken.
   
   Abbildung 2.12: Die Schaltfläche zum Hinzufügen eines neuen Storyboards
   
   
   
   
2. Geben Sie einen Namen für das Storyboard in das sich öffnende Dialogfeld ein, zum Beispiel Button Flieg.
   
   Ein Storyboard ist quasi die ablaufende Zeit, in welcher Sie beliebig viele Werte verändern können. Somit kann ein Storyboard beliebig viele Animationen beinhalten, die allerdings alle in der gleichen Zeit - inder Zeitachse des Storyboards - ablaufen.
   
   Nachdem Sie das Storyboard erstellt haben, zeigt sich der Bereich Objekte und Zeitachsen etwas breiter, der Bereich für die Animationssteuerung ist ausgeklappt und zeigt sich wie in Abbildung 2.13 zu sehen ist.
   
   Abbildung 2.13: Der Animationsarbeitsbereich mit der Zeitachse und Markierungen für animierte Eigenschaftswerte
   
   
   
   
3. Drücken Sie [F6] oder wählen Sie den Menübefehl Fenster/Aktiver Arbeitsbereich/Animationsarbeitsbereich und schalten Sie somit die Oberfläche von Expression Blend in den Animationsarbeitsbereich.
4. Klicken Sie auf die 1 in der Zeitachse. Der gelbe Marker sollte sich dort platzieren.
5. Wählen Sie das Auswahlwerkzeug aus der linken Werkzeugleiste (den schwarzen Pfeil).
6. Wählen Sie Ihren Button auf der Zeichenfläche durch einmaliges Klicken mit der linken Maustaste aus.
7. Verschieben Sie den Button, indern Sie auf Ihrer Tastatur die Taste [Pfeil rechts] drücken. Sie legen mit dieser Verschiebung die Position fest, die der Button zu dem auf der Zeitachse selektierten Zeitpunkt (in diesem Fall Sekunde 1) erhalten soll. Der Punkt in der Zeitachse zeigt an, dass zu diesem Zeitpunkt ein Wert verändert wurde.
8. Die entstehende Animation können Sie über die Pfeil-Steuerungüber der Zeitachse ausführen. Klicken Sie auf den nach rechts zeigenden Pfeil, um die Animation zu starten.
9. Starten Sie nun die Anwendung mit [F5] oder über den Menübefehl Projekt/Projekt testen. Sie sehen, der Button fliegt mit Starten der Anwendung auf die von Ihnen gewählte Position. Bleibt die Frage zu klären, woher die Animation weiß, dass sie beim Start der Anwendung starten soll.
   
   

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.