Kapseln von Fragmenten in UserControls
Es gibt in der Praxis immer wieder die Anforderung, ganze Bestandteile
eines Quellcodes zu kapseln und wiederverwendbar abzulegen.
In den vorangehenden Abschnitten in diesem Kapitel haben Sie
folgende Kapselungsverfahren kennengelernt:
Einzelne Eigenschaftswerte anhand von Ressourcen
Eigenschaftswerte-Sets anhand von Formatvorlagen
Ganze Erscheinungsbilder von Steuerelernenten anhand von
Steuerelementvorlagen
In diesem Abschnitt zeige ich Ihnen nun, wie Sie ganze Fragmente
eines Dokuments inklusive Animation und Auslöser als separate
Dokumente extrahieren und wiederverwenden können.
In diesem Beispiel werden wir eine gekapselte Datei mit einern sich
drehenden Rechteck erstellen und diese Datei mehrfach in einern
anderen Dokument verwenden. Gehen Sie dazu wie folgt vor:
Erstellen Sie ein neues WPF-Projekt.
Klicken Sie im Projektpanel das Projekt mit der rechten Maustaste
an und wählen Sie Neues Element hinzufügen.
Im sich öffnenden Dialogfeld wählen Sie UserControl und geben
einen Namen für die neue Datei an. Geben Sie einen beliebigen
Namen ein, zum Beispiel UserControll.xaml. Lassen Sie das
Kontrollkästchen Code-Datei einschließen aktiviert und bestätigen Sie mit OK. Eine neue Datei mit dem von Ihnen angegebenen
Namen wird im Projektordner erzeugt und geöffnet.
Falls Sie versucht haben, als Namen UserControl.xaml einzugeben,
so werden Sie erst beim Versuch, die Anwendung zu kompilieren,
in einer Fehlermeldung darüber informiert, dass der Name eines
Members nicht gleich lauten darf wie der Name seines Typs.
Fügen Sie ein Rechteck in das LayoutRoot des neuen Dokuments
ein und füllen Sie es mit einer Farbe oder einern Farbverlauf.
Erstellen Sie ein neues Storyboard. Setzen Sie den Zeitmarker
in der Zeitachse auf Sekunde 3, selektieren Sie das Rechteck
und geben Sie im Eigenschaftenpanel in der Kategorie Transformation
und der Unterrubrik Drehung einen Drehwinkel von
360 Grad an (siehe Abbildung 3.39). Das Rechteck zeigt logischerweise
keine Veränderung, wir haben es einmal vollständig
gedreht und es befindet sich wieder an der Ausgangsposition.
Wenn Sie aber das Storyboard ablaufen lassen, sehen Sie die
Drehung.
Abbildung 3.39: UserControl mit einem gedrehten Rechteck
Abbildung 3.40: Etwas versteckt: Die Storyboardeigenschaften nach Klicken aufdessen Namen
Klicken Sie im Bereich Objekte und Zeitachsen, wie aus Abbildung
3.40 ersichtlich, auf den Namen des Storyboards. Es werden
die Eigenschaften des Storyboards im Eigenschaftenpanel
angezeigt.
Geben Sie für die Eigenschaft RepeatBehavior den Wert Forever
an. Das veranlasst das Storyboard, eine Schleife zu durchlaufen.
Da wir Start- und Endpunkt der Rotation identisch gesetzt
haben, wird die Animation eine flüssige Bewegung sein.
Klicken Sie im Interaktionspanel auf +Ereignis und geben Sie
als Ereignis UserControl.MouseEnter an, als Storyboard wählen
Sie darunter den Namen Ihres Storyboards mit der Drehung,
als Aktion wählen Sie Pause. Diese Einstellung bewirkt, dass die
Drehung anhält, wenn die Maus über das UserControl fährt.
Klicken Sie im Interaktionspanel auf +Ereignis und geben Sie
als Ereignis UserControl.MouseLeave an, als Storyboard wählen
Sie darunter den Namen Ihres Storyboards mit der Drehung, als
Aktion wählen Sie Resume. Diese Einstellung bewirkt, dass sich
das Element dann weiterdreht, wenn sich die Maus nicht mehrüber dem UserControl befindet. Eine Darstellung dieser Einstellung
finden Sie in Abbildung 3.41.
Abbildung 3.41: Einstellungen
für eine Storyboardsteuerung
in einem UserControl
Mit Einfügen eines UserControls
wird ein mit dem
OnLoad-Ereignis verknüpftes
Storyboard bereits wie konfiguriert
auf der Zeichenfläche
gestartet und somit
lehnt sich die Darstellung
der Zeichenfläche sehr eng
an die spätere Ausführung
an.
Kompilieren Sie die Anwendung, indern Sie den Menübefehl
Projekt/Projektmappe erstellen wählen oder die Tastenkombination
[STRG][SHIFT][B] drücken. Erst durch das Kompilieren
weiß Expression Blend sozusagen vorn UserControl, und wir
können es nun in unserem Hauptdokument einsetzen.
Wechseln Sie zum Ursprungsdokument, in unserem Beispiel die
Datei namens Window1.xaml.
Ändern Sie den Typ des LayoutRoots von Crid zu StackPanel.
Öffnen Sie die Objektbibliothek durch Klicken auf die beiden
nach rechts zeigenden Pfeile ganz unten in der Werkzeugpalette.
Auf der Registerkarte Benutzerdefinierte Steuerelemente ist das
gerade erstellte UserControl gelistet. Wählen Sie es durch einmaliges
Klicken an. Es ist jetzt in der Werkzeugpalette an vorletzter
Position eingefügt.
Doppelklicken Sie auf das UserControl in der Werkzeugpalette,
sodass Sie es wiederholt wie in Abbildung 3.42 in das StackPanel
einfügen.
Starten Sie die Anwendung über den Menübefehl Projekt/Projektmappe
testen oder über die Taste [F5]. Wie in Abbildung
3.43 zu sehen, setzen sich alle Rechtecke erwartungsgemäß mit
dem Start der Anwendung in Bewegung. Wenn Sie die Mausüber einern der Rechtecke positionieren, stoppt die Animation
des Rechtecks unter dem Mauszeiger. Verlässt der Mauszeiger
das Rechteck, wird die Animation fortgesetzt.
Das aufgeführte Beispiel eines UserControls zeigt einen wichtigen
Sachverhalt: Zwar handelt es sich bei dem UserControl um eine
einzige Datei. Bei seinem mehrfachen Einsatz in einem Dokument
wird aber klar, dass die Ereignisse für jedes UserControl einzeln und
separat verarbeitet werden. Programmierern ist dieser Sachverhalt
natürlich aus der Objektorientierung bekannt: Das UserControl ist
eine Klasse, welche wie eine Art Schablone fungiert. Die eingesetzten
UserControls sind autarke, quasi nach der Schablone erstellte Instanzen
der Klasse.
Abbildung 3.42: Mehrfach eingesetztes UserControl
Abbildung 3.43: Ein mehrfach
eingesetztes UserControl
in Form eines animierten
Rechtecks
Zusammenfassung
Dieses Kapitel stellte den ersten Werkzeugkasten dar, um ein User
Interface zu gestalten. Es wurden grundlegende Vorgehensweisen
mit Expression Blend thematisiert.
Im nächsten Kapitel folgen theoretische und absolut notwendige
wissenschaftliche Betrachtung zum Thema User-Interface-Design.
Mit diesem Handwerkszeug ausgestattet wird ab Kapitel 5
ein Projekt realisiert: Die Gestaltung eines User Interface für eine
Kassen-Anwendung - angefangen bei der Planung und Analyse der
Rahmenbedingungen bis zur tatsächlichen Realisierung.