如何将ScrollBar中的thumb/滑块/滚动框颜色从灰色改为红色？

WPF的ScrollBar默认样式受系统主题约束，要将滑块从默认灰色改为红色，需要自定义它的ControlTemplate来替换默认的Thumb外观。以下是完整的实现代码：

<Window x:Class="YourNamespace.YourWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <!-- 自定义垂直ScrollBar样式 -->
        <Style x:Key="CustomVerticalScrollBarStyle" TargetType="{x:Type ScrollBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid Background="{TemplateBinding Background}">
                            <!-- 轨道 -->
                            <Rectangle x:Name="TrackBackground" Fill="Transparent" Width="10"/>
                            <!-- 滑块 -->
                            <Thumb x:Name="VerticalThumb" 
                                   Background="Red"
                                   BorderBrush="DarkRed"
                                   BorderThickness="1"
                                   Width="10">
                                <Thumb.Style>
                                    <Style TargetType="{x:Type Thumb}">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                    <Rectangle Fill="{TemplateBinding Background}" 
                                                               Stroke="{TemplateBinding BorderBrush}"
                                                               StrokeThickness="{TemplateBinding BorderThickness}"
                                                               RadiusX="2" RadiusY="2"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <!-- 鼠标交互状态样式 -->
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" Value="#FFCC0000"/>
                                            </Trigger>
                                            <Trigger Property="IsDragging" Value="True">
                                                <Setter Property="Background" Value="#FF990000"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Thumb.Style>
                            </Thumb>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="VerticalThumb" Property="Background" Value="#FFAAAAAA"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <!-- 应用自定义样式的ScrollBar -->
    <ScrollBar Width="10" 
               Height="200" 
               AutomationProperties.AutomationId="VerticalScrollBar" 
               Cursor="Arrow" 
               Minimum="0" 
               Background="Pink" 
               ViewportSize="2"
               Style="{StaticResource CustomVerticalScrollBarStyle}"/>
</Window>

关键说明： #

• 核心是通过自定义ControlTemplate，直接修改<Thumb>元素的Background属性为红色，同时添加边框和圆角优化视觉效果。
• 增加了IsMouseOver、IsDragging触发器，实现滑块在交互状态下的颜色变化，提升操作反馈。
• 最后将自定义样式通过Style属性绑定到目标ScrollBar上，覆盖默认样式。

内容的提问来源于stack exchange，提问作者Chaya