Drehfeld (Steuerelement)

Ein Drehfeld, auch Auf-Ab-Steuerelement, Up-Down Control, Spinner, Stepper oder Schaltfläche für die schrittweise Weiterschaltung genannt, ist ein Steuerelement einer grafischen Benutzeroberfläche, mit dem ein (meistens numerischer) Wert inkrementiert oder dekrementiert werden kann.

Ein Drehfeld zur Festlegung der Tabulatorbreite in Gedit

Erscheinungsbild

Ein Drehfeld besteht aus zwei kleinen Schaltflächen mit Pfeilen (oder Plus- und Minus-Zeichen), die zur Inkrementierung und Dekrementierung eines Wertes dienen, für den eine Ordnungsrelation definiert ist. Optisch ähnelt es einer Bildlaufleiste ohne den verschiebbaren Balken und kann entweder horizontal oder vertikal dargestellt werden. Die beiden Schaltflächen können auch mit den Pfeiltasten einer herkömmlichen Tastatur bedient werden.

Da dieses Steuerelement selbst keine Möglichkeit besitzt, den gerade ausgewählten Wert für den Benutzer sichtbar darzustellen, wird es in der Regel mit einem anderen Steuerelement kombiniert, das in der Lage ist, den aktuellen Wert lesbar darzustellen. Das mit dem Drehfeld verbundene Steuerelement wird von Microsoft lax als „Buddy“ bezeichnet. In den meisten Fällen handelt es sich bei dem verbundenen Steuerelement um ein gewöhnliches Textfeld.

Je nach Implementierung können sich die beiden Schaltflächen innerhalb oder außerhalb des Textfeldrahmens befinden.

Alternativen

Schieberegler

→ Hauptartikel: Schieberegler (Steuerelement)

Verbund aus Kombinationsfeld und Schieberegler.

Eine häufige Alternative zu Drehfeldern, stellen Schieberegler dar. Diese nehmen allerdings relativ viel Platz ein und erlauben dem Benutzer auch nicht, Werte direkt per Tastatur einzugeben. Um diese beiden Probleme zu lösen, bieten einige Frameworks einen Verbund aus Kombinationsfeld und Schieberegler an. Derartige Steuerelemente nehmen deutlich weniger Platz ein und erlauben dem Benutzer, auch Werte direkt per Tastatur einzugeben.

Bei Touch-Bildschirmen können Schieberegler mit den Fingern in der Regel deutlich einfacher bedient werden als die kleinen Inkrement- und Dekrement-Schaltflächen von Drehfeldern.

Combobox

→ Hauptartikel: Combobox

Bei einer überschaubaren Anzahl von Werten, können auch Kombinationsfelder (Combobox) genutzt werden.

Cycle Button

Cycle Button

Cycle Buttons stellen eine sehr seltene Variante eines Drehfeldes dar. Ein Cycle Button verhält sich identisch zur Schaltfläche zur Inkrementierung des Wertes. Es fehlt aber die Schaltfläche zur Dekrementierung. Mit jedem Klick auf diese Schaltfläche, wird der aktuelle Wert erhöht. Ist das Ende der Liste erreicht, fängt das Steuerelement wieder am Anfang der Liste an.

Implementierungen

Microsoft Windows (Systemkomponente)

Unter Microsoft Windows werden native Drehfelder unter dem Klassennamen „msctls_updown32“ bereitgestellt.

Microsoft .NET

Windows Forms

Unter Windows Forms werden alleinstehende Drehfelder nicht öffentlich bereitgestellt, obwohl sie intern über die Klasse System.Windows.Forms.UpDownBase.UpDownButtons implementiert sind. Öffentlich zur Verfügung stehen nur Kombinationen aus einem Textfeld und einem Drehfeld. Die Basis bildet die abstrakte Klasse System.Windows.Forms.UpDownBase, von der sich die Klassen System.Windows.Forms.NumericUpDown (für numerische Werte) und System.Windows.Forms.DomainUpDown (für allgemeine Werte) ableiten.

Das folgende C# Beispiel zeigt ein Formular, dessen Deckkraft sich (im Bereich von 20 bis 100 Prozent) mit einem Drehfeld verändern lässt.

using System;
using System.Drawing;
using System.Windows.Forms;

internal class MainForm : Form
{
  private NumericUpDown udOpacity;

  //Formular initialisieren
  public MainForm()
  {
    udOpacity = new NumericUpDown();

    SuspendLayout();

    udOpacity.SetBounds(10, 10, 580, 90);
    udOpacity.Minimum = 20; //Wertebereich Minimum: 20%
    udOpacity.Maximum = 100; //Wertebereich Maximum: 100%
    udOpacity.Value = 100; //Aktueller Wert: 100% Deckkraft
    udOpacity.ValueChanged += new EventHandler(SyncOpacity);

    AutoScaleDimensions = new SizeF(12F, 25F);
    AutoScaleMode = AutoScaleMode.Font;
    ClientSize = new Size(600, 60);
    Controls.Add(udOpacity);
    FormBorderStyle = FormBorderStyle.FixedSingle;
    MaximizeBox = false;
    Text = "Deckkraft verändern...";

    ResumeLayout(false);
  }

  //Einstiegspunkt des Programms
  private static void Main()
  {
    Application.Run(new MainForm());
  }

  //Wert des Drehfeldes mit Deckkraft des Formulars synchronisieren
  private void SyncOpacity(object sender, EventArgs e)
  {
    //Aktueller Wert des Drehfeldes entspricht der Deckkraft des Formulars
    Opacity = (float)udOpacity.Value / 100F;
  }
}

Windows Presentation Foundation (WPF)

Unter WPF existiert standardmäßig keine Implementierung dieses Steuerelements. Allerdings werden von diversen Drittanbietern entsprechende Komponenten angeboten.

Microsoft Xamarin

Für Microsoft Xamarin existiert die Komponente Xamarin.Forms.Stepper.

Microsoft Fluent UI Web Components

Numerische Drehfelder sind auch in der Komponentenbibliothek Microsoft Fluent UI Web Components unter dem Namen fluent-number-field enthalten. Es handelt sich dabei um ein Textfeld, das nur die Eingabe von Zahlen in einem frei definierbaren Wertebereich erlaubt und am Rand die typischen Schaltflächen eines Drehfelds besitzt.

Die wichtigsten Attribute sind:

• value – Der aktuelle Wert.
• min – Der minimal zulässige Wert.
• max – Der maximal zulässige Wert.
• step – Die Schrittweite. Der Standardwert ist 1.

Java

Swing

In Java Swing existiert die Komponente javax.swing.JSpinner. Dabei handelt es sich um eine Kombination eines Textfeldes und den beiden Schaltflächen zur Inkrementierung und Dekrementierung des Wertes. Die Implementierung ist sehr flexibel und erlaubt beliebige Datentypen, die einer Ordnungsrelation unterliegen (Spinner Model) und eine benutzerdefinierte Eingabemaske (Spinner Editor). Dadurch können unter anderem Datumswerte korrekt verwaltet werden. Beispielsweise kann dadurch festgelegt werden, dass auf den 28. Februar nur in Schaltjahren der 29. Februar folgt und in allen anderen Jahren der 1. März.

HTML 5 und CSS 3

In HTML 5 wurde für Formulare der neue Eingabetyp „number“ eingeführt. Moderne Webbrowser stellen Eingabefelder dieses Typs als Textfeld mit den typischen Schaltflächen zur Inkrementierung und Dekrementierung des Wertes dar. Zudem ist es möglich, das Minimum (min), das Maximum (max) und die Schrittweite (step) als Attribut anzugeben. Ältere Webbrowser zeigen hingegen nur ein Textfeld ohne den beiden Schaltflächen an. Um sicherzustellen, dass sich der eingegebene Wert im zulässigen Intervall befindet, sollten die übermittelten Daten client- oder serverseitig auf Gültigkeit geprüft werden.

Für Webbrowser, die auf WebKit basieren (z. B. Chrome, Safari, Opera und Edge), existieren CSS Pseudoelemente, mit denen die einzelnen Bestandteile benutzerdefiniert formatiert werden können. Da diese derzeit allerdings nicht standardisiert sind (Stand: Juli 2022), besitzen sie ein browserspezifisches Präfix.

• ::-webkit-inner-spin-button – Die beiden Schaltflächen innerhalb des Rahmens.
• ::-webkit-outer-spin-button – Die beiden Schaltflächen außerhalb des Rahmens.
• ::-webkit-textfield-decoration-container – Der gemeinsame Container für das Textfeld und den beiden Schaltflächen.

Andere Webbrowser unterstützen diese Möglichkeiten derzeit (Stand: Juli 2022) nicht.