You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何自定义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

火山引擎 最新活动