滑块

项目
06/10/2024

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

滑块控件

这是正确的控件吗？

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

如果用户认为数值是一个相对量，而不是一个数值，那么滑块就是一个不错的选择。例如，用户会将音频音量设为低或中，而不是设为 2 或 5。

不要使用滑块进行二进制设置。请改为使用切换开关。

在决定是否使用滑块时，还需要考虑以下一些因素：

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

如果要在滑块和数字文本框之间做出选择，请在以下情况下使用数字文本框：

屏幕空间狭小。
用户可能更喜欢使用键盘。

在以下情况时使用滑块：

用户将受益于即时反馈。

建议

确定控件的大小，以便用户轻松设置所需的值。对于具有离散值的设置，确保用户可以使用鼠标轻松选择任何值。确保滑块的端点始终位于视图的范围内。
在用户做出选择的同时或之后（在可行的情况下）提供即时反馈。例如，Windows 音量控制器会发出哔哔声，表示所选的音频音量。
使用标签显示数值范围。例外情况：如果滑块垂直放置，并且顶部标签为“最大”、“高”、“更多”或同等标签，则可以忽略其他标签，因为它的意思已明确。
禁用滑块时禁用所有相关标签或反馈视觉效果。
在设置滑块的流向和/或方向时，请考虑文字的方向。在某些语言中，脚本从左到右流动，而在其他语言中则从右到左流动。
不要使用滑块作为进度指示器。
不要更改滑块拇指的默认大小。
如果数值范围较大，用户很可能会从范围内的几个代表性数值中选择一个，那么就不要创建连续滑块。请改为使用这些值作为允许的唯一步骤。例如，如果时间值可能长达 1 个月，但用户只需从 1 分钟、1 小时、1 天或 1 个月中进行选择，那么就可以创建一个只有 4 个步进点的滑块。

其他使用指南

选择正确的布局：水平布局或垂直布局

可以水平或垂直调整滑块的方向。使用这些指南来决定使用哪种布局。

使用自然方向。例如，如果滑块表示的实际值通常垂直显示（如温度），则应使用垂直方向。
如果该控件用于在媒体（如视频应用程序）中查找，则应使用水平方向。
在可以朝一个方向（水平或垂直）平移的页面中使用滑块时，滑块的方向应与平移方向不同。否则，当用户试图平移页面时，可能会轻扫滑块并意外更改其值。
如果仍不确定使用哪个方向，请使用最适合页面布局的方向。

范围方向

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

对于垂直滑块，无论读取方向如何，都将最大值放在滑块顶部。例如，对于音量滑块，应始终将最大音量设置放在滑块顶部。对于其他类型的数值（如星期），请按照页面的阅读方向进行操作。
对于水平样式，将较低的值放在滑块的左侧（从左到右的页面布局），放在右侧（从右到左的页面布局）。
前一条准则的一个例外是媒体搜索栏：始终将较低的值放在滑块的左侧。

步骤和刻度线

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

外观和交互

滑块由轨迹和拇指组成。轨迹是一个条形图（可选择显示不同样式的刻度线），代表可输入的数值范围。拇指是一个选择器，用户可以通过点击轨迹或在其上来回划动来定位。

滑块的触摸目标较大。为保持触摸的可访问性，滑块的位置应远离显示屏边缘。

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

示例

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

带刻度线的滑块

UWP 和 WinUI 2

重要

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

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

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

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

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

创建滑块

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

打开 WinUI 3 库应用，了解 Slider 的实际应用。

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 控件。

通过

滑块