如何自定义WPF ScrollViewer样式并修改其背景与控件颜色?
解决ScrollViewer自定义ScrollBar样式颜色不生效的问题
嘿,我帮你看了下你写的ScrollBar样式代码,问题其实挺明显的——你把按钮和Track的IsEnabled绑定到了IsMouseOver,这就导致只有鼠标悬停上去的时候,控件才会处于激活状态,默认状态下是禁用的,所以你设置的颜色自然就不显示啦!另外,你的RepeatButton和Thumb都没设置默认的样式,所以会 fallback 到系统自带的灰色样式。
我给你调整了代码,解决这些问题:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="{x:Type ScrollBar}"> <!--Touchscreen & Pen--> <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> <Setter Property="Stylus.IsFlicksEnabled" Value="false"/> <!--Width--> <Setter Property="Width" Value="10"/> <Setter Property="MinWidth" Value="{Binding Width, RelativeSource={RelativeSource Mode=Self}}"/> <!-- 新增:设置默认前景色,统一控制箭头颜色 --> <Setter Property="Foreground" Value="#666666"/> <!-- 新增:设置默认背景色 --> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}"> <Grid.RowDefinitions> <!--Top Button--> <RowDefinition MaxHeight="10"/> <!--Fill--> <RowDefinition Height="0.00001*"/> <!--Bottom Button--> <RowDefinition MaxHeight="10"/> </Grid.RowDefinitions> <!-- 移除IsEnabled绑定,默认启用;添加Background和Template确保样式生效 --> <RepeatButton x:Name="PART_LineUpButton" Command="{x:Static ScrollBar.LineUpCommand}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}"> <RepeatButton.Template> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid Background="{TemplateBinding Background}"> <Path x:Name="ArrowTop" Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" /> </Grid> </ControlTemplate> </RepeatButton.Template> </RepeatButton> <!-- 移除Track的IsEnabled绑定 --> <Track x:Name="PART_Track" IsDirectionReversed="true" Grid.Row="1"> <Track.DecreaseRepeatButton> <!-- 给PageUp按钮设置默认样式,避免用系统灰色 --> <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <!-- 给PageDown按钮设置默认样式 --> <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <!-- 给Thumb添加自定义样式,设置背景色 --> <Thumb> <Thumb.Style> <Style TargetType="{x:Type Thumb}"> <Setter Property="Background" Value="#999999"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Thumb}"> <Rectangle Fill="{TemplateBinding Background}" RadiusX="2" RadiusY="2"/> </ControlTemplate> </Setter.Value> </Setter> <!-- 可选:添加hover状态的样式 --> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#666666"/> </Trigger> </Style.Triggers> </Style> </Thumb.Style> </Thumb> </Track.Thumb> </Track> <!-- 移除IsEnabled绑定,添加样式 --> <RepeatButton x:Name="PART_LineDownButton" Command="{x:Static ScrollBar.LineDownCommand}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Grid.Row="2"> <RepeatButton.Template> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Grid Background="{TemplateBinding Background}"> <Path x:Name="ArrowBottom" Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" /> </Grid> </ControlTemplate> </RepeatButton.Template> </RepeatButton> </Grid> <!-- 可选:添加ScrollBar的hover触发器,统一改变前景色 --> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="#333333"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
关键修改点说明:
- 移除了所有
IsEnabled="{TemplateBinding IsMouseOver}"绑定:这是核心问题,默认状态下控件就会启用,颜色自然会显示。 - 给RepeatButton添加了自定义Template:避免使用系统默认的禁用/启用样式,确保你的箭头颜色始终生效。
- 给Thumb添加了完整的Style:设置了默认背景色,还添加了鼠标悬停的状态变化,让滚动块视觉效果更清晰。
- 统一使用
Foreground绑定箭头颜色:方便后续统一调整,不用逐个修改Path的Fill属性。
这样修改后,你的ScrollBar默认状态下就能显示你设置的颜色,鼠标悬停时也能有相应的状态变化啦!
内容的提问来源于stack exchange,提问作者Riley Varga




