C# WPF：如何使嵌套垂直ScrollViewer始终可见并同步水平滚动

我来帮你解决这个WPF布局的问题——你的需求是让垂直滚动条始终可见，同时让顶部的文本块（Control1，最多2行）和下方的列表（Control2）同步水平滚动，仅列表保留垂直滚动功能对吧？我们来一步步调整你的布局：

先分析现有代码的核心问题 #

你当前把内层垂直ScrollViewer嵌套在外层水平ScrollViewer的DockPanel里，当外层触发水平滚动时，内层的垂直滚动条会跟着内容一起被移出视野，这就是滚动条“消失”的根本原因；另外嵌套的ScrollViewer结构容易导致滚动事件冲突，硬编码的Height也限制了滚动条的触发条件。

解决方案代码 #

我们通过拆分布局结构，把水平滚动区域和垂直滚动条区域分离，同时让两个控件共享水平滚动逻辑：

<Grid>
    <GroupBox Header="MyHeader" HorizontalAlignment="Stretch" Margin="5,5,5,0" VerticalAlignment="Stretch">
        <Grid Margin="5">
            <!-- 外层Grid：一列放内容区，一列固定放垂直滚动条 -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- 水平滚动容器：包裹Control1和Control2的可视区域，实现同步水平滚动 -->
            <ScrollViewer Grid.Column="0" 
                          HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Disabled">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/> <!-- Control1自动适应高度（最多2行） -->
                        <RowDefinition Height="100"/> <!-- Control2固定高度 -->
                    </Grid.RowDefinitions>

                    <!-- Control1：顶部文本块，限制最多2行，禁止换行触发水平滚动 -->
                    <TextBlock Grid.Row="0" 
                               Text="{Binding Ruler}" 
                               Margin="6,0,0,0" 
                               FontFamily="Courier New"
                               MaxLines="2"
                               TextWrapping="NoWrap"/>

                    <!-- Control2的可视内容：依赖外层水平滚动，自身不处理水平滚动 -->
                    <Border Grid.Row="1" 
                            BorderThickness="0.5" 
                            BorderBrush="Black"
                            Margin="0,0,18,0"> <!-- 留出右侧滚动条的宽度，避免内容被遮挡 -->
                        <ItemsControl ItemsSource="{Binding PreviewRawList}"
                                      FontFamily="Courier New">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <TextBox Text="{Binding Path=.}" 
                                             FontFamily="Courier New"
                                             TextWrapping="NoWrap"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Border>
                </Grid>
            </ScrollViewer>

            <!-- 固定在右侧的垂直滚动条：绑定到隐藏的滚动逻辑容器 -->
            <ScrollBar Grid.Column="1"
                       Orientation="Vertical"
                       Maximum="{Binding ElementName=innerScrollContainer, Path=ScrollableHeight}"
                       Value="{Binding ElementName=innerScrollContainer, Path=VerticalOffset, Mode=TwoWay}"
                       ViewportSize="{Binding ElementName=innerScrollContainer, Path=ViewportHeight}"/>

            <!-- 隐藏的垂直滚动逻辑容器：只处理Control2的垂直滚动，不显示自身滚动条 -->
            <ScrollViewer x:Name="innerScrollContainer"
                          Grid.Column="0"
                          HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollBarVisibility="Hidden"
                          Height="100">
                <ItemsControl ItemsSource="{Binding PreviewRawList}"
                              FontFamily="Courier New">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBox Text="{Binding Path=.}" 
                                     FontFamily="Courier New"
                                     TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </GroupBox>
</Grid>

关键逻辑说明 #

1. 垂直滚动条始终可见：把垂直滚动条单独放在Grid的第二列，通过绑定到隐藏的innerScrollContainer的滚动属性，不管水平怎么滚动，滚动条都固定在右侧视野内。
2. 同步水平滚动：Control1和Control2的可视内容都放在同一个外层水平ScrollViewer里，水平滚动时两者会同步移动。
3. Control2的垂直滚动：用隐藏的innerScrollContainer处理垂直滚动逻辑，它的滚动功能通过右侧固定的ScrollBar暴露出来，既保留垂直滚动能力，又不会被水平滚动影响位置。
4. 避免内容遮挡：给Control2的可视区域设置了右侧Margin，留出滚动条的宽度，防止文本被滚动条挡住。

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