Jak umieścić obraz "oznaczenia miejsc" wewnątrz paska przewijania w WPF?

Question

Mam długą przeglądarkę przewijania i chcę zaznaczyć ważne miejsca małymi obrazkami na pasku przewijania. Jeśli obraz zostanie kliknięty, pasek przewijania przeskoczy do odpowiedniej treści.

Widziałem tę funkcjonalność w kilku aplikacjach, takich jak Eclipse i Chrome i zastanawiałem się, jak odtworzyć go za pomocą WPF.

Answer 1

Krótka odpowiedź to "zmień szablon paska przewijania".

Długa odpowiedź brzmi ... Że dodaję ItemsControl do szablonu kontrolki ScrollBar. Postawiłbym ItemsControl na górze szablonu z jego zestawem IsHitTestVisible na false, aby nie przechwytywał zdarzeń myszy.

Następnie używałbym płótna jako elementu ItemsPanelTemplate, aby móc prawidłowo umieszczać plamy. Użyłabym funkcji wiązania danych z właściwością ItemsSource obiektów ItemsControl i DataTemplate w celu renderowania każdego elementu za pomocą obrazu.

Oto próbka, którą zrobiłem używając Blend. Oczywiście nie jest kompletny (na przykład nie obsługuje zdarzenia myszy), ale mam nadzieję, że będzie to dla ciebie punkt wyjścia.

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

Aby przyczynić się do japfs odpowiedzieć: Rozwiązałem aktualizację o numerze zmiany rozmiaru: Można użyć japfs stylu i zastosować ItemsSource do ItemControl:

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

Tylko sure Pozycje są typu ObservableCollection, a pozycje są ponownie obliczane w wydarzeniu SizeChanged. Dodatkowo w tym połączenia konferencyjnego (interfejs INotifyPropertyChanged które powinny realizować swoją ViewModel)

OnPropertyChanged("Positions"); 

Próbowaliśmy go z listy pierwszej, ale nie aktualizuje poprawnie. Pracowałem z ObservableCollection w porządku.