SchiebereglerSliders

Ein Schieberegler ist ein Steuerelement, über das der Benutzer aus einer Reihe von Werten auswählen kann, indem er ein Schiebereglersteuerelement über einen Bereich verschiebt.A slider is a control that lets the user select from a range of values by moving a thumb control along a track.

Wichtige APIs: Slider-Klasse, Value-Eigenschaft, ValueChanged-EreignisImportant APIs: Slider class, Value property, ValueChanged event

Schiebereglersteuerelement

Ist dies das richtige Steuerelement?Is this the right control?

Verwenden Sie einen Schieberegler, wenn Sie Benutzern ermöglichen möchten, definierte, zusammenhängende Werte (z. B. Lautstärke oder Helligkeit) oder einen Bereich von separaten Werten (z. B. Einstellungen für die Bildschirmauflösung) festzulegen.Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).

Eine Schieberegler ist eine gute Wahl, wenn Sie wissen, dass Benutzer den Wert als relative Anzahl betrachten und nicht als numerischen Wert.A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. So denken Benutzer beispielsweise beim Festlegen der Audiolautstärke an "niedrig" oder "mittel", aber nicht an Werte wie "2" oder "5".For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5.

Verwenden Sie einen Schieberegler nicht für binäre Einstellungen.Don't use a slider for binary settings. Verwenden Sie stattdessen einen Umschalter.Use a toggle switch instead.

Hier sind einige weitere Faktoren, die Sie bei der Entscheidung für oder gegen die Verwendung eines Schiebereglers berücksichtigen sollten:Here are some additional factors to consider when deciding whether to use a slider:

  • Handelt es sich bei der Einstellung um eine relative Anzahl?Does the setting seem like a relative quantity? Ist dies nicht der Fall, verwenden Sie stattdessen Optionsfelder oder ein Listenfeld.If not, use radio buttons or a list box.
  • Handelt es sich bei der Einstellung um einen exakten, bekannten numerischen Wert?Is the setting an exact, known numeric value? Wenn ja, verwenden Sie ein numerisches Textfeld.If so, use a numeric text box.
  • Wäre es für Benutzer hilfreich, sofort Feedback zur Auswirkung von Einstellungsänderungen zu erhalten?Would a user benefit from instant feedback on the effect of setting changes? Wenn ja, verwenden Sie einen Schieberegler.If so, use a slider. Beispielsweise können Benutzer eine Farbe leichter auswählen, wenn sie sofort sehen, wie sich Änderungen an den Werten für Farbton, Sättigung oder Leuchtdichte auswirken.For example, users can choose a color more easily by immediately seeing the effect of changes to hue, saturation, or luminosity values.
  • Weist die Einstellung einen Bereich aus vier oder mehr Werten auf?Does the setting have a range of four or more values? Ist dies nicht der Fall, verwenden Sie stattdessen Optionsfelder.If not, use radio buttons.
  • Können Benutzer den Wert ändern?Can the user change the value? Schieberegler dienen zur Benutzerinteraktion.Sliders are for user interaction. Wenn der Wert in keinem Fall von Benutzern geändert werden kann, verwenden Sie stattdessen schreibgeschützten Text.If a user can't ever change the value, use read-only text instead.

Wenn Sie zwischen einem Schieberegler und einem numerischen Textfeld entscheiden, verwenden Sie in folgenden Fällen ein numerisches Textfeld:If you are deciding between a slider and a numeric text box, use a numeric text box if:

  • Der auf dem Bildschirm verfügbare Platz ist knapp.Screen space is tight.
  • Benutzer möchten wahrscheinlich lieber die Tastatur verwenden.The user is likely to prefer using the keyboard.

Verwenden Sie in folgenden Fällen einen Schieberegler:Use a slider if:

  • Benutzer profitieren von sofortigem Feedback.Users will benefit from instant feedback.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie die App XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und den Schieberegler in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the Slider in action.

Ein Schieberegler zum Steuern der Lautstärke auf Windows Phone.A slider to control the volume on Windows Phone.

Ein Schieberegler zum Steuern der Lautstärke auf Windows Phone

Ein Schieberegler zum Ändern der Textgröße in den Windows-Anzeigeeinstellungen.A slider to change text size in Windows display settings.

Ein Schieberegler zum Ändern der Textgröße in den Windows-Anzeigeeinstellungen

Erstellen Sie einen SchiebereglerCreate a slider

So erstellen Sie einen Schieberegler in XAML.Here's how to create a slider in XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

So erstellen Sie einen Schieberegler im Code.Here's how to create a slider in code.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Den Wert des Schiebereglers können Sie aus der Value-Eigenschaft abrufen und festlegen.You get and set the value of the slider from the Value property. Zum Reagieren auf Werteänderungen können Sie die Value-Eigenschaft mithilfe der Datenbindung binden oder das ValueChanged-Ereignis behandeln.To respond to value changes, you can use data binding to bind to the Value property, or handle the ValueChanged event.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

EmpfehlungenRecommendations

  • Passen Sie das Steuerelement an, sodass Benutzer den Wert einfach anpassen können.Size the control so that users can easily set the value they want. Stellen Sie für Einstellungen mit separaten Werten sicher, dass der Benutzer jeden Wert einfach mithilfe der Maus auswählen kann.For settings with discrete values, make sure the user can easily select any value using the mouse. Stellen Sie sicher, dass die Endpunkte des Schiebereglers immer in die Bereiche einer Ansicht passen.Make sure the endpoints of the slider always fit within the bounds of a view.
  • Geben Sie während oder nach der Benutzerauswahl ein sofortiges Feedback (sofern umsetzbar).Give immediate feedback while or after a user makes a selection (when practical). Beispielsweise gibt die Windows-Lautstärkeregelung einen Signalton aus, um die ausgewählte Audiolautstärke anzuzeigen.For example, the Windows volume control beeps to indicate the selected audio volume.
  • Verwenden Sie Bezeichnungen, um den Wertebereich anzuzeigen.Use labels to show the range of values. Ausnahme: Wenn der Schieberegler vertikal ausgerichtet ist und die obere Beschriftung „Maximum”, „Hoch”, „Mehr” oder ähnlich lautet, ist die Bedeutung klar, und Sie können die anderen Beschriftungen weglassen.Exception: If the slider is vertically oriented and the top label is Maximum, High, More, or equivalent, you can omit the other labels because the meaning is clear.
  • Deaktivieren Sie alle zugeordneten Beschriftungen und das visuelle Feedback, wenn Sie den Schieberegler deaktivieren.Disable all associated labels or feedback visuals when you disable the slider.
  • Bedenken Sie beim Festlegen der Flussrichtung bzw. Ausrichtung Ihres Schiebereglers die Textrichtung.Consider the direction of text when setting the flow direction and/or orientation of your slider. In einigen Sprachen fließt das Skript von links nach rechts, und in anderen von rechts nach links.Script flows from left to right in some languages, and from right to left in others.
  • Verwenden Sie einen Schieberegler nicht als Statusanzeige.Don't use a slider as a progress indicator.
  • Legen Sie für die Miniaturansicht des Schiebereglers keine andere Größe als die Standardgröße fest.Don't change the size of the slider thumb from the default size.
  • Erstellen Sie keinen fortlaufenden Schieberegler, wenn der Wertebereich groß ist und die Benutzer mit hoher Wahrscheinlichkeit einen von mehreren repräsentativen Werten aus dem Bereich auswählen.Don't create a continuous slider if the range of values is large and users will most likely select one of several representative values from the range. Verwenden Sie diese Werte stattdessen als einzige zulässige Schritte.Instead, use those values as the only steps allowed. Wenn der Höchstwert für einen Zeitwert beispielsweise 1 Monat ist, die Benutzer aber nur zwischen 1 Minute, 1 Stunde, 1 Tag oder 1 Monat auswählen sollen, erstellen Sie einen Schieberegler mit 4 Schrittpunkten.For example if time value might be up to 1 month but users only need to pick from 1 minute, 1 hour, 1 day or 1 month, then create a slider with only 4 step points.

Weitere Hinweise zur VerwendungAdditional usage guidance

Auswählen des richtigen Layouts: horizontal oder vertikalChoosing the right layout: horizontal or vertical

Sie können den Schieberegler horizontal oder vertikal ausrichten.You can orient your slider horizontally or vertically. Bestimmen Sie anhand dieser Richtlinien das geeignete Layout.Use these guidelines to determine which layout to use.

  • Verwenden Sie eine natürliche Ausrichtung.Use a natural orientation. Wenn der Schieberegler beispielsweise einen echten Wert darstellt, der normalerweise vertikal angezeigt wird (z. B. eine Temperatur), verwenden Sie die vertikale Ausrichtung.For example, if the slider represents a real-world value that is normally shown vertically (such as temperature), use a vertical orientation.
  • Wenn das Steuerelement für die Suche in Medien verwendet wird, beispielsweise in einer Video-App, verwenden Sie die horizontale Ausrichtung.If the control is used to seek within media, like in a video app, use a horizontal orientation.
  • Wenn Sie einen Schieberegler auf einer Seite verwenden, die in eine Richtung geschwenkt werden kann (horizontal oder vertikal), verwenden Sie für den Schieberegler eine andere Ausrichtung als die Schwenkrichtung.When using a slider in page that can be panned in one direction (horizontally or vertically), use a different orientation for the slider than the panning direction. Anderenfalls streifen Benutzer möglicherweise beim Schwenken der Seite den Schieberegler und ändern versehentlich den Wert.Otherwise, users might swipe the slider and change its value accidentally when they try to pan the page.
  • Wenn Sie noch nicht sicher sind, welche Ausrichtung Sie verwenden sollen, nehmen Sie die, die am besten zum Seitenlayout passt.If you're still not sure which orientation to use, use the one that best fits your page layout.

BereichsrichtungRange direction

Die Bereichsrichtung ist die Richtung, in der Sie den Schieberegler bewegen, wenn Sie ihn vom aktuellen Wert zu seinem maximalen Wert verschieben.The range direction is the direction you move the slider when you slide it from its current value to its max value.

  • Platzieren Sie bei einem vertikalen Schieberegler den höchsten Wert am oberen Ende des Schiebereglers, unabhängig von der Leserichtung.For vertical slider, put the largest value at the top of the slider, regardless of reading direction. Platzieren Sie beispielsweise bei einem Schieberegler für die Lautstärke immer die Einstellung für die maximale Lautstärke am oberen Ende des Schiebereglers.For example, for a volume slider, always put the maximum volume setting at the top of the slider. Bei anderen Arten von Werten (beispielsweise bei Wochentagen) orientieren Sie sich an der Leserichtung der Seite.For other types of values (such as days of the week), follow the reading direction of the page.
  • Platzieren Sie bei horizontalen Stilen den niedrigeren Wert auf der linken Seite des Schiebereglers (bei einem Seitenlayout von links nach rechts ) bzw. auf der rechten Seite (bei einem Seitenlayout von rechts nach links).For horizontal styles, put the lower value on the left side of the slider for left-to-right page layout, and on the right for right-to-left page layout.
  • Die einzige Ausnahme für die oben genannte Richtlinie sind Mediensuchleisten: Platzieren Sie immer den niedrigeren Wert auf der linken Seite des Schiebereglers.The one exception to the previous guideline is for media seek bars: always put the lower value on the left side of the slider.

Schritte und TeilstricheSteps and tick marks

  • Verwenden Sie Schrittpunkte, wenn der Schieberegler keine beliebigen Werte zwischen minimalen und maximalen Werten zulassen soll. Wenn Sie beispielsweise einen Schieberegler verwenden, um die Anzahl der zu kaufenden Kinotickets anzugeben, lassen Sie keine Gleitkommawerte zu.Use step points if you don't want the slider to allow arbitrary values between min and max. For example, if you use a slider to specify the number of movie tickets to buy, don't allow floating point values. Verwenden Sie den Schrittwert "1".Give it a step value of 1.
  • Wenn Sie Schritte (auch als Andockpunkte bezeichnet) angeben, stellen Sie sicher, dass der letzte Schritt am Maximalwert des Schiebereglers ausgerichtet ist.If you specify steps (also known as snap points), make sure that the final step aligns to the slider's max value.
  • Verwenden Sie Teilstriche, wenn Sie Benutzern die Position wichtiger Werte zeigen möchten.Use tick marks when you want to show users the location of major or significant values. So kann beispielsweise ein Schieberegler für die Zoomsteuerung Teilstriche für 50 %, 100 % und 200 % haben.For example, a slider that controls a zoom might have tick marks for 50%, 100%, and 200%.
  • Zeigen Sie Teilstriche an, wenn Benutzer den ungefähren Wert der Einstellung wissen müssen.Show tick marks when users need to know the approximate value of the setting.
  • Zeigen Sie Teilstriche und eine Wertbeschriftung an, wenn die Benutzer den genauen Wert der ausgewählten Einstellung erfahren sollen, ohne mit dem Steuerelement zu interagieren.Show tick marks and a value label when users need to know the exact value of the setting they choose, without interacting with the control. Andernfalls können Sie die QuickInfo für den Wert verwenden, um den genauen Wert anzuzeigen.Otherwise, they can use the value tooltip to see the exact value.
  • Zeigen Sie immer Teilstriche an, wenn Schrittpunkte nicht offensichtlich sind.Always show tick marks when step points aren't obvious. Wenn der Schieberegler beispielsweise 200 Pixel breit ist und 200 Andockpunkte hat, können Sie die Teilstriche ausblenden, da die Benutzer das Andockverhalten nicht bemerken.For example, if the slider is 200 pixels wide and has 200 snap points, you can hide the tick marks because users won't notice the snapping behavior. Wenn aber nur zehn Andockpunkte vorhanden sind, zeigen Sie Teilstriche an.But if there are only 10 snap points, show tick marks.

BeschriftungenLabels

  • SchiebereglerbeschriftungenSlider labels

    Aus der Schiebereglerbeschriftung geht hervor, wofür der Schieberegler verwendet wird.The slider label indicates what the slider is used for.

    • Verwenden Sie eine Beschriftung ohne Interpunktion am Ende (diese Konvention gilt für alle Beschriftungen für Steuerelemente).Use a label with no ending punctuation (this is the convention for all control labels).
    • Platzieren Sie Beschriftungen über dem Schieberegler, wenn er sich in einem Formular befindet, in dem die meisten Beschriftungen über den Steuerelementen positioniert sind.Position labels above the slider when the slider is in a form that places most of its labels above their controls.
    • Platzieren Sie Beschriftungen an der Seite, wenn sich der Schieberegler in einer Umgebung befindet, in der die meisten Beschriftungen neben den Steuerelementen positioniert sind.Position labels to the sides when the slider is in a form that places most of its labels to the side of their controls.
    • Platzieren Sie Beschriftungen nach Möglichkeit nicht unter dem Schieberegler, da der Benutzer die Beschriftung mit dem Finger verdecken könnte, wenn er den Schieberegler berührt.Avoid placing labels below the slider because the user's finger might occlude the label when the user touches the slider.
  • BereichsbeschriftungenRange labels

    Die Bereichs- oder Füllungsbeschriftungen beschreiben den minimalen und den maximalen Wert des Schiebereglers.The range, or fill, labels describe the slider's minimum and maximum values.

    • Beschriften Sie die beiden Enden des Schiebereglerbereichs, sofern dies nicht aufgrund einer vertikalen Ausrichtung unnötig ist.Label the two ends of the slider range, unless a vertical orientation makes this unnecessary.
    • Verwenden Sie nach Möglichkeit für jede Beschriftung nur ein Wort.Use only one word, if possible, for each label.
    • Verwenden Sie keine Interpunktion am Ende.Don't use ending punctuation.
    • Stellen Sie sicher, dass die Beschriftungen aussagekräftig und parallel sind.Make sure these labels are descriptive and parallel. Beispiele: „Maximum/Minimum“, „Mehr/Weniger“, „Niedrig/Hoch“, „Leise/Laut“.Examples: Maximum/Minimum, More/Less, Low/High, Soft/Loud.
  • WertbeschriftungenValue labels

    Eine Wertbeschriftung zeigt den aktuellen Wert des Schiebereglers an.A value label displays the current value of the slider.

    • Wenn Sie eine Wertbeschriftung benötigen, zeigen Sie sie unter dem Schieberegler an.If you need a value label, display it below the slider.
    • Zentrieren Sie den Text relativ zum Steuerelement, und schließen Sie die Einheiten ein (beispielsweise Pixel).Center the text relative to the control and include the units (such as pixels).
    • Da der Schiebereglerziehpunkt beim Streichen verdeckt ist, sollten Sie in Erwägung ziehen, den aktuellen Wert auf andere Art und Weise anzuzeigen, und zwar mit einer Beschriftung oder einem anderen visuellen Effekt.Since the slider’s thumb is covered during scrubbing, consider showing the current value some other way, with a label or other visual. Eine Schieberegler-Einstellungstextgröße könnte einigen Beispieltext auf die richtige Größe neben dem Schieberegler rendern.A slider setting text size could render some sample text of the right size beside the slider.

Erscheinungsbild und InteraktionAppearance and interaction

Eine Schieberegler besteht aus einer Spur und einem Ziehpunkt.A slider is composed of a track and a thumb. Bei der Spur handelt es sich um eine Leiste (welche optional verschiedene Teilstrichstile anzeigen kann), die den Bereich der Werte darstellt, die eingegeben werden können.The track is a bar (which can optionally show various styles of tick marks) representing the range of values that can be input. Der Ziehpunkt ist ein Wahlschalter, den der Benutzer positionieren kann, indem er entweder auf die Spur tippt oder zurück oder noch vorn streicht.The thumb is a selector, which the user can position by either tapping the track or by scrubbing back and forth on it.

Ein Schieberegler weist ein großes Berührungsziel auf.A slider has a large touch target. Ein Schieberegler sollte möglichst weit genug vom Rand des Displays positioniert werden, um eine zugängliche Berührung zu gewährleisten.To maintain touch accessibility, a slider should be positioned far enough away from the edge of the display.

Ziehen Sie beim Entwerfen eines benutzerdefinierten Schiebereglers Möglichkeiten zum übersichtlichen Darstellen aller für den Benutzer erforderlichen Informationen in Betracht.When you’re designing a custom slider, consider ways to present all the necessary info to the user with as little clutter as possible. Verwenden Sie eine Wertbeschriftung, wenn der Benutzer die Einheiten verstehen muss, um die Einstellung nachvollziehen zu können. Suchen Sie nach kreativen Möglichkeiten, um diese Werte grafisch darzustellen.Use a value label if a user needs to know the units in order to understand the setting; find creative ways to represent these values graphically. Beispielsweise könnte ein Schieberegler, über den die Lautstärke geregelt wird, am Minimum-Ende des Schiebereglers eine Lautsprechergrafik ohne Schallwellen und am Maximum-Ende eine Lautsprechergrafik mit Schallwellen anzeigen.A slider that controls volume, for example, could display a speaker graphic without sound waves at the minimum end of the slider, and a speaker graphic with sound waves at the maximum end.

Beispielcode herunterladenGet the sample code