如何定义带页码提示的滚动条 [英] How can I define a scrollbar with page number tip
本文介绍了如何定义带页码提示的滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要的滚动条就是这样 - >
http://www.songpengjie.cn/wp-content/uploads/2014/08/Pic.jpg [<一个href =http://www.songpengjie.cn/wp-content/uploads/2014/08/Pic.jpgtarget =_ blanktitle =新窗口> ^ ]
我已经定义了一个ListView来显示一些项目。我实际上想要显示在视口中显示的第一项的名称。
谢谢。
The scrollbar I want is like this ->
http://www.songpengjie.cn/wp-content/uploads/2014/08/Pic.jpg[^]
I have defined a ListView to show some items. I actually want to show the name of first item which shown in viewport in the tip.
Thank you.
推荐答案
只是为了让你继续前行：
这个例子只有当物品的高度相同时才有效。
如果没有，你必须列出一个所有Y位置并从该列表中获取文本。
Just to get you on your way:
This example works only when the items have the same height.
If not, you have to make a list of all Y positions and get the text from that list.
<Window x:Class="WpfApplicationtest2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" SizeChanged="Window_SizeChanged">
<Grid>
<Canvas>
<Border Name="BorderPageNumber" BorderBrush="Black" removed="#66454545">
<TextBlock Name="TextBoxTest" FontSize="22" Width="150" Height="30">Test</TextBlock>
</Border>
</Canvas>
<ScrollViewer Name="ScrollviewerTest" Loaded="ScrollviewerTest_Loaded" ScrollChanged="ScrollviewerTest_ScrollChanged">
<StackPanel Name="StackPanelScrollItems" Orientation="Vertical">
<TextBlock Margin="10,10,0,50" FontSize="22">Test 1</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 2</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 3</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 4</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 5</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 6</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 7</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 8</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 9</TextBlock>
<TextBlock Margin="10,10,0,50" FontSize="22">Test 10</TextBlock>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
List<point> ContentPositions = new List<point>();
private string GetItemText(int index)
{
return ((TextBlock)StackPanelScrollItems.Children[index]).Text;
}
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
ScrollviewerTest.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
((TextBlock)StackPanelScrollItems.Children[0]).Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
SetInfoPosition();
}
private void SetInfoPosition()
{
BorderPageNumber.Margin = new Thickness(ScrollviewerTest.ActualWidth - 160, (ScrollviewerTest.ViewportHeight / 2.0) - 30, 0, 0);
}
private void ScrollviewerTest_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
int pageNumber = e.VerticalOffset==0 ? 1 : ((int)(e.VerticalOffset / e.ViewportHeight) + 1);
int itemIndex = e.VerticalOffset == 0 ? 1 : (int)(e.VerticalOffset / (((TextBlock)StackPanelScrollItems.Children[0]).DesiredSize.Height)) + 1;
TextBoxTest.Text = pageNumber.ToString() + " " + GetItemText(itemIndex);
}
private void ScrollviewerTest_Loaded(object sender, RoutedEventArgs e)
{
SetInfoPosition();
}
}
</point></point>
谢谢，Jan Bakker！我自己解决了这个问题。以下是我的代码：
Thanks, Jan Bakker! I have solved this myself. The below is my code:
<style x:key="ScrollBarThumb" targettype="{x:Type Thumb}" mode="hold" xmlns:x="#unknown" /> <Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Right">
<Rectangle x:Name="thumb" Fill="CornflowerBlue" RadiusX="0" RadiusY="0" Width="10"/>
<Popup x:Name="popup" PopupAnimation="Fade" Placement="Left" PlacementTarget="{Binding ElementName=thumb}" AllowsTransparency="True" HorizontalOffset="-16">
<Grid>
<Rectangle Fill="DodgerBlue" RadiusX="5" RadiusY="5" Opacity="0.5" Margin="0,0,6,0">
</Rectangle>
<Path Data="M16,10L22,13 16,16" VerticalAlignment="Top" HorizontalAlignment="Right" Fill="DodgerBlue" Opacity="0.5"></Path>
<TextBlock x:Name="tooltip" Padding="10,5,16,5" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
<Grid.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="2" Color="Black"/>
</Grid.Effect>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="popup" Property="IsOpen" Value="True"/>
<Setter TargetName="thumb" Property="Fill" Value="DodgerBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
private void AdjustPositionOfThunbTip(Thumb myThumb)
{
var ThumbTemplate = myThumb.Template;
Popup popup = (Popup)ThumbTemplate.FindName("popup", myThumb);
TextBlock tooltip = (TextBlock)ThumbTemplate.FindName("tooltip", myThumb);
double VerticalOffset = (myThumb.ActualHeight - tooltip.FontSize - tooltip.Padding.Top - tooltip.Padding.Bottom) / 2;
popup.VerticalOffset = VerticalOffset;
double HorizontalOffset = popup.HorizontalOffset;
popup.HorizontalOffset = HorizontalOffset + 0.0000001;
popup.HorizontalOffset = HorizontalOffset;
ScrollViewer sv = FindVisualAncestor<scrollviewer>(myThumb);
if (sv.CanContentScroll == true)
{
VirtualizingStackPanel panel = FindVisualChild<virtualizingstackpanel>(this.AccountsView);
if (this.AccountsView.Items.Count > 0 && panel != null)
{
int index =
(panel.Orientation == Orientation.Horizontal) ? (int)panel.HorizontalOffset : (int)panel.VerticalOffset;
var item = this.AccountsView.Items[index];
Account acc = item as Account;
tooltip.Text = acc.Name;
}
}
else
{
HitTestResult hitTest = VisualTreeHelper.HitTest(this.AccountsView, new Point(5, 5));
int index = GetFirstVisibleIndexFromListbox(this.AccountsView);
var item = this.AccountsView.Items[index];
Account acc = item as Account;
tooltip.Text = acc.Name;
}
}
这篇关于如何定义带页码提示的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
