¿Cómo poner "placemarkers" de imagen dentro de una barra de desplazamiento en WPF?

Question

Tengo un visor de desplazamiento largo y quiero marcar puntos importantes con imágenes pequeñas en la barra de desplazamiento. Si se hace clic en la imagen, la barra de desplazamiento saltará al contenido correspondiente.

He visto esta funcionalidad en algunas aplicaciones como Eclipse y Chrome y me preguntaba cómo reproducirla con WPF.

Answer 1

La respuesta breve es "cambiar la plantilla de ScrollBar".

La respuesta larga es ... Que agregaría un ItemsControl en la plantilla del control ScrollBar. Pondría este ItemsControl en la parte superior de la plantilla con su IsHitTestVisible configurado en falso para que no capture los eventos del mouse.

Luego utilizaría un lienzo como ItemsPanelTemplate para poder colocar las manchas correctamente. Utilizaría el enlace de datos con la propiedad ItemsSource de ItemsControl y una DataTemplate para representar cada elemento con una imagen.

Aquí hay una muestra que hice usando Blend. Por supuesto, no está completo (no maneja el evento del mouse por ejemplo), pero espero que sea un punto de partida para ti.

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

Para contribuir a japfs respuesta: Solucioné la actualización en cuestión de cambio de tamaño: Puede utilizar japfs Estilo y aplicar una ItemsSource a la ItemControl:

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

Sólo asegúrese sure Positions es del tipo ObservableCollection y las posiciones se vuelven a calcular en SizeChanged-event. Además, en caso de que la llamada (interfaz INotifyPropertyChanged la que debe poner en práctica su modelo de vista)

OnPropertyChanged("Positions"); 

probado con una lista de principio, pero que no se actualizaba correctamente. Trabajé con ObservableCollection bien.