Bildlaufleiste

Anzeige von Text mit horizontaler und vertikaler Bildlaufleiste

Ein Textfeld mit horizontaler und vertikaler Bildlaufleiste

Eine Bildlaufleiste – auch Scroll-Balken (aus englisch scrollbar), Rollbalken oder Schiebebalken genannt – ist ein Steuerelement einer grafischen Benutzeroberfläche zur Durchführung und Veranschaulichung des Bildlaufs (englisch scrolling). Bildlaufleisten dienen der Verschiebung des sichtbaren Ausschnitts eines dargestellten Inhalts, beispielsweise eines Texts oder einer Grafik. Es gibt horizontale Bildlaufleisten, um den Ausschnitt von links oder rechts zu verschieben, und vertikale Bildlaufleisten zur Auf- oder Abwärtsverschiebung. Die Bedienung beider Varianten ist analog. Je nach Erfordernis werden eine der beiden oder beide Varianten gleichzeitig dargestellt.

Darstellung

Bei der Bildlaufleiste handelt es sich um einen rechteckigen Bereich, der im Falle der horizontalen Bildlaufleiste unter dem Inhalt dargestellt wird. Eine vertikale Bildlaufleiste wird im Regelfall rechts neben dem Inhalt platziert. Die folgenden Erläuterungen beziehen sich auf eine horizontale Bildlaufleiste, sie gelten analog unter Vertauschung der Dimensionen für eine vertikale.

Normalerweise erstreckt sich eine horizontale Bildlaufleiste über die gesamte Breite des Ausschnitts. In manchen Fällen werden neben der Bildlaufleiste am unteren Rand andere Kontrollelemente platziert, beispielsweise Registerkarten. Die Höhe der Bildlaufleiste ist deutlich kleiner als deren Breite und unabhängig von der Größe des Ausschnitts. Die Höhe ist nur so groß gewählt, dass eine akzeptable Bedienung des Kontrollelements möglich ist, um möglichst wenig Darstellungsfläche für den eigentlichen Inhalt zu verlieren. Wenn die Breite des gesamten Inhalts die aktuelle Breite des Ausschnitts nicht übersteigt, wird die Bildlaufleiste ausgegraut (deaktiviert) oder alternativ gänzlich entfernt.

Eine Bildlaufleiste besteht aus verschiedenen Elementen, für die die Bezeichnungen – sowohl im Deutschen als auch im Englischen – sehr stark variieren. Im Folgenden wird das Erscheinungsbild dieser Elemente erläutert und die gängigsten deutschen und englischen Bezeichnungen aufgeführt.

• Bildlaufpfeil^[1] (Scroll arrow): Im Regelfall befindet sich am linken und am rechten Ende der Bildlaufleiste ein Pfeilsymbol mit der Funktion einer Schaltfläche.
• Bildlauffeld, Schieberegler^[2] (englisch scroll box, thumb,^[3] Scroller^[4]): Vom restlichen Teil meist durch dunklere Darstellung abgesetzter Bereich der Bildlaufleiste, oft ähnlich einem Schieberegler dargestellt.^[5]
• Schaft der Bildlaufleiste (englisch scroll shaft^[3]): Bereich links und rechts des Bildlauffelds.

Die aktuelle Position des Ausschnitts wird durch die Position des Bildlauffelds, also des Schiebereglers, innerhalb der Bildlaufleiste dargestellt. Das heißt, die Breite des Schafts links und rechts des Bildlauffelds zeigt an, wie viel nicht sichtbarer Inhalt in dieser Richtung noch vorhanden ist. Die Breite des Bildlauffelds selbst wiederum deutet an, wie viel insgesamt vom Inhalt derzeit zu sehen ist.^[6]

Funktionsweise

Neben der Anzeige der aktuellen Position dient die Bildlaufleiste der Steuerung des Bildlaufs. Diese ist unter Verwendung der Maus, eines Touchpads oder Touchscreens auf verschiedene Weise möglich:^[7]

• Durch Klick auf einen der Bildlaufpfeile verschiebt sich der Ausschnitt in kleinen Schritten nach links oder rechts bzw. oben oder unten. Wenn die Maustaste gedrückt gehalten wird während der Mauszeiger auf einem der Bildlaufpfeile verbleibt, wird – nach kurzer Verzögerung – der Bildlauf kontinuierlich durchgeführt.
• Durch Klick auf den Schaft der Bildlaufleiste links oder rechts bzw. über oder unter dem Bildlauffeld wird der sichtbare Bildausschnitt in entsprechender Richtung seitenweise verschoben – also so dass der Ausschnitt vollständig oder nahezu vollständig mit neuem Inhalt gefüllt wird, ohne dass Inhalt übersprungen wurde.
• Durch Ziehen des Bildlauffelds in die gewünschte neue Position. Dabei muss der Mauszeiger nicht exakt auf der Bildlaufleiste bleiben, sondern nur in einem je nach Programm mehr oder weniger großen Bereich daneben. Wenn man diesen Bereich verlässt, springt das Bildlauffeld an die ursprüngliche Position zurück.

Der Bildlauf kann häufig alternativ über Tastatur oder das Mausrad durchgeführt werden. Bei manchen Programmen, z. B. Windows-Explorer, Texteditor, Adobe Acrobat Reader DC, öffnet ein Rechtsklick auf die Bildlaufleiste ein Menü, bei manchen setzt ein Mittelklick auf den Schaft das Bildlauffeld an die angeklickte Stelle, z. B. LibreOffice, jEdit.

Programmierung

C#

Das folgende Beispiel in der Programmiersprache C# zeigt die Implementierung eines Hauptfensters mit einem vertikalen und einem horizontalen Scrollbar und anderen Steuerelementen. Das Scroll Ereignis, das beim Verschieben des Bildlauffelds der Scrollbars ausgelöst wird, ist jeweils mit einer Ereignisbehandlungsroutine verknüpft, die die Position der anderen Steuerelementen verschiebt (siehe Ereignis).^[8][9]

using System.Windows.Forms;

public class MainForm : System.Windows.Forms.Form
{
	private System.Windows.Forms.Label deputyNameLabel;
	private System.Windows.Forms.TextBox deputyNameTextBox;
	private System.Windows.Forms.Label politicalPartyLabel;
	private System.Windows.Forms.TextBox politicalPartyTextBox;
	
	private System.Windows.Forms.VScrollBar verticalScrollBar;
	private System.Windows.Forms.HScrollBar horizontalScrollBar;
	
	// Konstruktor des MainForms.
	public MainForm()
	{
		InitializeCheckBoxesAndTextBox();
	}
	
	// Startet die Anwendung und erzeugt das MainForm durch Aufruf des Konstruktors.
    public static void Main()
    {
        Application.Run(new MainForm());
    }
	
	// Initialisiert die Labels, Textfelder und Scrollbars.
	private void InitializeComponents()
	{
		// Erzeugt 2 Labels, 2 Textfelder, ein vertikales und ein horizontales Scrollbar durch Aufruf der Standardkonstruktoren.
		
		deputyNameLabel = new Label();
		deputyNameTextBox = new TextBox();
		politicalPartyLabel = new Label();
		politicalPartyTextBox = new TextBox();
		
		verticalScrollBar = new VScrollBar();
		horizontalScrollBar = new HScrollBar();
		
		SuspendLayout();
		
		deputyNameLabel.Location = new System.Drawing.Point(50, 50);
		deputyNameLabel.Text = "Abgeordneter";
		Controls.Add(deputyNameLabel);
		deputyNameTextBox.Location = new System.Drawing.Point(150, 50);
		deputyNameTextBox.Width = 200;
		Controls.Add(deputyNameTextBox);
		politicalPartyLabel.Location = new System.Drawing.Point(50, 100);
		politicalPartyLabel.Text = "Politische Partei";
		Controls.Add(politicalPartyLabel);
		politicalPartyTextBox.Location = new System.Drawing.Point(150, 100);
		politicalPartyTextBox.Width = 200;
		Controls.Add(politicalPartyTextBox);
		
		verticalScrollBar.Dock = DockStyle.Right; // Dockt das vertikale Scrollbar am rechten Rand des MainForms an.
		verticalScrollBar.Maximum = 100;
		verticalScrollBar.Scroll += new ScrollEventHandler(VerticalScrollBar_Scrolled); // Verknüpft die Ereignisbehandlungsmethode mit dem Scroll Ereignis des vertikalen Scrollbars.
		Controls.Add(verticalScrollBar);
		
		horizontalScrollBar.Dock = DockStyle.Bottom; // Dockt das vertikale Scrollbar am rechten Rand des MainForms an.
		horizontalScrollBar.Maximum = 100;
		horizontalScrollBar.Scroll += new EventHandler(HorizontalScrollBar_Scrolled); // Verknüpft die Ereignisbehandlungsmethode mit dem Scroll Ereignis des horizontalen Scrollbars.
		Controls.Add(horizontalScrollBar);
		
		Text = "Abgeordnete im Parlament"; // Setzt die Beschriftung des MainForms.
		
		ResumeLayout(false);
		PerformLayout();
	}
	
	// Diese Methode wird aufgerufen, wenn der Benutzer das vertikale Scrollbar verschiebt.
	private void VerticalScrollBar_Scrolled(object sender, System.EventArgs e)
	{
		// Setzt die vertikale Position der Labels und Textfelder entsprechend der Position des Bildlauffelds des vertikalen Scrollbars.
		int verticalBarPosition1 = 50 - verticalScrollBar.Value;
		int verticalBarPosition2 = 100 - verticalScrollBar.Value;
		deputyNameLabel.Top = verticalBarPosition1;
		deputyNameTextBox.Top = verticalBarPosition1;
		politicalPartyLabel.Top = verticalBarPosition2;
		politicalPartyTextBox.Top = verticalBarPosition2;
	}
	
	// Diese Methode wird aufgerufen, wenn der Benutzer das horizontale Scrollbar verschiebt.
	private void HorizontalScrollBar_Scrolled(object sender, System.EventArgs e)
	{
		// Setzt die horizontale Position der Labels und Textfelder entsprechend der Position des Bildlauffelds des horizontalen Scrollbars.
		int horizontalBarPosition1 = 50 - horizontalScrollBar.Value;
		int horizontalBarPosition2 = 150 - horizontalScrollBar.Value;
		deputyNameLabel.Left = horizontalBarPosition1;
		deputyNameTextBox.Left = horizontalBarPosition2;
		politicalPartyLabel.Left = horizontalBarPosition1;
		politicalPartyTextBox.Left = horizontalBarPosition2;
	}
}

Siehe auch

• Rollen-Taste
• Bildlauf

Einzelnachweise

1. ↑ Michael-Alexander Beisecker: Das Lexikon der PC-Fachbegriffe. Verlag für deutsche Wirtschaft, Bonn 2005, ISBN 3-8125-0592-4, Seite 310 (online)
2. ↑ www.at-mix.de: Bildlauffeld
3. ↑ ^{a b} About Scroll Bars (englisch) – MSDN, 2016
4. ↑ Mac Developer Library: OS X Human Interface Guidelines. Seite 173 (PDF)
5. ↑ Tim O'Reilly, Valerie Quercia: X Users Guide Motif R5: Motif Edition. O'Reilly Media, Sebastopol 1993, ISBN 1-56592-015-5, Seite 276 (online)
6. ↑ Christiane Rudolf: Handbuch Software Ergonomie. Seite 38 (PDF)
7. ↑ windows.microsoft.com: Verwenden von Menüs, Schaltflächen, Bildlaufleisten und Kontrollkästchen
8. ↑ Microsoft Docs: ScrollBar Class
9. ↑ Microsoft Docs: ScrollBar.Scroll Event