Grafiken

Darstellung einer Grafik oder mehrerer Grafiken in einem Steuerelement.

In einem Steuerelement kann eine Grafik zusätzlich zum Text oder zur Beschriftung angezeigt werden.

Einige Steuerelemente können eine oder mehrere Grafiken anzeigen.

Folgende Arten von Grafiken sind möglich:

CheckmarkSymbol

Grafik, die im Kontrollkästchen des Steuerelements Checkbox angezeigt wird. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie "Checkmark" zu finden.

Betrifft Steuerelement: Checkbox

DefaultSymbol

Grafik, die im Steuerelement angezeigt wird, wenn in den AlarmIndicatorItems keine Grafiken festgelegt wurden oder wenn alle Alarme der darzustellenden Klassen im inaktiven Zustand (Cleared) sind.

Betrifft Steuerelement: AlarmIndicator

ErrorSymbol

Grafik, die hinter dem Eingabefeld des Steuerelements im Falle eines Fehlers angezeigt wird, z. B. wenn die Eingabe außerhalb der festgelegten Grenzen liegt. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie "ErrorSymbol" zu finden.

Betrifft Steuerelemente: DateTimeVarIn, NumericVarIn, TextVarIn

ExpandingSymbol

Grafik, die angezeigt wird, wenn die Auswahlliste zusammengeklappt ("CollapsedSymbol") bzw. geöffnet ist (ExpandingSymbol). Die Eigenschaften zur Konfiguration dieser Grafiken sind in der Kategorie "ExpandingSymbol" zu finden.

Betrifft Steuerelement: TabMenuButton

LabelSymbol

Grafik, die zusätzlich zur Beschriftung (Label) der SelectBox angezeigt werden kann. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie "LabelSymbol" zu finden.

Betrifft Steuerelement: SelectBox

LeadingSymbol

Grafik, die vor dem Ausgabe-/Eingabefeld des Steuerelements angezeigt wird. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie "LeadingSymbol" zu finden.

Betrifft Steuerelemente: DateTimeVarIn, DateTimeVarOut, DropDownBox, NumericVarIn, TextVarIn

Symbol

Grafik, die zusätzlich zur Beschriftung oder zum Text des Steuerelements angezeigt werden kann. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie "Symbol" zu finden.

Bei der SelectBox ist dies die Grafik, die vor dem Textfeld, das den Haupt- und den Zweittext enthält, angezeigt wird. Zur Laufzeit wird die Grafik angezeigt, die für das jeweils aktive SelectBoxItem konfiguriert wurde.

Betrifft Steuerelemente: Button, DateTimeVarIn, DropDownBox, DropDownBoxItem, Key, Label, ListItem, NumericVarIn, NumericVarOut, SelectBox, SelectBoxItem, StateIndicator, StateIndicatorItem, TabButton, TabMenuButton, TextVarIn, TextVarOut, ToggleButton

SymbolActive, SymbolInactive

Grafik, die angezeigt wird, wenn ein Alarm der in der Eigenschaft "AlarmClassName" angegebenen Alarmklasse in den Zustand "Gekommen" ("SymbolActive") bzw. "Gegangen" (SymbolInactive) gewechselt ist. Die Eigenschaften sind in der Kategorie "Symbol" zu finden.

Betrifft Steuerelement: AlarmIndicatorItem

StateSymbol

Grafik, die angezeigt wird, wenn die Auswahlliste zusammengeklappt ("ClosedStateSymbol") bzw. geöffnet ist (OpenedStateSymbol). Die Eigenschaften zur Konfiguration dieser Grafiken sind in der Kategorie StateSymbol" zu finden.

Betrifft Steuerelement: SelectBox

TrailingSymbol

Grafik, die hinter dem Eingabefeld des Steuerelements angezeigt wird. Die Eigenschaften zur Konfiguration der Grafik sind in der Kategorie TrailingSymbol" zu finden.

Betrifft: "DropDownBox, NumericVarIn, TextVarIn

Für ein Steuerelement, welches die Anzeige einer Grafik (eines Symbols) unterstützt, kann die Grafik über folgende Eigenschaften konfiguriert werden.

Für Grafiken vom Typ LeadingSymbol, TrailingSymbol, ErrorSymbol etc. gibt es ähnlich lautende Eigenschaften wie für Grafiken von Typ Symbol.

Beispiel: Die Eigenschaft "ShowSymbol" legt fest, ob die Grafik vom Typ Symbol im Steuerelement angezeigt werden soll, genauso wie die Eigenschaft "ShowErrorSymbol" festlegt, ob die Grafik vom Typ ErrorSymbol angezeigt wird.

SymbolType

Legt den Grafiktyp und die Quelle der Grafik fest.

Icon

Die Grafik soll ein Icon sein und aus dem Ordner images\iconfonts des Projektverzeichnisses bezogen werden.
Svg

Die Grafik soll eine Vektorgrafik im Format SVG aus dem Ordner images\svgs sein.
Bitmap

Die Grafik soll eine Pixelgrafik (BMP, PNG, GIF, JPG) aus dem Ordner images\bitmaps sein.

SvgIcon

Die Grafik soll eine Vektorgrafik im Format *.svg aus dem Ordner images\svgicons des Projektverzeichnisses sein. Im Unterschied zu den Grafiken im Ordner svgs werden diese Grafiken in der Farbe angezeigt, die über die Eigenschaften ForegroundColor, CheckedForegroundColor, etc. festgelegt wurde. Sie sollen also wie Icons aus Icon-Fonts aussehen, aber im Format *.svg vorliegen.

Sie können SVGs selbst mit einem Tool Ihrer Wahl zeichnen oder von Dritten erstellte SVGs als SvgIcons nutzen. Beachten Sie dabei Folgendes:

Im <svg>-Element der Grafik darf das Attribut xmlns mit dem Namensraum-URI nicht fehlen.
Kopieren
```
<svg xmlns="http://www.w3.org/2000/svg" ...>
```
Im <svg>-Element muss das Attribut viewBox gesetzt sein, damit die Grafik automatisch auf die Größe des sie beinhaltenden Containers im Steuerelement skaliert wird.
Kopieren
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
```

Elemente, die mit der Farbe gefüllt werden sollen, die über die Eigenschaft ForegroundColor, CheckedForegroundColor etc. gesetzt wird, müssen direkte Unterelemente des Elements <svg> sein und dürfen nicht gruppiert sein.

Kopieren

So nicht: Die beiden <path>-Elemente sind keine direkten Unterelemente von <svg>, da sie in einem <g>-Element gekapselt sind.

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <g>
    <path
      d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
       m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
    <path
      d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
  </g>
</svg>

Kopieren

So ist richtig: Die beiden <path>-Elemente sind direkte Unterelemente von <svg>.

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
       m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
  <path
    d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
</svg>

Die Eigenschaft fill darf in den Elementen, auf die sich die Eigenschaften ForegroundColor, CheckedForegroundColor etc. auswirken sollen, nicht gesetzt sein.

Kopieren

So nicht: Das fill-Attribut ist in den <path>-Elementen gesetzt.

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
       m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"
    fill="lightblue"/>
  <path
    d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"
    fill="lightcoral"/>
</svg>

Kopieren

So ist richtig: In den beiden <path>-Elementen ist kein fill-Attribut vorhanden.

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
       m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
  <path
    d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
</svg>

IconFont

Legt die Grafikensammlung für den Grafiktyp "Icon" fest.

material-icons

Legt fest, dass im Grafikauswahldialog (Schaltfläche hinter der Eigenschaft "Symbol", "LeadingSymbol", "TrailingSymbol" etc.) die Material Icons von Google zur Auswahl angeboten werden.
winjs-icons

Legt fest, dass im Grafikauswahldialog (Schaltfläche hinter der Eigenschaft "Symbol" "LeadingSymbol", "TrailingSymbol" etc.) die WinJS Icons von Microsoft zur Auswahl angeboten werden.

ShowSymbol

Legt fest, ob die Grafik angezeigt werden soll. Die anzuzeigende Grafik wird in der Eigenschaft "Symbol" festgelegt.

Symbol (SymbolOff/SymbolOn)

Legt die anzuzeigende Grafik fest. Über die Schaltfläche wird ein Dialog aufgerufen, in dem aus den verfügbaren Grafiken eine ausgewählt werden kann.

Die zur Verfügung stehenden Grafiken hängen von den Einstellungen in den Eigenschaften "SymbolType" und "IconFont" ab.

SymbolMargin

Legt die äußeren Abstände der Grafik fest, d. h. zwischen dem Rand der Grafik und ihrem übergeordneten oder benachbarten Element.

SymbolPosition

Legt die Position der Grafik im beinhaltenden (internen) Container innerhalb des Steuerelements fest.

Bei einigen Steuerelementen stehen nur zwei Einstellungen zur Verfügung, z. B. "Left" und "Right" beim Label.

Left
Die Grafik wird links positioniert.
Top
Die Grafik wird oben positioniert.
Right
Die Grafik wird rechts positioniert.
Bottom
Die Grafik wird unten positioniert.
Center

Die Grafik wird mittig positioniert.
- Ist die Anzeige der Beschriftung bzw. des Textes im Steuerelement aktiviert (ShowLabel = þ/ShowText = þ), dann ist diese Einstellung gleichwertig zu "Left".

SymbolPressed

Legt die Grafik fest, die im Steuerelement angezeigt wird, solange es gedrückt gehalten wird (Zustand "Pressed").

SymbolSize

Bestimmt die Darstellungsgröße der Grafik. Die Grafik wird immer quadratisch dargestellt (SymbolSize = Breite = Höhe) und auf die eingestellte Darstellungsgröße skaliert. Da für die Grafik intern die CSS-Eigenschaften "width" und "height" verwendet werden, sind in "SymbolSize" alle Angaben zulässig, die für diese CSS-Eigenschaften zulässig sind, z. B. px, cm, % etc. Wird als Wert eine Zahl ohne Einheit eingetragen, dann wird dies als Angabe in Pixel interpretiert.