Konfiguration

Ein Grid Control kann auf unterschiedliche Weise konfiguriert werden. Im Folgenden wird eine beispielhafte Konfiguration der Desktop.view zusammen mit einem Grid Control erläutert. Als Grundlage für dieses Beispiel sollten Sie zuvor das Kapitel zur Positionierung und Größenberechnung von Controls lesen.

1. Erstellen Sie ein neues Projekt.

2. Öffnen Sie die Desktop.view.

Als Standardeinstellung hat die Desktop.view eine feste Größe. Wenn sich die Browsergröße ändert, passen sich die Desktop.view und ihr Inhalt deshalb nicht an. In den folgenden Schritten wird die View so angepasst, dass sich ihre Größe dynamisch mit der Browsergröße anpasst.

3. Selektieren Sie die View.

4. Ändern sie das Attribut ‚Width‘ auf 100 %.

Mit dieser Einstellung passt sich die Größe der View automatisch der Browsergröße an. Der Viewport des grafischen Editors kann jetzt verwendet werden, um eine gewünschte Browsergröße zu simulieren und die Auswirkung auf die Visualisierung zu testen.

5. Fügen Sie ein Grid Control zur Oberfläche hinzu.

6. Ändern Sie folgende Attribute: Left = 20 px, Top = 100 px, Right = 20 px.

7. Wählen Sie beim Attribut ‚Width Mode‘ den Modus ‚Parent‘ aus.

Mit diesen Einstellungen passt sich die Größe des Grid Controls entsprechend der Größe des Elternelements an. In diesem Fall ist das Elternelement die Desktop.view.

8. Fügen Sie eine zweite Spalte mithilfe des Dialogs ‚Column Options‘ ein.

9. Fügen Sie jeweils einen Textblock in jeder Spalte per Drag-and-Drop hinzu.

10. Ändern Sie die Position der beiden Controls auf: Left = 120, Top = 140

Mit diesen Einstellungen wird die rechte Zelle, wenn nicht ausreichend Platz im Browser vorhanden ist, um beide nebeneinander darzustellen, automatisch in die darunterliegende Zeile verschoben. Diese Funktion können Sie testen, indem Sie das integrierte LiveView-Fenster oder die Browserinstanz in der Breite verändern. Bisher passt sich das Grid in der Höhe noch nicht automatisch an. Das führt dazu, dass die beiden Textblöcke, wenn die rechte Zelle in der zweiten Zeile angezeigt wird, jeweils nur halb dargestellt werden.

11. Wählen Sie beim Attribut ‚Height Mode‘ des Grid Controls den Modus ‚Content‘ aus.

12. Wählen Sie beim Attribut ‚Height Mode‘ der View zusätzlichen den Modus ‚Content‘ aus.

Mit diesen Einstellungen wird nicht nur das Grid entsprechend seines Inhalts vergrößert, sondern auch die View. Auf diese Weise ist sichergestellt, dass alle Inhalte erreichbar dargestellt werden können, falls die rechte Zelle in die darunterliegende Zeile springt. Um beide Zellen besser unterscheiden zu können, wird im Folgenden die Hintergrundfarbe beider Zellen gesetzt.

13. Fügen Sie zwei Zellen mithilfe des Dialogs ‚Cell Options‘ ein.

14. Ändern Sie die erste Zelloption auf: Background Color = #FFCA0000, Column Index = 0, Row Index = 0

15. Ändern Sie die zweite Zelloption auf: Background Color = #FFFFFF00, Column Index = 1, Row Index = 0

Momentan schließen die Zellen und damit auch die gesamte Zeile mit dem untersten Control ab. In den Zeileneinstellungen kann zum Beispiel eine minimale Zeilenhöhe angegeben werden.

16. Ändern Sie das Attribut ‚Row Min Height‘ der Zeilenoption auf 300 px mithilfe des Dialogs ‚Row Options‘.

Wenn die Browserhöhe größer als das Grid ist, wird zurzeit ein weißer Rand dargestellt. Um sicher zu stellen, dass die Visu bei jeder Browsergröße den Browser vollkommen ausfüllt, muss folgender Schritt ausgeführt werden.

17. Ändern Sie das Attribut ‚Minimum Height‘ der View auf 100 %.

Zusammenfassend haben Sie mithilfe des Grid Controls eine erste Visualisierung entsprechend des Ansatzes des Responsive Designs erstellt. Diese Visualisierung füllt unabhängig von der Browsergröße den gesamten Browser aus. Falls in der Breite nicht genügend Platz zur Verfügung steht, wird automatisch der Inhalt der zweiten Spalte in der darunterliegenden Zeile dargestellt. Wenn wiederum die Höhe nicht ausreicht, wird diese automatisch anhand des darzustellenden Inhalts erweitert.

Beispielprojekt: Grid