自定义ScrollBar控制ScrollViewer滚动时为何短暂显示后消失？

问题核心 #

使用独立水平ScrollBar绑定ScrollViewer实现自定义滚动控制时，自定义ScrollBar仅短暂显示（淡蓝色背景闪一下）后消失，即使ScrollViewer自带的滚动条处于可见状态。

原因分析 #

最关键的错误是ScrollBar的Maximum绑定错误：

• 原代码绑定了ScrollViewer的ExtentWidth（内容总宽度），但ScrollBar的Maximum应对应ScrollViewer的ScrollableWidth（内容超出视口的宽度，即ExtentWidth - ViewportWidth）。
• 当Maximum设为ExtentWidth时，ScrollBar的Thumb会被压缩到极小（比例为ViewportWidth/(ExtentWidth+ViewportWidth)），若内容宽度远大于视口，Thumb会小到几乎看不见，结合背景色的视觉差，容易误以为整个ScrollBar消失。
• 额外问题：ScrollViewer的HorizontalScrollMode设为Auto可能导致滚动状态不稳定，自带滚动条的显示也会干扰布局。

修正后的代码 #

XAML代码

<StackPanel HorizontalAlignment="Stretch">
    <!-- 自定义水平ScrollBar -->
    <ScrollBar
        x:Name="TestScrollBar"
        HorizontalAlignment="Stretch"
        Orientation="Horizontal"
        Scroll="TestScrollBar_Scroll"
        <!-- 绑定正确的Maximum值：ScrollViewer的可滚动宽度 -->
        Maximum="{Binding ElementName=TestScrollViewer, Path=ScrollableWidth, Mode=OneWay}"
        ViewportSize="{Binding ElementName=TestScrollViewer, Path=ViewportWidth, Mode=OneWay}"
        Visibility="Visible"
        Background="Aqua"
        <!-- 显式设置高度，避免样式导致的高度问题 -->
        Height="20"/>
    <!-- 目标ScrollViewer -->
    <ScrollViewer
        x:Name="TestScrollViewer"
        ViewChanged="TestScrollViewer_ViewChanged"
        HorizontalAlignment="Stretch"
        <!-- 强制启用水平滚动，避免Auto模式的不稳定 -->
        HorizontalScrollMode="Enabled"
        <!-- 隐藏自带滚动条，避免干扰 -->
        HorizontalScrollBarVisibility="Hidden">
        <TextBlock FontSize="144" Text="This is blind text. Ignore this completely. It is only here to fill up the ScrollViewer horizontally."/>
    </ScrollViewer>
</StackPanel>

C#代码（优化版）

private void TestScrollBar_Scroll(object sender, ScrollEventArgs e)
{
    // 同步ScrollViewer的水平偏移
    TestScrollViewer.ChangeView(e.NewValue, null, null);
}

private void TestScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
    // 仅在滚动结束时更新ScrollBar值，减少冗余UI操作
    if (!e.IsIntermediate)
    {
        TestScrollBar.Value = TestScrollViewer.HorizontalOffset;
    }
}

其他注意事项 #

• 显式设置ScrollBar的Height：避免默认样式中水平ScrollBar的高度被压缩到不可见。
• 检查父容器布局：确保StackPanel的父容器有足够的高度，防止ScrollBar被挤出可视区域。
• 双向同步的稳定性：若需要支持ScrollViewer内部滚动（如鼠标滚轮、触摸滑动）同步到自定义ScrollBar，ViewChanged事件的判断逻辑能有效减少性能消耗。

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