imported>Aka: Tippfehler entfernt, Kleinkram

2025-09-22T14:54:33Z

Neue Seite

{{Dieser Artikel|behandelt das Element von grafischen Benutzeroberflächen. Zu weiteren Bedeutungen siehe [[Steuerelement (Begriffsklärung)]].}}
[[Datei:Gtk3-demo 3.11.8.png|mini|gtk3-demo, ein Programm um die in [[GTK (Programmbibliothek)|GTK]] version 3 vorhandenen '''Steuerelemente''' zu veranschaulichen.]]

Ein '''Steuerelement''',<ref>[[Lehnübertragung|Lehnübertragen]] aus {{enS|graphical control element}} und dieses ähnlich (jedoch nur umgangssprachlich) verkürzt [[Entlehnung|entlehnt]] zu ''Control''.</ref><ref name="Petzold_2006" /> '''Bedienelement'''<ref name="Leitenbauer_2019"/><ref name="Kellermayr_2006"/> oder englisch '''Widget'''<ref name="Fitzpatrick_2023" /> genannt, ist ein [[Interaktionselement]] in einer [[Grafische Benutzeroberfläche|grafischen Benutzeroberfläche]] (GUI), beispielsweise eine [[Schaltfläche]] oder eine [[Bildlaufleiste]].

== Prinzip ==
Steuerelemente sind grundsätzlich kleine Programme oder Funktionen/Subroutinen und in einer Programmiersprache wie z. B. [[C++]] geschrieben. Es braucht ein Programm zur [[Bildsynthese]], umgangssprachlich Renderingengine genannt, um sie als Grafik auf dem Bildschirm auszugeben.

Eine grafische Oberfläche besteht aus vielen Einzelelementen, die üblicherweise mit der [[Computermaus|Maus]] bedient werden.

Steuerelemente sind im Programm mit Funktionen verknüpft, die ausgeführt werden, sobald das Element etwa durch Mausklick aktiviert wird. Beispielsweise drückt der Benutzer auf einen „Speichern“-Knopf, wodurch eine entsprechende Funktion aufgerufen wird. Diese kann z. B. einen neuen Dialog präsentieren, der eine weitere Eingabe (Dateinamen, Pfad) verlangt. Diese Eingabe wird dann einer anderen Funktion mitgeteilt.

Steuerelemente werden in der Regel durch ein [[GUI-Toolkit]] zur Verfügung gestellt.
Je nach GUI-Toolkit gibt es nur einfache Steuerelemente, aus denen sich der Programmierer seine eigenen Dialoge zusammenbauen muss, oder komplexere Elemente für häufig benutzte Aufgaben, etwa einen fertigen Dialog zum Speichern einer Datei, in dem die Baumstruktur des [[Dateisystem]]s usw. von dem Toolkit oder vom [[Betriebssystem]] zur Verfügung gestellt wird.

Viele GUI-Toolkits erlauben es dem Programmierer, mehrere Steuerelemente zu einem komplexen, benutzerdefinierten Steuerelement ({{enS|Custom Control}}) zusammenzufassen.<ref name="Petzold_2006" />

[[Zeichenorientierte Benutzerschnittstelle|Zeichenbasierte Oberflächen]] basieren ebenfalls auf Steuerelementen, die sie mit [[Rahmenzeichen]] und [[Unicodeblock Blockelemente|Blockelementen]] darstellen. Auch solche Software lässt sich häufig mit der Maus bedienen. Moderne Beispiele sind [[htop]] und [[Midnight Commander|mc]], die mit dem Toolkit [[ncurses]] entwickelt wurden.

== Gebräuchliche Steuerelemente ==
Jedes Steuerelement hat verschiedene Eigenschaften, sowohl im Verhalten als auch im Aussehen. Gegebenenfalls können Steuerelemente kombiniert und verschachtelt werden.<ref name="Petzold_2006" /> Eventuelle alternative Benennungen und Schreibweisen finden sich in den jeweiligen Artikeln.

* '''Formular''': Das meist unsichtbar im Hintergrund eines Fensters liegende Steuerelement, das alle anderen Steuerelemente enthält
* [[Icon (Computer)|'''Symbol''', '''Icon''']]: Ein grafisches Symbol, meist als Repräsentant einer Datei oder eines Fensters oder des dazugehörigen Programms.
* [[Symbolleiste|'''Symbolleiste''', '''Werkzeugleiste''']]: Ein Bereich mit mehreren, meist bildhaften Schaltflächen (Icons) für Programmfunktionen. Kann ein Menü ergänzen oder auch ganz ersetzen.
* '''[[Menü (Computer)|Menü]]''': Ein Menü ist eine Auswahlliste, die per Klick eingeblendet wird.
* '''Menüleiste''': Eine Menüleiste fasst (horizontal) mehrere Menüs zusammen; sie ist meist nur einmal in einem Programm oder Fenster vorhanden und kann auch außerhalb des Programmfensters platziert sein, z. B. am oberen Bildschirmrand bei [[macOS]] und einigen [[Linux]]-Oberflächen.
* '''[[Textfeld]]''': Ein- oder mehrzeiliges Feld zur Ein- oder Ausgabe von Zahlen oder Text.
* '''[[Schaltfläche]]''', '''Button''': Eine Fläche zum Klicken, um damit eine Aktion auszulösen.
* [[Checkbox|'''Auswahlkästchen''', '''Checkbox''']]: Kann üblicherweise gesetzt oder nicht gesetzt sein, manchmal auch [[Ausgrauen|ausgegraut]] werden.
* [[Radiobutton|'''Optionsfeld''', '''Radiobutton''']]: Zur Auswahl einer Möglichkeit aus einer Gruppe von zwei oder mehr.
* '''[[Umschalter (Steuerelement)|Umschalter]]''', '''Toggle Switch''': Äquivalent zu physischen Kippschaltern. Wird häufig in Apps für mobile Endgeräte verwendet.
* [[Listenfeld|'''Listenfeld''', '''Listbox''']]: Zur zeilenweisen Auswahl von Texten und anderen Objekten. Mehrzeilig oft mit vertikaler Bildlaufleiste.
* [[Combobox|'''Kombinationsfeld''', '''Combobox''']]: Kombination aus Textfeld und Listenfeld, wobei das Listenfeld unterhalb des Textfeldes angezeigt wird oder ausgeklappt werden kann.
* [[Dropdown-Liste|'''Dropdown-Listenfeld''', '''Dropdown-Liste''']]: Kombination aus schreibgeschütztem Textfeld und ausklappbarer Auswahlliste, so dass das Textfeld nur einen der Einträge der Liste annehmen kann.
* [[Label (Steuerelement)|'''Beschriftungsfeld''', '''Label''']]: Für einfachen Text; beschriftet andere Felder.
* [[Baum (Steuerelement)|'''Baum''', '''Baumansicht''']]: Eine mit Knoten gegliederte hierarchische Liste. Knoten und Elemente können schlichte Textausgaben (wie Textfeld) sein oder wiederum Steuermöglichkeiten anbieten (z. B. die Auswahl, ein [[Kontextmenü]] je Element oder Auf-/Zuklappen von Knoten). Häufigste Baumansicht ist die der [[Verzeichnisstruktur]] eines Datenträgers in einem [[Dateimanager]].
* '''[[Rasteransicht]]''', '''Data Grid''' oder '''Flex Grid''': Zur tabellarischen Anzeige von Daten. Die Daten werden in Zellen bearbeitet und können sortiert bzw. gruppiert werden. Eine klassische Anwendung findet das Flex Grid bei der Ansicht von Datensätzen aus einer Datenbank (in diesem Fall auch Data Grid genannt). Gewöhnlich enthält die 1. Spalte eine fortlaufende Nummer. Weitere Spalten zeigen zum Beispiel Datenfelder aus der Kunden- oder Artikelverwaltung (z. B. Name, Vorname, Straße, PLZ, Ort etc.)
* '''[[Drehfeld (Steuerelement)|Drehfeld]]''', '''Auf-Ab''', '''Spinner''': Ein Steuerelement, mit dem ein (meistens numerischer) Wert inkrementiert oder dekrementiert werden kann.
* [[Bildlaufleiste|'''Bildlaufleiste''', '''Scrollbar''']]: Wird benutzt, um den Fensterinhalt vertikal oder horizontal zu verschieben oder Werte stufenlos einzustellen
* '''[[Schieberegler (Steuerelement)|Schieberegler]]''', '''Slider''': Wird zur grafischen Auswahl von Werten benutzt.
* '''[[Fortschrittsanzeige|Fortschrittsbalken bzw. -anzeige]]''': Zeigt den Fortschritt einer Operation an. Ursprünglich und meistens eine als [[Balken]] bezeichnete rechteckige Fläche, innerhalb derer mindestens zwei Teilflächen ihre Größe in [[Relation (Philosophie)|Relation]] zueinander verändern. Beispielsweise kann dadurch visualisiert werden wie viel Prozent einer Datei kopiert wurden. Ebenso gibt es Fortschrittsanzeiger, die tatsächlich lediglich anzeigen, dass eine Operation noch nicht korrekt beendet wurde.
* '''[[Statusleiste]]''': Ein Bereich am unteren Rand eines Fensters, in dem der Programmstatus oder ein Hilfetext angezeigt werden kann.
* [[Registerkarte|'''Registerkarte''', '''Tab''']]: Für mehrseitige [[Dialogfenster]] oder mehrere Dokumente pro Fenster. Deren überstehende Bereiche zur Auswahl der einzelnen Karten werden auch ''Tabs'' genannt.
* '''Gruppenfeld''': Ein Rahmen mit Überschrift zur Gruppierung inhaltlich zusammengehörender Steuerelemente.
* [[Ribbon|'''Multifunktionsleiste''', '''Ribbon''']]: Eine Leiste, die die Vereinigung der Elemente [[Menü (Computer)|Menü]] und [[Symbolleiste]], sowie teilweise auch der [[Titelleiste]] darstellt.
[[Datei:Paint Net 3.5.10.png|mini|Farb- und Ebenenpalette in [[Paint.NET]]]]
* '''[[Palette (Benutzeroberfläche)|Palette]]''', '''Werkzeugfenster''': Spezielle, meist „schwebende“ oder seitlich angeordnete, verankerte Fenster, in denen beispielsweise Eigenschaften bearbeitet werden, Farben oder [[Ebenentechnik|Ebenen]] gewählt werden, Dokumentstruktur, Formatvorlagen oder Suchergebnisse anzeigt werden etc. Im Gegensatz zu Dialogen sind Paletten fast immer nicht-modal, erlauben also auch Eingaben außerhalb der Palette und haben keine ''OK''-, ''Abbrechen''- oder ''Schließen''-Schaltflächen.
* '''[[Kalendersteuerelement]]''': Ein Kalenderwerkzeug zur Auswahl von Datumsangaben, gelegentlich ergänzt um eine Uhrzeit zur Auswahl eines Zeitpunkts.
* '''[[Trennleiste (Software)|Trennleiste]]''': Ein verschiebbarer Balken zur Anpassung der Größe von zwei parallel angeordneten Steuerelementen.

In [[objektorientierte Programmierung|objektorientierten Programmiersprachen]] stehen die Steuerelemente üblicherweise als Klassen zur Verfügung. Manche Programmiersprachen bieten auch bestimmte Klassen als unsichtbare Steuerelemente an:

* '''Timer''', '''Zeitgeber''': Löst nach bestimmten Intervallen ein Ereignis aus.
* '''Bilderliste''': Beinhaltet die Bilder von Symbolleisten und Menüs.
* '''[[Tooltip]]''': Einige GUI-Toolkits bieten eine unsichtbare Komponente an, um Tooltip-Fenster zu gestalten und deren Verhalten zu steuern.

[[Datei:Steuerelemente.png|zentriert|gerahmt|Die sichtbaren Steuerelemente unter Windows 7]]

== Programmierung von Steuerelementen ==
Visuelle Programmierumgebungen wie beispielsweise [[Visual Basic Classic|Visual Basic]] oder [[Gambas (Programmiersprache)|Gambas]] erlauben die einfache Programmierung der Steuerelemente.

== Beispiele ==
Das folgende Beispiel in der [[Programmiersprache]] [[C-Sharp|C#]] zeigt die Implementierung eines Hauptfensters mit einer [[Combobox]] und einem [[Textfeld]] und die Verknüpfung des Auswahlereignis mit einer Ereignisbehandlungsroutine (siehe [[Ereignis (Programmierung)|Ereignis]]).<ref>{{Internetquelle |url=https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.combobox.selectedindexchanged |titel=ComboBox.SelectedIndexChanged Event |werk=learn.microsoft.com |hrsg=Microsoft |sprache=en |abruf=2020-08-18}}</ref><syntaxhighlight lang="c#">
using System.Windows.Forms;

public class MainForm : System.Windows.Forms.Form
{
// Konstruktor des MainForms.
public MainForm() : base()
{
InitializeComboBox();
InitializeTextBox();
}

// Startet die Anwendung und erzeugt das MainForm durch Aufruf des Konstruktors.
public static void Main()
{
Application.Run(new MainForm());
}

internal System.Windows.Forms.TextBox personTextBox;

// Initialisiert das Textfeld.
private void InitializeTextBox()
{
personTextBox = new System.Windows.Forms.TextBox();
personTextBox.ScrollBars = ScrollBars.Vertical;
personTextBox.Location = new System.Drawing.Point(50, 25);
personTextBox.Size = new System.Drawing.Size(200, 100);
personTextBox.Text = "Name und Anzahl der Verkommen:";
personTextBox.Multiline = true; // Legt fest, dass die Textfeld mehrere Zeilen haben kann und Zeilenumbrüche ermöglicht
Controls.Add(personTextBox);
}

internal System.Windows.Forms.ComboBox personsComboBox;

// Initialisiert die Combobox und fügt ein Array vom Typ string hinzu.
private void InitializeComboBox()
{
personsComboBox = new System.Windows.Forms.ComboBox();
string[] personen = new string[]{"Hamilton, David", "Hensien, Kari",
"Hammond, Maria", "Harris, Keith", "Henshaw, Jeff D.",
"Hanson, Mark", "Harnpadoungsataya, Sariya",
"Harrington, Mark", "Harris, Keith", "Hartwig, Doris",
"Harui, Roger", "Hassall, Mark", "Hasselberg, Jonas",
"Harnpadoungsataya, Sariya", "Henshaw, Jeff D.",
"Henshaw, Jeff D.", "Hensien, Kari", "Harris, Keith",
"Henshaw, Jeff D.", "Hensien, Kari", "Hasselberg, Jonas",
"Harrington, Mark", "Hedlund, Magnus", "Hay, Jeff",
"Heidepriem, Brandon D."};

personsComboBox.Items.AddRange(personen);
personsComboBox.Location = new System.Drawing.Point(50, 150);
personsComboBox.DropDownStyle = ComboBoxStyle.DropDownList;
personsComboBox.Size = new System.Drawing.Size(200, 100);
personsComboBox.TabIndex = 0;
Controls.Add(personsComboBox);

// Verknüpft die Ereignisbehandlungsmethode mit dem Auswahlereignis SelectedIndexChanged der Combobox.
personsComboBox.SelectedIndexChanged += new System.EventHandler(personsComboBox_SelectedIndexChanged);
}

// Diese Methode wird aufgerufen, wenn der Benutzer die Auswahl der Combobox ändert.
// Sie sucht alle Vorkommen des Namens der Person im Array und gibt den Namen und die Anzahl der Vorkommen im Textfeld aus.
private void personsComboBox_SelectedIndexChanged(object sender, System.EventArgs e)
{
string selectedName = (string) personsComboBox.SelectedItem;

int numberOfOccurences = 0;
int index = -1;

// Ruft die Methode FindStringExact auf, um das erste Vorkommen in der Liste zu finden.
index = personsComboBox.FindStringExact(selectedName);

// Entfernt den gefundenen Namen und erhöht die Anzahl der gefundenen Namen.
// Ruft dann die Methode FindStringExact erneut auf und übergibt den Index des aktuell gefundenen Elements, damit die Suche dort beginnt statt am Anfang der Liste.
while (index != -1)
{
personsComboBox.Items.RemoveAt(index);
numberOfOccurences += 1;
index = personsComboBox.FindStringExact(selectedName, index);
}
// Update the text in personTextBox.
personTextBox.Text = personTextBox.Text + "\r\n" + selectedName + ": " + numberOfOccurences;
}
}
</syntaxhighlight>

== Siehe auch ==
* [[Liste von GUI-Bibliotheken]]

== Weblinks ==
{{Wikibooks|Gambas: Steuerelemente}}

== Einzelnachweise ==
<references>

<ref name="Petzold_2006">{{Literatur |Autor=Charles Petzold |Titel=Windows Forms-Programmierung mit Visual C# 2005 |Verlag=Microsoft Press |Datum=2006 |Sprache=de |ISBN=3-86063-985-4 |Kapitel=Benutzerdefinierte Steuerelemente |Seiten=151 ff |Online=https://web.archive.org/web/20210618111119/https://www.microsoft-press.de/chapter.asp?cnt=getchapter&id=ms-985.pdf |Format=PDF |KBytes=553 |Abruf=2024-03-23}}</ref>

<ref name="Leitenbauer_2019">{{Literatur |Autor=Günter Leitenbauer |Titel=Datenbankanwendungen mit VC++ und Oracle: Das Fallenvermeidungsbuch |Auflage=1 |Verlag=BoD – Books on Demand |Ort=Norderstedt |Datum=2019 |Sprache=de |ISBN=978-3-7494-8474-4 |Seiten=74 |Online={{Google Buch |BuchID=gLC2DwAAQBAJ |Seite=74}}}}</ref>

<ref name="Kellermayr_2006">{{Literatur |Autor=Karl H. Kellermayr |Titel=Technische Informatik: Internet- und PC-Technologie für automatisierte Anlagen und Prozesse |Auflage=1 |Verlag=Springer |Ort=Wien |Datum=2000 |Sprache=de |ISBN=978-3-211-83486-2 |Seiten=63 |Online={{Google Buch |BuchID=ic3TBgAAQBAJ |Seite=63}}}}</ref>

<ref name="Fitzpatrick_2023">{{Internetquelle |autor=Martin Fitzpatrick |url=https://www.pythonguis.com/tutorials/pyqt-basic-widgets/ |titel=PyQt5 Widgets |werk=pythonguis.com |datum=2023-09-13 |sprache=en |abruf=2024-03-23}}</ref>
</references>

[[Kategorie:Steuerelement einer grafischen Benutzeroberfläche| ]]

Steuerelement - Versionsgeschichte

imported>Aka: Tippfehler entfernt, Kleinkram