WPF垂直滚动条与文本而非文本框宽度对齐的问题咨询

我太懂你遇到的这个糟心问题了——当TextBox显示一堆短行文本时，垂直滚动条居然跟着文本偏左，不是乖乖贴在TextBox右侧，确实破坏UI的规整性。之前你嵌套ScrollViewer的思路踩坑，是因为TextBox本身就内置了一个叫PART_ContentHost的ScrollViewer控件，两层ScrollViewer叠加直接导致滚动条布局混乱了。

问题根源 #

默认的WPF TextBox模板里，内部的PART_ContentHost ScrollViewer的HorizontalAlignment属性是Left，这就意味着当文本内容的宽度小于TextBox本身宽度时，ScrollViewer会自动收缩到内容的宽度，滚动条自然就跟着文本左移了。

解决方案：修改TextBox模板，强制ScrollViewer铺满宽度 #

我们只需要自定义一个TextBox样式，把内部ScrollViewer的HorizontalAlignment改成Stretch，让它始终占满TextBox的整个宽度，这样滚动条就会牢牢固定在右侧了。

步骤1：定义自定义TextBox样式

在你的资源字典或者Window/UserControl的Resources中添加这个样式：

<Style x:Key="AlignedScrollTextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        SnapsToDevicePixels="True">
                    <!-- 关键修改：设置HorizontalAlignment="Stretch"让ScrollViewer铺满宽度 -->
                    <ScrollViewer x:Name="PART_ContentHost" 
                                  Focusable="false" 
                                  HorizontalAlignment="Stretch"
                                  HorizontalScrollBarVisibility="Hidden" 
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

步骤2：将样式应用到你的TextBox

把原来的TextBox引用这个样式就行：

<Label Grid.Row="0" Content="{StaticResource NominationInfo_OperatorRemarks}" Style="{StaticResource UnderlineLabel}" />
<TextBox Width="500" Grid.Row="1" HorizontalAlignment="Left" MaxLines="5" IsReadOnly="True" 
         Text="{Binding OperatorRemarks, Mode=OneWay}" TextWrapping="Wrap" 
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Style="{StaticResource AlignedScrollTextBoxStyle}">
</TextBox>
<Label Grid.Row="2" Content="{StaticResource NominationInfo_LoadingInstructions}" Style="{StaticResource UnderlineLabel}" />
<TextBox Grid.Row="3" MaxLines="5" IsReadOnly="True" ScrollViewer.VerticalScrollBarVisibility="Auto" 
         Text="{Binding OperatorInstructions, Mode=OneWay}" TextWrapping="Wrap" Width="500" HorizontalAlignment="Left"
         Style="{StaticResource AlignedScrollTextBoxStyle}" />

这样修改后，不管文本是短行备注还是长段落，垂直滚动条都会稳稳贴在TextBox右侧，完美适配你的UI布局需求。

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