自定义 ScrollViewer 的滚动条样式,如下图所示:
ScrollBar 在滚动时会自动显示并隐藏,而且 ScrollBar 存在于 Viewport 的区域中。
ScrollViewer.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
Value="true"/>
Value="false"/>
Fill="#90000000"
RadiusX="3"
RadiusY="3"/>
Value="true"/>
Value="Transparent"/>
Value="false"/>
Value="false"/>
Value="0"/>
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
Value="true"/>
Value="Transparent"/>
Value="false"/>
Value="false"/>
Value="0"/>
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
Value="false"/>
Value="false"/>
Value="Transparent"/>
Value="0,1,1,6"/>
Value="5"/>
Value="5"/>
Value="0"/>
IsEnabled="{TemplateBinding IsMouseOver}"
IsDirectionReversed="true">
Style="{StaticResource VerticalScrollBarPageButton}"
Command="{x:Static ScrollBar.PageUpCommand}"/>
Style="{StaticResource VerticalScrollBarPageButton}"
Command="{x:Static ScrollBar.PageDownCommand}"/>
Value="Horizontal">
Value="Transparent"/>
Value="1,0,6,1"/>
Value="5"/>
Value="5"/>
Value="Auto"/>
Value="0"/>
IsEnabled="{TemplateBinding IsMouseOver}">
Command="{x:Static ScrollBar.PageLeftCommand}"/>
Command="{x:Static ScrollBar.PageRightCommand}"/>
Value="LightGray"/>
Value="0"/>
Value="Left"/>
Value="Auto"/>
Value="Top"/>
Value="Auto"/>
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
HorizontalAlignment="Right"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Style="{StaticResource for_scrollbar}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{TemplateBinding VerticalOffset}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Style="{StaticResource for_scrollbar}"
VerticalAlignment="Bottom"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"
BeginTime="0:0:1"/>
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"
BeginTime="0:0:1"/>
SourceName="PART_VerticalScrollBar">
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
SourceName="PART_VerticalScrollBar">
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"/>
SourceName="PART_HorizontalScrollBar">
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1"/>
SourceName="PART_HorizontalScrollBar">
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:1"/>
MainWindow.xaml
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300">
这个滚动样式同样可以应用到其他控件,例如: ItemsControl,有兴趣的朋友可以试试!