ViewBox

Container zum Skalieren des Inhalts.

Symbol
Menüband	Start > Steuerelemente > Container > Layout > ViewBox

Mit dem Steuerelement "ViewBox" können Inhalte zur Laufzeit stufenlos skaliert werden. Die "ViewBox" eignet sich besonders zum Skalieren von Grafiken, damit sie auf unterschiedlich großen Bildschirmen optimal dargestellt werden.

Beispiel

Ab Version 7.3 steht für Web UI ein Beispielprojekt "DistillationPlant" zur Verfügung. Dort wird die Skalierung der Grafik, welche die gesamte Distillieranlage visualisiert, mit Hilfe der ViewBox realisiert.

So gehen Sie vor:

Starten Sie die »EASY UI Designer« Entwicklungsumgebung.
Unter Datei klicken Sie auf Beispiele.
Wählen Sie unter Version die Version "7.3" aus.
Wählen Sie als Technologie "Web UI (HTML5)" aus, klicken Sie auf Distillieranlage und bestätigen Sie mit OK, um das Beispielprojekt in der Entwicklungsumgebung zu öffnen.
Ist das Projekt in die Entwicklungsumgebung geöffnet, starten Sie es mit F5.

Die Applikation wird im Browser gestartet.
Klicken Sie in der Fußleiste der Applikation auf DISTILLIERANLAGE.
Ziehen Sie das Browserfenster kleiner und dann wieder größer und beobachten Sie, wie sich die Größe der Grafik ändert.
Kehren Sie zur Entwicklungsumgebung zurück und öffnen Sie die Page "DistillationPlantPage.html" im Designer.

Im Fenster Dokumentgliederung sehen Sie, dass die Page eine ViewBox enthält. Die ViewBox ermöglicht das Skalieren des Elements AbsoluteLayout, das mehrere Elemente vom Typ Image, Bar, Label und StateIndicator enthält.

Die ViewBox unterstützt folgende Funktionalität:

Skalierung des dargestellten Inhalts
Absolute Positionierung der enthaltenen Elemente

Im Prinzip können Sie Steuerelemente direkt auf einer ViewBox platzieren und über die Eigenschaften "Left"/"Top" des jeweiligen Steuerelements fest (absolut) positionieren. In den allermeisten Fällen ist es jedoch sinnvoll, auf der ViewBox zuerst einen Layout-Container, z. B. ein AbsoluteLayout, zu platzieren. Auf dem AbsoluteLayout können Sie dann Steuerelemente positionieren.
Darstellung des Hintergrunds, des Rahmens, des Schattens etc.
Farbliche Darstellung des Hintergrunds und des Rahmens

Diese Funktionalitäten können Sie über die Eigenschaften im Fenster Eigenschaften konfigurieren, wenn Sie das Steuerelement im Designer oder in der Dokumentgliederung markieren.

Für den Layout-Container stehen keine System-Styles zur Verfügung. Es können auch keine benutzerdefinierten Styles erstellt werden.

Wird eine ViewBox auf einer Page platziert, so enthält sie zunächst keine weiteren Elemente. Fügen Sie zuerst einen Layout-Container, z. B. ein AbsoluteLayout, zur ViewBox hinzu. Auf dem AbsoluteLayout können Sie dann Steuerelemente wie gewünscht positionieren.

ViewBox mit einem AbsoluteLayout zum Kapseln der Steuerelemente

Zur Skalierung des darzustellenden Inhalts der ViewBox stehen in der Kategorie "ViewBox" folgende Eigenschaften zur Verfügung:

StretchDirection

Legt fest, ob der Inhalt der ViewBox nur verkleinert, nur vergrößert oder sowohl verkleinert als auch vergrößert wird.

Both

Der Inhalt wird bei einer Verkleinerung des Fensters kleiner, bei einer Vergrößerung des Fensters größer als die eigentliche Größe dargestellt (Standardeinstellung).
DownOnly

Der Inhalt wird bei einer Verkleinerung des Fensters kleiner, bei einer Vergrößerung des Fensters jedoch nicht größer als die eigentliche Größe dargestellt.
UpOnly

Der Inhalt wird bei einer Vergrößerung des Fensters größer, bei einer Verkleinerung des Fensters jedoch nicht kleiner als die eigentliche Größe dargestellt.

StretchMode

Legt fest, ob und wie der Inhalt der ViewBox skaliert wird.

None

Der Inhalt wird nicht skaliert, sondern in der eigentlichen Größe dargestellt.
Fill

Der Inhalt wird sowohl in der Breite als auch in der Höhe so skaliert, dass er den verfügbaren Raum ausfüllt. Das dargestellte Seitenverhältnis darf vom eigentlichen Seitenverhältnis abweichen, sodass eine Schrift oder eine Grafik als gestreckt oder als gestaucht erscheinen kann.
Uniform

Der Inhalt wird sowohl in der Breite als auch in der Höhe so skaliert, dass das Verhältnis zwischen Höhe und Breite beibehalten wird (Standardeinstellung).

Verwandte Themen: