如何在UWP Syncfusion PdfViewer中显示缩略图视图

前置要求 #

• 项目已安装Syncfusion.PdfViewer.UWP NuGet包，SfPdfViewer控件已完成基础集成，可正常加载PDF文档。
• 页面XAML头部已引入控件命名空间：

  xmlns:syncfusion="using:Syncfusion.Windows.PdfViewer"
  

布局实现（和PowerPoint交互逻辑一致） #

用Grid分栏布局，左侧放置专属缩略图控件PdfThumbnailView，右侧放置主PDF查看器，通过绑定关联两个控件即可自动生成缩略图、支持点击跳转页面，无需手动编写页面跳转逻辑。
完整XAML示例：

<Grid>
    <Grid.ColumnDefinitions>
        <!-- 左侧缩略图栏宽度，可按需调整，200px和PPT默认缩略栏宽度接近 -->
        <ColumnDefinition x:Name="ThumbnailColumn" Width="200"/>
        <!-- 右侧主视图占剩余所有宽度 -->
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- 左侧缩略图控件 -->
    <syncfusion:PdfThumbnailView 
        x:Name="PdfThumbnailControl" 
        Grid.Column="0"
        PdfViewer="{Binding ElementName=MainPdfViewer}"
        Background="#F3F3F3"/>

    <!-- 右侧主PDF查看器 -->
    <syncfusion:SfPdfViewer 
        x:Name="MainPdfViewer" 
        Grid.Column="1"/>
</Grid>

后台代码关联（可选，非必须） #

如果不想用XAML绑定，也可以在后台加载完PDF后手动关联两个控件，示例：

// 页面加载后加载目标PDF文件
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    // 示例为加载应用Assets目录下的示例PDF，替换为你的文件路径即可
    StorageFile pdfFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/sample.pdf"));
    await MainPdfViewer.LoadDocumentAsync(pdfFile);

    // 关联缩略图控件和PDF查看器实例
    PdfThumbnailControl.PdfViewer = MainPdfViewer;
}

常用自定义配置项 #

• 调整缩略图尺寸：修改PdfThumbnailControl的ThumbnailWidth、ThumbnailHeight属性，默认值为100140，设置为150210可获得更清晰的缩略图效果
• 缩略图栏折叠/展开：给左侧ThumbnailColumn的Width属性做显隐切换，设为0即可隐藏缩略图栏，设为固定值即可展开，可配合顶部按钮实现和PPT一致的缩略图开关功能
• 修改选中页高亮样式：通过SelectedThumbnailBorderBrush设置选中边框颜色，SelectedThumbnailBorderThickness设置边框粗细
• 注意：如果使用18.x以前的旧版Syncfusion控件，关联控件后需要手动调用PdfThumbnailControl.Refresh()方法触发缩略图生成，新版本无需额外操作。

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