11

スクロールビューアが長いので、重要な場所をスクロールバーの小さな画像でマークしたいと思います。画像をクリックすると、スクロールバーが対応するコンテンツにジャンプします。

この機能は、EclipseやChromeなどのいくつかのアプリケーションで見たことがあり、WPFでどのように再現するのか疑問に思っていました。

4

2 に答える 2

12

簡単な答えは「ScrollBarのテンプレートを変更する」です。

長い答えは...ScrollBarコントロールのテンプレートにItemsControlを追加するということです。このItemsControlをテンプレートの上に置き、IsHitTestVisibleをfalseに設定して、マウスイベントをキャプチャしないようにします。

次に、スポットを適切に配置できるようにするために、ItemsPanelTemplateとしてCanvasを使用します。各要素を画像でレンダリングするために、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>
于 2010-01-22T13:32:41.670 に答える
1

japfsの回答に貢献するには：サイズ変更の問題に関する更新を解決しました：japfs Styleを使用して、ItemsSourceをItemControlに適用できます。

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

PositionsのタイプがObservableCollectionであり、SizeChanged-eventで位置が再計算されていることを確認してください。さらに、そのイベント呼び出し（ViewModelが実装する必要があるINotifyPropertyChangedインターフェイス）

OnPropertyChanged("Positions");

最初にリストで試してみましたが、正しく更新されませんでした。ObservableCollectionで問題なく動作しました。

于 2017-04-21T16:41:15.280 に答える