如何在图像上添加“地标” WPF 中的滚动条内？

Question

我有一个长滚动查看器，我想在滚动条上用小图像标记重要点。如果单击图像，滚动条将跳转到相应的内容。

我已经在一些应用程序中看到了此功能，例如 Eclipse 和 Chrome 并想知道如何使用 WPF 重现它。

Answer 1

简短的回答是“更改 ScrollBar 的模板”。

长答案是...我将在 ScrollBar 控件的模板中添加一个 ItemsControl 。我会将此 ItemsControl 放在模板顶部，并将其 IsHitTestVisible 设置为 false，以便它不会捕获鼠标事件。

然后我将使用 Canvas 作为 ItemsPanelTemplate 以便能够正确放置这些点。我将使用数据绑定与 ItemsControl 的 ItemsSource 属性和 DataTemplate 以便使用图像呈现每个元素。

这是我使用 Blend 制作的示例。当然它并不完整（例如它不处理鼠标事件），但我希望它将成为您的起点。

_{（来源：japf.fr）}

<ControlTemplate TargetType="{x:Type ScrollBar}">
    <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
            <ColumnDefinition Width="0.00001*"/>
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
        </Grid.ColumnDefinitions>
        <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
        <Track x:Name="PART_Track" Grid.Column="1" d:IsHidden="True">
            <Track.Thumb>
                <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>
            </Track.IncreaseRepeatButton>
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>
            </Track.DecreaseRepeatButton>
        </Track>
        <ItemsControl Grid.Column="1" HorizontalAlignment="Stretch">
            <sys:Double>10</sys:Double>
            <sys:Double>50</sys:Double>
            <sys:Double>100</sys:Double>
            <sys:Double>140</sys:Double>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="Orange" Width="3" Height="16"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding }" />
                </Style>
                                        </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        <RepeatButton Style="{StaticResource ScrollBarButton}" Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow" d:IsHidden="True"/>
    </Grid>
</ControlTemplate>

Answer 2

为 japfs 答案做出贡献：
我解决了调整大小问题的更新：
您可以使用 japfs Style 并将 ItemsSource 应用于 ItemControl：

ItemsSource="{Binding Positions, UpdateSourceTrigger=PropertyChanged}"

只需确保 Positions 为 ObservableCollection 类型，并且在 SizeChanged 事件中重新计算位置。另外，在该事件调用中（您的 ViewModel 应该实现的 INotifyPropertyChanged 接口）

OnPropertyChanged("Positions");

首先尝试使用列表，但没有正确更新。与 ObservableCollection 一起工作得很好。