WPF自定义ScrollViewer：垂直滚动条较水平滚动条偏粗问题求助

问题原因 #

你的垂直滚动条看起来更粗，核心问题出在ScrollBar模板里的GridRoot硬编码了Width="12"，直接覆盖了你设置的ScrollBar宽度10；而水平滚动条通过触发器设置了Height="12"，旋转后GridRoot的高度刚好匹配这个值，导致垂直滚动条实际显示厚度为12，比你预期的10更宽，视觉上就显得比水平滚动条粗。

解决方案 #

去掉GridRoot的硬编码尺寸，让它自动继承ScrollBar的设置，同时将水平滚动条的高度调整为和垂直滚动条宽度一致，就能让两者厚度统一。

修改后的关键代码如下：

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}" >
    <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
    <Setter Property="Foreground" Value="#404C54" />
    <Setter Property="Background" Value="Transparent" />
    <!-- 统一垂直滚动条宽度 -->
    <Setter Property="Width" Value="10" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}" >
                <!-- 移除GridRoot的硬编码Width，让它自适应ScrollBar尺寸 -->
                <Grid x:Name="GridRoot" Background="{x:Null}">
                    <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True" Focusable="False">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="False"/>
                        </Track.IncreaseRepeatButton>
                        <Track.DecreaseRepeatButton>
                            <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="False"/>
                        </Track.DecreaseRepeatButton>
                    </Track>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger SourceName="Thumb" Property="IsMouseOver" Value="True">
                        <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background"/>
                    </Trigger>
                    <Trigger SourceName="Thumb" Property="IsDragging" Value="True">
                        <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background"/>                                            
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter TargetName="GridRoot" Property="LayoutTransform" >
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="PART_Track" Property="LayoutTransform" >
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Width" Value="Auto"/>
                        <!-- 统一水平滚动条高度和垂直滚动条宽度 -->
                        <Setter Property="Height" Value="10"/>
                        <Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
                        <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
                        <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
                    </Trigger>                                
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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