Image

Darstellung einer Grafik.

Symbol
Menüband	Start > Steuerelemente > Ein-/Ausgabe > Grafik > Image

Das Steuerelement "Image" stellt eine Grafik in Abhängigkeit vom Wert der angebundenen binären oder numerischen Prozessvariablen an, um z. B. auf einen Zustand hinzuweisen.

Das Image zeigt je nach Variablenwert eine andere Grafik

Variablenwert	Darstellung
0
1
2

Das Steuerelement unterstützt folgende Funktionalität:

Anbindung an eine spezifische Prozessvariable für die Datenquelle
Darstellung einer Grafik im Steuerelement
Anbindung an die Benutzerverwaltung zur Sperrung der Bedienbarkeit
Darstellung des Hintergrunds, des Rahmens, des Schattens etc.
Farbliche Darstellung des Hintergrunds und des Rahmens, auch in Abhängigkeit vom Zustand des Steuerelements

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 das Steuerelement stehen keine System-Styles zur Verfügung. Sie können eigene Styles für das Steuerelement erstellen. Diese Styles stehen nach der Erstellung in der Eigenschaft "Style" zur Auswahl.

Das Steuerelement beinhaltet ein Element "Symbol", das die Grafik darstellt.

Das Image enthält ein Symbol

Das Steuerelement kann zwischen verschiedenen Grafiken (Element "Symbol") wechseln, je nach Wert der angebundenen Variablen. Um je nach Variablenwert wechselnde Grafiken festzulegen, legen Sie über die Eigenschaft "ImageList" eine Liste mit Elementen von Typ "ImageState" an.

Zusätzlich kann eine statische Grafik konfiguriert werden, die nur dann angezeigt wird, wenn:

das Steuerelement keine Statusliste enthält, die Grafik wird dann permanent angezeigt,
der aktuelle Wert zur Laufzeit keinem der in den Listenelementen festgelegten Werte entspricht.

Zur Konfiguration der statischen Grafik stehen in der Kategorie "Image" folgende Eigenschaften zur Verfügung:

Image

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 "ImageType" und "IconFont" ab.

ImageType

Legt den Grafiktyp und die Quelle der Grafik fest.

Icon

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

Die Grafik soll eine Vektorgrafik im Format SVG aus dem Ordner imagesWsvgs sein.
Bitmap

Die Grafik soll eine Pixelgrafik (BMP, PNG, GIF, JPG) aus dem Ordner imagesWbitmaps 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.

ImageSize

Bestimmt die Darstellungsgröße der Grafik. Die Grafik wird immer quadratisch dargestellt (ImageSize=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 "ImageSize" 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.

Verwandte Themen:

Layout