WPF 应用程序中有两个支持滚动的预定义元素:ScrollBar 和 ScrollViewer。 ScrollViewer 控件封装了水平和垂直 ScrollBar 元素以及一个内容容器(如 Panel 元素),以便在可滚动的区域中显示其他可见元素。 必须生成自定义对象才能使用 ScrollBar 元素实现内容滚动。 不过,可以单独使用 ScrollViewer 元素,因为它是一个封装了 ScrollBar 功能的复合控件。
Thumb 样式
<Style x:Key="ScrollThumbStyle" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Rectangle Width="8" Fill="#4CFFFFFF" RadiusX="2" RadiusY="2">
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ScrollBar 样式
<Style x:Key="ScrollBarStyle" TargetType="ScrollBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid Width="18" Margin="0" x:Name="GridRoot">
<Track Margin="0,2" HorizontalAlignment="Right" Name="PART_Track" Width="14" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}"
Value="{TemplateBinding Value}" IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Template="{StaticResource ScrollBackgroundStyle}" Command="ScrollBar.LineUpCommand" x:Name="IncreaseRepeat" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Template="{StaticResource ScrollBackgroundStyle}" Command="ScrollBar.LineDownCommand" x:Name="DecreaseRepeat" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollThumbStyle}" >
</Thumb>
</Track.Thumb>
</Track>
</Grid>
<!-- 它对 ScrollBar 使用一个模板,并将其旋转为“水平”
它还会更改命令,使其执行“向左”和“向右”命令,而不是执行“向上”和“向下”命令 -->
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<!-- 将 ScrollBar 从“垂直”旋转为“水平” -->
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<!-- Track 在内部绑定到“方向”,因此我们需要将其旋转回“垂直” -->
<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical" />
<!-- 更改命令,以执行“水平”命令 -->
<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat" />
<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ScrollViewer 样式
<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
<Grid Background="{TemplateBinding Background}">
<ScrollContentPresenter Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<ScrollBar x:Name="PART_VerticalScrollBar"
HorizontalAlignment="Right"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Style="{StaticResource ScrollBarStyle}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Style="{StaticResource ScrollBarStyle}"
VerticalAlignment="Bottom"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
效果:
转自:http://Www.CnBlogs.Com/WebEnh/
如果想下次快速找到我,记得点下面的关注哦!
本博客Android APP 下载 |
![]() |
支持我们就给我们点打赏 |
![]() |
支付宝打赏 支付宝扫一扫二维码 |
![]() |
微信打赏 微信扫一扫二维码 |
![]() |
如果想下次快速找到我,记得点下面的关注哦!