Come mettere l'immagine "segnaposto" all'interno di una barra di scorrimento in WPF?

Question

Ho un Visualizzatore diapositive lungo e voglio contrassegnare punti importanti con piccole immagini sulla barra di scorrimento. Se si fa clic sull'immagine, la barra di scorrimento salterà al contenuto corrispondente.

Ho visto questa funzionalità in alcune applicazioni come Eclipse e Chrome e mi chiedevo come riprodurlo con WPF.

Answer 1

Risposta breve è "modificare il modello della barra di scorrimento".

La risposta lunga è ... che aggiungerei un oggetto ItemControl nel modello del controllo ScrollBar. Vorrei mettere questo ItemsControl in cima al modello con il suo IsHitTestVisible impostato su false in modo che non catturasse gli eventi del mouse.

Quindi vorrei utilizzare una tela come ItemsPanelTemplate per poter posizionare correttamente i punti. Userei il databinding con la proprietà ItemsSource di ItemsControl e un DataTemplate per rendere ogni elemento con un'immagine.

Ecco un esempio che ho utilizzato con Blend. Ovviamente non è completo (per esempio non gestisce l'evento del mouse), ma spero che sarà un punto di partenza per te.

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> 

Answer 2

Per contribuire a japfs RISPOSTA: Ho risolto l'aggiornamento sul tema di ridimensionamento: È possibile utilizzare japfs Stile e applicare un'ItemsSource alla ItemControl:

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

Basta fare sure Positions è di tipo ObservableCollection e le posizioni vengono ricalcolate in SizeChanged-event. Inoltre, nel caso in quella chiamata (interfaccia INotifyPropertyChanged che dovrebbe tuo ViewModel implementare)

OnPropertyChanged("Positions"); 

provato con un primo elenco, ma che non ha aggiornato correttamente. Ha funzionato correttamente con ObservableCollection.