from Wikipedia, the free encyclopedia
The article widget and control element overlap thematically. Help me to better differentiate or merge the articles (→  instructions ) . To do this, take part in the relevant redundancy discussion . Please remove this module only after the redundancy has been completely processed and do not forget to include the relevant entry on the redundancy discussion page{{ Done | 1 = ~~~~}}to mark. A. Abdel-Rahim ( discussion ) 19:46, 14 Aug 2012 (CEST)
gtk3-demo, a program to demonstrate the controls available in GTK + version 3 .

A control or operating element is an interaction element in a graphical user interface (GUI), for example a button or a scroll bar .


Controls are basically small programs or functions / subroutines and written in a programming language such as B. written C ++ . A program for image synthesis , colloquially called a rendering engine, is required to output it as a graphic on the screen.

A graphical user interface consists of many individual elements that are usually operated with the mouse.

In the program, control elements are linked to functions that are executed as soon as the element is activated, for example by a mouse click. For example, the user presses a “Save” button, which calls up a corresponding function. This can e.g. B. present a new dialog that requires further input (file name, path). This input is then passed on to another function.

Controls are usually provided through a GUI toolkit . Depending on the GUI toolkit, there are only simple controls from which the programmer has to assemble his own dialogs, or more complex elements for frequently used tasks, such as a ready-made dialog for saving a file, in which the tree structure of the file system etc. of the toolkit or provided by the operating system.

Character- based surfaces are also based on controls, which they represent with frame characters and block elements . Such software can also often be operated with the mouse. Modern examples are htop and mc , which were developed with the ncurses toolkit .

Common controls

Each control has different properties, both in behavior and appearance. If necessary, controls can be combined and nested. Any alternative names and spellings can be found in the respective articles.

  • Form : The control element, usually invisible in the background of a window, which contains all other control elements
  • Symbol , Icon : A graphic symbol, usually as a representation of a file or a window or the associated program.
  • Toolbar , toolbar : An area with several, mostly pictorial buttons (icons) for program functions. Can complement a menu or replace it entirely.
  • Menu : A menu is a selection list that is displayed with a click.
  • Menu bar : A menu bar combines several menus (horizontally); it usually only exists once in a program or window and can also be placed outside the program window, e.g. B. at the top of the screen on macOS and some Linux interfaces.
  • Text field : Single or multi-line field for input or output of numbers or text.
  • Button , button : An area in order to trigger an action to click.
  • Selection box , check box : Can usually be set or not set, sometimes also grayed out.
  • Radio button , radio button : To select one option from a group of two or more.
  • List field , list box : For line-by-line selection of texts and other objects. Multi-line, often with a vertical scroll bar.
  • Combo box , combobox : Combination of the text field and the list box, the list box is displayed below the text field or may be expanded.
  • Drop-down list field , drop-down list : Combination of a read-only text field and a drop-down selection list so that the text field can only accept one of the entries in the list.
  • Inscription field , label : For simple text; labels other fields.
  • Tree , tree view : A hierarchical list with nodes. Nodes and elements can be simple text outputs (such as a text field) or in turn offer control options (e.g. selection, a context menu for each element or opening / closing of nodes). The most common tree view is that of the directory structure of a data carrier in a file manager .
  • Flexgrid , tabular data view : For the tabular display of data. The data is processed in cells and can be sorted or grouped. A classic application of the Flexgrid is to view data records from a database (in this case also called Datagrid). The 1st column usually contains a sequential number. Other columns show, for example, data fields from customer or article management (e.g. surname, first name, street, zip code, city, etc.)
  • Scroll bar , scroll bar : This is used to shift vertically or horizontally to the window contents or continuously adjust values
  • Slider , slider : Used to graphically select values.
  • Progress bar or indicator : Shows the progress of an operation. Originally and mostly arectangular areacalled a bar , within which at least two partial areas change their size in relation to one another. For example, it can be used to visualize the percentage of a file that has been copied. There are also progress indicators that actually only indicate that an operation has not yet been completed correctly.
  • Status bar : An area at the bottom edge of a window in which the program status or help text can be displayed.
  • Tab , Tab : For multi-page dialog box or more documents per window. Their protruding areas for selecting the individual cards are also called tabs .
  • Group field : A frame with a heading for grouping control elements that belong together in terms of content.
  • Multi-function bar , ribbon : A bar that represents the union of the menu and toolbar elementsand, in some cases, the title bar .
Color and layer palette in Paint.NET
  • Palette : Special, mostly "floating" or laterally arranged, anchored windows in which, for example, properties can be edited, colors or levels can be selected, document structure, format templates or search results are displayed etc. In contrast to dialogs, palettes are almost always non-modal, allow thus also entries outside the palette and have no OK, Cancel or Close buttons.
  • Calendar control : A calendar tool for selecting dates, sometimes supplemented with a time for selecting a point in time.

In object-oriented programming languages , the controls are usually available as classes. Some programming languages ​​also offer certain classes as invisible controls:

  • Timer , timer : Triggers an event after certain intervals.
  • Picture list : Contains the pictures of toolbars and menus.
The visible controls under Windows 7

Programming of controls

Visual programming environments such as Visual Basic or Gambas allow the control elements to be programmed easily.


The following example in the C # programming language shows the implementation of a main window with a combo box and a text field and the link between the selection event and an event handling routine (see event ).

using System.Windows.Forms;

public class MainForm : System.Windows.Forms.Form
	// Konstruktor des MainForms.
    public MainForm() : base()
	// 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
    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.Location = new System.Drawing.Point(50, 150);
        personsComboBox.DropDownStyle = ComboBoxStyle.DropDownList;
        personsComboBox.Size = new System.Drawing.Size(200, 100);
        personsComboBox.TabIndex = 0;
        // 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)
            numberOfOccurences += 1;
            index = personsComboBox.FindStringExact(selectedName, index);
        // Update the text in personTextBox.
        personTextBox.Text = personTextBox.Text + "\r\n" + selectedName + ": " + numberOfOccurences;

See also

Wikibooks: Gambas: Controls  - Learning and teaching materials

Individual evidence

  1. ... this lehnübertragen from English control element graphics and this similar (but only colloquially) shortened borrowed to Control , see Custom Controls ( PDF , ≈ 566  KB ; at Microsoft Press , last published [or ibid uploaded]: 15 May 2012 ; and this is taken from: " Charles Petzold : Windows Forms programming with Visual C # 2005. Microsoft Press 2006 ( ISBN 3-86063-985-4 )", also still visible designation: Microsoft Word - WinForms15 .doc ; ibid on the first page [or after the original count on page 151] including: "From the point of view of the programmer, a custom control is a class that you define yourself and that is directly or indirectly Controlderived from."
  2. ... also called English widget ...
  3. Database applications with VC ++ and Oracle: Das Fallvermeidungsbuch , 2019 by Günter Leitenbauer ; Page 74
  4. Technical IT: Internet and PC technology for automated systems and processes , 2013 by KH Kellermayr ; Page 63
  5. Microsoft Docs: ComboBox.SelectedIndexChanged Event