如何在WPF中的滾動條內放置圖像「placemarkers」？

我有一個長的滾動查看器，我想用滾動條上的小圖像來標記重要的點。如果圖像被點擊，滾動條將跳轉到相應的內容。如何在WPF中的滾動條內放置圖像「placemarkers」？

我已經在Eclipse和Chrome等幾個應用程序中看到過這個功能，並想知道如何用WPF重現它。

來源

2010-01-22 JohnMcCon

簡短回答是「更改ScrollBar的模板」。

長答案是...我會在ScrollBar控件的模板中添加一個ItemsControl。我將這個ItemsControl放置在模板的頂部，將其IsHitTestVisible設置爲false，以便它不捕獲鼠標事件。

然後，我會使用Canvas作爲ItemsPanelTemplate，以便能夠正確放置點。我將使用ItemsControl的ItemsSource屬性和DataTemplate的數據綁定爲了呈現每個元素與圖像。

這是我使用Blend的一個示例。當然，它並不完整（例如，它不處理鼠標事件），但我希望它會成爲您的起點。

alt text http://www.japf.fr/download/scrollbars.png

<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>

來源

2010-01-22 13:32:41 japf

您是如何解決調整滾動條大小的問題的？標記仍處於相同位置，但窗口具有另一個大小，因此標記位置錯誤。不知道如何解決這個問題。 – 2017-03-14 15:04:04

嗯，在這種情況下，我想你可能需要繼承ScrollBar類以便能夠處理SizeChanged事件（或類似的我沒有確切的名字）來重新計算標記的位置。 – japf 2017-03-15 16:01:04

爲了促進japfs回答：我解決了在調整大小問題的更新：您可以使用japfs樣式和應用的ItemsSource到ItemControl：

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

只是要確定位置的類型是ObservableCollection，並且位置將在SizeChanged事件中重新計算。此外，在這種情況下調用（INotifyPropertyChanged接口應您的視圖模型實現）

OnPropertyChanged("Positions");

用List試了一下第一，但沒有正確更新。使用ObservableCollection就好了。

來源

2017-04-21 16:41:15 Michael

如何在WPF中的滾動條內放置圖像「placemarkers」？

回答

相關問題