滑块

项目
06/02/2023

滑块是一种可让用户通过沿轨迹移动 thumb 控件从一个值范围中进行选择的控件。

滑块控件

这是正确的控件吗？

当你希望用户能够设置所定义的连续值（如音量或亮度）或一系列离散值（如屏幕分辨率设置）时，应使用滑块。

当你知道用户用户将该值视为相对数量而不是数值时，滑块是最好的选择。例如，用户考虑将其音量设置为低或中—而不是考虑将该值设置为 2 或 5。

不要对二元设置使用滑块。改用切换开关。

下面是决定是否使用滑块时要考虑的一些其他因素：

该设置是否是相对数量？ 如果不是，使用单选按钮或列表框。
该设置是否为确切的已知数值？ 如果是，请使用数值文本框。
用户是否会从设置更改效果的即时反馈中获益？ 如果是，请使用滑块。例如，用户可以通过立即查看色调、饱和度或亮度值更改的效果，从而更加轻松地选择颜色。
该设置是否包含四个或更多值？ 如果不是，请使用单选按钮。
用户是否可以更改该值？ 滑块用于用户交互。如果用户无法更改该值，请改为使用只读文本。

如果你在滑块和数值文本框之间进行选择，请在以下情况下使用数值文本框：

屏幕空间紧凑。
用户可能首选使用键盘。

在以下情况下使用滑块：

用户将获得即时反馈所带来的好处。

建议

调整控件大小，以便用户可以轻松设置所需的值。对于具有离散值的设置，请确保用户可以使用鼠标轻松选择任何值。确保滑块的终点始终位于视图边界内。
在用户选择时或选择后，提供即时反馈（如果实际）。例如，Windows 音量控件会蜂鸣以指示选定的音频音量。
使用标签显示值范围。例外：如果滑块垂直放置，并且顶部标签为“最大”、“高”、“更多”或同等标签，则可以忽略其他标签，因为它的意思已明确。
在禁用滑块时禁用所有关联标签或反馈视觉对象。
当设置你的滑块的流向和/或方向时，请考虑文本方向。在某些语言中，书写文字从左向右排列，在另一些语言中却从右向左排列。
不使用滑块作为进度指示器。
不要将滑块的滑动条大小更改为默认大小以外的大小。
如果值范围较大，并且用户很可能选择该范围内几个代表值之一，请不要创建相邻滑块。相反，请将这些值用作唯一允许的步骤。例如，如果时间值最多为 1 个月，但用户仅需要从 1 分钟、1 小时、1 天或 1 个月中选取，则创建仅具有 4 个步骤点的滑块。

其他使用指南

选择适当的布局：水平或垂直

你可以水平或垂直布置滑块。使用这些指南可确定使用哪个布局。

使用自然方向。例如，如果滑块代表一个真实值（通常垂直显示），例如温度，请使用垂直方向。
如果使用控件在媒体中进行搜索，例如在视频应用中，请使用水平方向。
当在可以沿着一个方向（水平或垂直）移动的页面中使用滑块时，请针对滑块使用与移动方向不同的方向。否则，用户在尝试平移页面时，可能会意外地轻扫滑块从而更改其值。
如果仍然不确定使用哪个方向，请使用最适合你的页面布局的方向。

范围方向

范围方向是指当你从滑块的当前值滑动到它的最大值时，滑块的移动方向。

对于垂直滑块，无论从哪个方向阅读，都将最大值放在滑块的顶部。例如，对于音量滑块，始终将最大音量设置放在滑块顶部。对于其他类型的值（例如星期几），请按照页面的阅读说明操作。
对于水平样式，如果是从左到右的页面布局，请将较小的值放在滑块的左侧；如果是从右到左的页面布局，请将较小的值放在滑块的右侧。
上述指南的一个例外是，对于媒体定位栏：始终将较小的值放在滑块的左侧。

步长和刻度线

如果你不希望滑块允许最小值和最大值之间的任意值，请使用 "步骤点"。例如，如果使用滑块来指定要购买的电影票据数量，则不允许浮点值。为它提供一个步骤值 1。
如果你指定步骤（也称为贴靠点），请确保最后一步与滑块的最大值对齐。
当你希望向用户显示主要或有意义值的位置时，请使用刻度线。例如，控制缩放的滑块可能有 50%、100% 和 200% 的刻度线。
当用户需要了解设置的近似值时显示刻度线。
当用户需要知道他们所选择的设置的确切值而不想与控件交互时，显示刻度线和值标签。否则，他们可以使用值工具提示来查看确切值。
当步骤点不明显时，始终显示刻度线。例如，如果滑块的宽度为 200 像素，有 200 个贴靠点，则可以隐藏刻度线，因为用户不会注意到贴靠行为。但是如果只有 10 个贴靠点，则显示刻度线。

外观和交互

滑块由一条轨迹和 Thumb 控件构成。该轨迹是一个栏（它可以选择性地显示各种刻度线样式），它代表可以输入的值范围。 Thumb 控件是一个选择器，用户可通过点击轨迹或来回推动来决定它的位置。

滑块具有较大的触摸目标。要维护触摸辅助功能，滑块应该与显示器边缘保持足够远的距离。

设计自定义滑块时，请考虑尽可能清楚地向用户提供所有需要的信息的方法。如果用户需要通过了解单位来了解设置，请使用值标签；寻找使用图形创意地代表这些值的方法。例如，控制音量的滑块可以在滑块最小值一端显示不带有音波的扬声器图形，并在最大值一端显示带有音波的扬声器图形。

示例

带有刻度线的滑块，其刻度线以 10 点为间隔，介于 0 到 100 之间。

带有刻度线的滑块

UWP 和 WinUI 2

重要

本文中的信息和示例针对使用 Windows 应用 SDK 和 WinUI 3 的应用进行优化，但通常适用于使用 WinUI 2 的 UWP 应用。有关特定于平台的信息和示例，请参阅 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

此控件的 API 存在于 Windows.UI.Xaml.Controls 命名空间中。

UWP API：Slider 类、 Value 属性、 ValueChanged 事件
打开 WinUI 2 库应用，查看运行中的滑块。 WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

建议使用最新的 WinUI 2 来获取所有控件的最新样式和模板。 WinUI 2.2 或更高版本包含此控件的新模板，该模板使用圆角。有关详细信息，请参阅圆角半径。

创建滑块

重要 API：Slider 类、Value 属性、ValueChanged 事件

打开 WinUI 3 库应用，查看运行中的滑块。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

下面介绍了如何使用 XAML 创建滑块。

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

下面介绍了如何使用代码创建滑块。

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);

从 Value 属性中获取并设置滑块的值。若要响应值更改，可使用数据绑定以绑定到 Value 属性或处理 ValueChanged 事件。

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

获取示例代码

WinUI 库示例 - 以交互式格式查看所有 XAML 控件。

滑块