<!--滚动两边按钮样式-->
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Foreground" Value="Green"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Width" Value="auto"></Setter>
<Setter Property="Height" Value="auto"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<TextBlock x:Name="FIcon" FontSize="12" Text="123456789" Margin="1"></TextBlock>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" TargetName="FIcon"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red" TargetName="FIcon"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.5" TargetName="FIcon"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--滚动条滑块两边按钮样式-->
<Style x:Key="ScrollBarTrackButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent"></Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--滚动条滑块样式-->
<ControlTemplate x:Key="ThumbTemplate" TargetType="Thumb">
<Grid>
<Border x:Name="Bg" CornerRadius="2" Margin="2" SnapsToDevicePixels="True" Background="#DBDBDB"></Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" TargetName="Bg"></Setter>
<Setter Property="Background" Value="Gray" TargetName="Bg"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#A5A5A5" TargetName="Bg"></Setter>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Setter Property="Background" Value="#6F6F6F" TargetName="Bg"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--水平滚滚动条模板-->
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid x:Name="HorizontalRoot" Height="{TemplateBinding Height}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--内部背景-->
<Border x:Name="BgInner" Grid.Column="1" Margin="0" SnapsToDevicePixels="True" Opacity="0.3" CornerRadius="6" Background="Black"/>
<!--中间滑动区域-->
<Track x:Name="PART_Track" IsDirectionReversed="False" Grid.Column="1">
<!--左滑块-->
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageLeftCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Template="{StaticResource ThumbTemplate}" />
</Track.Thumb>
<!--右滑块-->
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageRightCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--垂直滚滚动条模板-->
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid x:Name="VerticalRoot" Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--内部背景-->
<Border x:Name="BgInner" Grid.Row="1" Margin="0" CornerRadius="6" SnapsToDevicePixels ="True" Opacity="0.3" Background="Transparent"/>
<!--中间滑动区域-->
<Track x:Name="PART_Track" IsDirectionReversed="true" Grid.Row="1">
<!--上滑块-->
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageUpCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
</Track.DecreaseRepeatButton>
<!--中间滑块-->
<Track.Thumb>
<Thumb Template="{StaticResource ThumbTemplate}" MinHeight="10"/>
</Track.Thumb>
<!--下滑块-->
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageDownCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--ScrollBar样式-->
<Style x:Key="DefaultScrollBar" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
<Setter Property="Height" Value="10" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
<Setter Property="Width" Value="10" />
</Trigger>
</Style.Triggers>
</Style>
<!--ScrollViewer样式-->
<Style x:Key="DefaultScrollViewer" TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar">
<EasingDoubleKeyFrame KeyTime="0:0:.2" Value=".8"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar">
<EasingDoubleKeyFrame KeyTime="0:0:.2" Value=".8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar">
<EasingDoubleKeyFrame KeyTime="0:0:.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar">
<EasingDoubleKeyFrame KeyTime="0:0:.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="leftColumn" />
<!--<ColumnDefinition Width="Auto" x:Name="rightColumn" />-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<!--<RowDefinition Height="Auto" />-->
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="0" Grid.Column="0" />
<!--垂直滚动条 -->
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" ViewportSize="{TemplateBinding ViewportHeight}" Opacity="0" HorizontalAlignment="Right" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<!--水平底部滚动条-->
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Opacity="0" VerticalAlignment="Bottom" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ScrollBar" BasedOn="{StaticResource DefaultScrollBar}"/>
<Style TargetType="ScrollViewer" BasedOn="{StaticResource DefaultScrollViewer}"/>
参考:
WPF ControlBase