Styling
Styles speichern Einstellungen zur visuellen Gestaltung eines Steuerelements und können auf andere Steuerelemente desselben Typs einfach und schnell angewendet werden. Hier erfahren Sie, wie Sie vorhandene Styles nutzen und eigene erstellen können.
Web UI Steuerelemente lassen sich unterschiedlich gestalten. Sie können für ein Steuerelement über seine Eigenschaften z. B. festlegen, wie groß es sein soll, welche Farben es verwenden soll, ob es abgerundete Ecken haben soll etc. Diese und viele andere Eigenschaftswerte können Sie individuell für jedes Steuerelement festlegen.
Wollen Sie Ihre Applikation einheitlich nach Ihren eigenen Vorstellungen gestalten, kann die Konfiguration jedes einzelnen Steuerelements aufwendig werden. Effizienter geht es mit einem Style.
Was ist ein Style?
Ein Style legt Werte für ausgewählte Eigenschaften für einen Steuerelementtyp fest, die für alle Steuerelemente dieses Typs applikationsweit gelten, die diesen Style verwenden. »EASY UI Designer« bringt bereits einige Styles mit.
Beispiel
Im Menüband stehen in der Kategorie "Schaltflächen" mehrere Buttons zur Verfügung, die je einen anderen Style verwenden. Platzieren Sie einen "Button (Default)", einen "Button (Icon)" und einen "Button (Flat)" auf einer Page im Designer. Die Buttons unterscheiden sich visuell deutlich voneinander, obwohl sie über die gleichen Funktionalitäten verfügen, da sie von demselben Steuerelementtyp sind. Markieren Sie die Buttons nacheinander im Designer und achten Sie auf Folgendes:
-
Im oberen Bereich des Fensters Eigenschaften ist der Style des im Designer markierten Steuerelements in Klammern hinter dem "Type" des Steuerelements angegeben, z. B. "VisiWin.UI.Button (Plain.Default)". "Plain.Default" ist der Style, der auf den Button angewendet wird.
-
In der Eigenschaft "Style" ist der Style ebenfalls angegeben. Außerdem können Sie über die Eigenschaft einen anderen Style auswählen.
-
Im Style "Plain.Icon" gibt es anders als bei den anderen Styles keine Eigenschaftenkategorie "Text". Die Eigenschaften zur Konfiguration des Textes sind in diesem Style nicht editierbar.
Über die Eigenschaft "Style" können Sie festlegen, ob ein Style auf das Steuerelement angewendet werden soll und wenn ja, welcher:
Wenn Sie diese Einstellung auswählen, wird kein Style auf das Steuerelement angewendet.
-
Den gleichen Effekt erzielen Sie, wenn Sie die Eigenschaft "Style" zurücksetzen. Klicken Sie dazu auf das Symbol für erweiterte Optionen (
) neben der Eigenschaft
"Style" und wählen Sie
Zurücksetzen aus dem Menü.
System-Styles
Sie können einen der System-Styles auf das Steuerelement anwenden, z. B. "Plain.Default" und "Material.Default". Diese Styles stehen in jedem neu angelegten Projekt für bestimmte Steuerelemente zur Verfügung.
Benutzerdefinierte Styles
Sie können mit Hilfe des Style-Editors eigene Styles erstellen. Haben Sie im Projekt einen eigenen Style für einen Steuerelementtyp erstellt, dann steht dieser Styles für Steuerelemente dieses Typs in der Eigenschaft "Style" zur Verfügung.
Editierbare und nicht editierbare Eigenschaften
Sind Eigenschaftswerte durch den Style festgelegt, kann es sinnvoll sein, sie von der Bearbeitung auszuschließen. Dadurch wird die Menge der im Eigenschaftenfenster verfügbaren Eigenschaften für ein Steuerelement reduziert und die Konfiguration des Steuerelements vereinfacht.
In den System-Styles stehen daher bei vielen Steuerelementen weniger Eigenschaften zur Verfügung, als wenn das Steuerelement ohne Style verwendet wird.
Für benutzerdefinierte Styles können Sie für jede Eigenschaft einzeln festlegen, ob sie bearbeitbar sein soll oder nicht.