我有一个长滚动查看器,我想在滚动条上用小图像标记重要点。如果单击图像,滚动条将跳转到相应的内容。
我在一些应用程序(例如 Eclipse 和Chrome http://www.usabilitypost.com/2008/09/19/using-the-scrollbar-to-display-information/并想知道如何使用 WPF 重现它。
简短的回答是“更改 ScrollBar 的模板”。
长答案是...我将在 ScrollBar 控件的模板中添加一个 ItemsControl 。我会将此 ItemsControl 放在模板顶部,并将其 IsHitTestVisible 设置为 false,以便它不会捕获鼠标事件。
然后我将使用 Canvas 作为 ItemsPanelTemplate 以便能够正确放置这些点。我将使用数据绑定与 ItemsControl 的 ItemsSource 属性和 DataTemplate 以便使用图像呈现每个元素。
这是我使用 Blend 制作的示例。当然它并不完整(例如它不处理鼠标事件),但我希望它将成为您的起点。
(source: japf.fr 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)