WPF中重写ScrollViewer与TextBox后滚动条滑块不随文本大小移动

Hey there, let's figure out why your scrollbar thumbs aren't moving with the text after customizing the TextBox and ScrollViewer templates! This issue almost always comes down to missing critical bindings or template conventions in your custom styles. Here's a breakdown of the key fixes:

1. Ensure Your ScrollViewer Template Has Correct Bindings #

Your custom ScrollViewer template must link the scrollbar thumbs to the control's built-in scroll properties. Without these bindings, the scrollbar has no way to know how far the content extends or where to position the thumb.

Add these bindings to your ScrollBar elements inside the ScrollViewer template:

<!-- Horizontal ScrollBar Example -->
<ScrollBar x:Name="PART_HorizontalScrollBar"
           Orientation="Horizontal"
           Maximum="{TemplateBinding ScrollableWidth}"
           Value="{TemplateBinding HorizontalOffset}"
           ViewportSize="{TemplateBinding ViewportWidth}"
           Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

<!-- Vertical ScrollBar Example -->
<ScrollBar x:Name="PART_VerticalScrollBar"
           Orientation="Vertical"
           Maximum="{TemplateBinding ScrollableHeight}"
           Value="{TemplateBinding VerticalOffset}"
           ViewportSize="{TemplateBinding ViewportHeight}"
           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

These bindings tie the scrollbar's range, thumb position, and visibility directly to the ScrollViewer's content dimensions.

2. Use the Required Naming Convention in Your TextBox Template #

WPF expects a specific name for the ScrollViewer inside a TextBox template: PART_ContentHost. If you use a different name, the TextBox won't automatically inject its text content into the ScrollViewer, breaking scroll functionality.

Also, set CanContentScroll="False" to ensure the scrollbar calculates position based on pixel size (critical for text content):

<Style TargetType="{x:Type TextBox}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <!-- Add other setters as needed -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                    <!-- Critical: Use the PART_ContentHost name -->
                    <ScrollViewer x:Name="PART_ContentHost"
                                  CanContentScroll="False"
                                  VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
                                  HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"/>
                </Border>
                <!-- Add other template elements (like focus visuals) here -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

3. Double-Check for Hardcoded Sizes or Disabled Scroll Behavior #

• Make sure you haven't hardcoded a fixed Height or Width on the ScrollViewer or TextBox—this can prevent content from expanding and triggering scrollbar updates.
• Verify that you haven't removed or broken the ScrollChanged event handling that WPF uses to update scrollbar positions.

Quick Troubleshooting Step #

To isolate the issue, temporarily revert to the default ScrollViewer template and test if the TextBox scrolls correctly. If it works, the problem is definitely in your custom ScrollViewer template. Then reintroduce your custom styles piece by piece to find the exact line causing the break.

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