带有自定义刻度的滑块（标签和速度）

Posted 2023-03-25

【中文标题】带有自定义刻度的滑块（标签和速度）

【英文标题】：Slider with custom ticks (labels and pace)

【发布时间】：2019-04-11 20:21:20

【问题描述】：

我正在尝试在 UWP 应用程序中创建一个自定义 Slider，它的外观和功能应该有点像 Windows 10 内置 照片 应用程序中的滚动条：

此屏幕截图中存在两个主要功能，但我找不到自己实现的方法：

滑块/滚动条中同一范围内的所有位置都应具有相同的工具提示值。在屏幕截图示例中，您可以看到滑块特定范围内（两个刻度之间）的所有照片都显示相同的工具提示，即该月的名称。

刻度之间的间隔并不总是相同的。在截图示例中，他们依赖于每个月拍摄的照片数量，相对于照片的总量。

我发现在 WPF 中，为滑块 (see here) 上的刻度设置自定义值非常简单直接，但在 UWP 中这些属性似乎消失了。此外，在the official docs 中找不到任何关于它的信息。我确实注意到有一个名为 TickBar 的 UWP 控件，但找不到任何示例以了解它是否与我的问题相关。

我是否遗漏了什么，或者如果不制作我自己的完全自定义的 UI 控件，是否真的无法实现这样的用户体验？

【问题讨论】：

@uwe-keim 为什么要从标题中删除 UWP？这是问题的一个重要部分，我只是从标签上还不够清楚。

Questions should not include tags in the title.

【参考方案1】：

这不是一个滑块控件。如果要进行这样的控件，则必须进行大量自定义。您可能需要制作一个 UserControl。此 UserControl 需要一些基本的 UWP 控件以使其看起来像 MS Photos 应用程序。

例如，你可能需要一个自定义的ItemsControl（StaggeredPanel看起来很相似）来管理页面中图片的布局，并自定义ScrollBar，使用两个ItemsControl在右侧显示年/月。当指针在 ScrollBar 上移动时，您还需要一些标签来显示文本，标签可能是 TextBlock 控件等。您还可能需要一些 animations。

无论如何，要做出这样的控件，需要大量的基础知识和大量的定制。这很复杂。您可以在WPDev UserVoice 上提交功能请求。

【讨论】：

感谢您的详细回答。当然，我可以进行自己的定制，这可能会变得很复杂，我只是想看看是否有现有的 UI 控件或其他方式来解决这个问题，无论是否官方 :)