Anordnen von Elementen
Um Elemente exakt zu positionieren, werden die Layoutpanels eingesetzt.
Es handelt sich um WPF- bzw. Silverlight-Steuerelemente,
die der Positionierung der beinhaltenden Elemente dienen.
Übersicht über die Layoutpanels
Die Werkzeugpalette bietet Zugriff auf die Layoutpanels durch
Gedrückthalten der linken Maustaste nachdem auf ein Layoutpanel
geklickt wurde, wie in Abbildung 3.8 zu sehen.
Abbildung 3.8: Das geöffnete
Untermenü mit den
Layoutpanels in der Werkzeugpalette
Tabelle 3.1 gibt Auskunft über einige häufig benutzte Layoutpanels
und deren Einsatzgebiete. Da das Grid in der Praxis am häufigsten
eingesetzt wird, wird seine Verwendung im Anschluss detaillierter
erklärt.
Eine vollständige Liste aller
Layoutpanels finden Sie in
der Hilfe von Expression
Blend unter dem Menübefehl
?/Benutzerhandbuch.
Tabelle 3.1: Häufig gebrauchte Layoutpanels
Layoutpanel
Merkmale
Typisches Einsatzgebiet
Ausrichten von Elementen
in Zeilen und Spalten, dynamische Größenangaben möglich
Aufgrund der Dynamik ist das Grid das am häufigsten eingesetzte Layoutpanel.
Ermöglicht nur pixelgenaue Platzierung der beinhaltenden Elemente
Der Einsatz eines Canvas ist für das Layout zu vermeiden, da es keine dynamische Anpassung ermöglicht. Es sollte nur als
Container für starre Elemente,
zum Beispiel Pfade, dienen. Es
wird Ihnen auch immer wieder in
Exporten aus anderen Programmen
(zum Beispiel aus Expression
Design) begegnen.
Elemente werden automatisch unter- oder nebeneinander aufgelistet
Das StackPanel eignet sich,
sobald eine Serie von Elementen
abgebildet werden muss. Auch
Bestandteil der Listbox.
Skaliert alle beinhaltenden Elemente wahlweise proportional oder relativ
Die Viewbox kann beliebige
Bestandteile des User Interface
zoomen.
Arbeiten mit dem Grid
Das Grid ist aufgrund seiner Flexibilität das wichtigste Layoutpanel.
Der folgende Ablauf zeigt, wie Elemente auf der Zeichenfläche hinsichtlich
ihrer Größenanpassung konfiguriert werden können und
wie ein Grid dazu genutzt werden kann, eine exakte Positionierung
von Elementen zu realisieren.
Erstellen Sie ein neues Projekt in Expression Blend. Da die in
diesem Szenario verwendeten Steuerelemente in WPF und in
Silverlight identisch sind, kann es wahlweise ein WPF- oder ein
Silverlight-Projekt sein.
Doppelklicken Sie auf das Grid-Symbol in der Werkzeugpalette.
Das Resultat ist ein neues Grid in den Dimensionen 1OOxI 00,
welches in das LayoutRoot eingefügt ist.
Klicken Sie ganz rechts oben in Expression Blend auf die Registerkarte
Eigenschaften. Sie können dem Eigenschaftenpanel
entnehmen, dass neben der Breite und der Höhe noch weitere
Werte von Expression Blend gesetzt wurden. Erkenntlich ist dies
an den kleinen weißen Punkten hinter den Eigenschaften im
Eigenschaftenpanel.
Abbildung 3.9: Entfernen eines Eigenschaftswerts über das Eigenschaftenpanel
Entfernen Sie die Breite und Höhe des neuen Grids, indern Sie
auf den kleinen weißen Punkt klicken und in dem sich öffnenden
Popup-Fenster Zurücksetzen wählen (siehe Abbildung
3.9). Der Wert ändert sich von 100 auf Auto.
Setzen Sie VerticalAlignment und HorizontalAlignment auf den
Wert Stretch. Diese Einstellungen veranlassen das neu erstellte
Grid, sich maximal in Höhe und Breite auszudehnen.
Erzeugen Sie zwei Zeilen und zwei Spalten, indern Sie zunächst
das neue Grid durch Doppelklick auf das Grid unter Objekte
und Zeitachsen aktiv selektieren (== gelbe Umrandung) und
anschließend an der gewünschten Stelle auf den Rand des Grids
klicken (siehe Abbildung 3.10).
Wechseln Sie nun in die Ansicht Teilen der Zeichenfläche, da
dort die Systematik der Zeilen und Spalten deutlicher ist. Sie
werden in etwa einen Quelltext wie in Listing 3.4 sehen. Zu
beachten ist die Aufteilung der Zeilen und Spalten. Sie sind mit
Werten kleiner 1 und einern Sternchen gekennzeichnet. Das
Sternchen besagt, dass es sich um eine prozentuale Aufteilung
handelt, wobei der Wert 1 genau 100 % entspricht.