如何使用UWP标准控件实现微软Photos应用的日期分类滚动条？

问题解答 #

1. 是否为UWP标准控件实现？

这个带日期分类锚点的滚动条不是UWP内置的标准控件，UWP官方原生控件库（包含WinUI 2.x版本的所有内置控件）没有提供开箱即用的该类组件，属于微软Photos应用团队基于基础控件二次封装的自定义组合控件。

2. 同类效果实现方案

你可以按以下步骤基于UWP原生能力实现同款效果：

• 首先实现分组列表基础能力：用CollectionViewSource配合GridView/ListView完成图片数据源的日期分组。先将所有图片资源按拍摄/修改日期按天/月/年维度分组，将CollectionViewSource的IsSourceGrouped属性设为True，绑定分组后的数据源，同时自定义列表的GroupStyle.HeaderTemplate为日期标题样式，完成基础的带日期分组的图片列表布局。
• 自定义滚动条组件：继承原生ScrollBar控件，额外在滚动条侧边新增日期标签渲染层。监听列表内部ScrollViewer的视口滚动事件，根据当前滚动偏移量计算所有日期分组对应的滚动位置比例，将对应日期标签按比例排布在滚动条侧边，同时高亮当前视口内可见分组对应的日期标签。
• 实现锚点跳转逻辑：给侧边所有日期标签绑定点击事件，点击时调用ScrollViewer.ChangeView()方法，直接滚动到对应分组的垂直偏移位置，实现点击日期快速跳转对应分组的效果。
• 交互优化：滚动过程中给当前激活的日期标签添加缩放/高亮过渡动效，滚动停止时如果停在两个分组中间，自动吸附到最近的分组顶部，对齐Photos应用的交互体验。

核心代码参考 #

XAML部分的分组列表配置示例：

<Page.Resources>
    <CollectionViewSource x:Name="PhotoGroupSource" IsSourceGrouped="True" />
</Page.Resources>

<GridView x:Name="PhotoGridView" ItemsSource="{Binding Source={StaticResource PhotoGroupSource}}">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <!-- 分组日期标题，Key为分组的日期值 -->
                    <TextBlock Text="{Binding Key}" FontSize="20" Margin="0,20,0,8" FontWeight="SemiBold"/>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
    <GridView.ItemTemplate>
        <DataTemplate>
            <!-- 图片项模板 -->
            <Image Source="{Binding ImageSource}" Width="150" Height="150" Stretch="UniformToFill"/>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

C#部分的滚动监听逻辑示例：

// 拓展方法从GridView中获取内部的ScrollViewer实例
var scrollViewer = PhotoGridView.FindDescendant<ScrollViewer>();
// 监听滚动视口变化事件
scrollViewer.ViewChanged += (sender, args) => 
{
    // 计算当前可见区域对应的分组，更新自定义滚动条的日期标签高亮与位置
    UpdateCustomScrollbarDateTags(scrollViewer.VerticalOffset);
};

// 点击日期标签跳转逻辑示例
private void OnDateTagClick(DateTime groupDate)
{
    // 获取对应分组的垂直偏移量，执行滚动跳转
    var targetOffset = GetGroupVerticalOffset(groupDate);
    scrollViewer.ChangeView(null, targetOffset, null, false);
}

内容的提问来源于stack exchange，提问作者David