共享相同滚动条的 DockPanel 元素？答案

【问题标题】：Elements of a DockPanel that share the same scrollbar?共享相同滚动条的 DockPanel 元素？
【发布时间】：2026-01-10 01:45:02
【问题描述】：

这是我的代码：

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <DockPanel>
           <TreeView x:Name="tView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>

           <TreeView Name="pluginsView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>
      </DockPanel>
</ScrollViewer>

我必须定义 2 个 TreeView。在相同的“区域”中（意思是相同的 [Row, Column]）所以我不得不使用面板。我使用了 StackPanel，但显示不是我想要的。我使用了 ScrollViewer，以便当 2 个 TreeViews 垂直不适合“区域”的空间时，我可以获得一个通用滚动条。

我遇到的问题是水平的。当我的 2 个 TreeView 中的 1 个太“大”时，我会出现一个滚动条，但仅适用于太大的 TreeView，因此当我滚动时，只有一个 TreeView 水平移动。我想要的是，当我滚动时，我的两个 TreeView 都会水平移动。

不知道够不够清楚，不明白可以上传截图！

我也试过这段代码，但它也不起作用：

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <Grid Grid.Row="2">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
           </Grid.RowDefinitions>
           <TreeView Grid.Row="0" x:Name="tView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>

           <TreeView Grid.Row="1" Name="pluginsView" DockPanel.Dock="Top" VerticalAlignment="Stretch">
               [...]
           </TreeView>
      </DockPanel>
</ScrollViewer>

但我遇到了完全相同的问题.. :(

【问题讨论】：

标签： wpf xaml scrollview dockpanel

【解决方案1】：

听起来好像是使用 TreeView 的内部 ScrollViewer 滚动内容，而不是外部 ScrollViewer。

这通常是因为ScrollViewer 中的内容在某种程度上受到了大小限制，因此请确保您没有以任何方式限制TreeView 或其父面板的大小。这包括将垂直/水平对齐设置为拉伸。

这是一个可以在两个方向上平滑滚动的示例。我有点惊讶我必须在<ScrollViewer> 标签中设置HorizontalScrollBarVisibility 才能显示水平滚动条。

<Border BorderBrush="Black" BorderThickness="2" Height="100" Width="100">
    <ScrollViewer CanContentScroll="True"
                  HorizontalScrollBarVisibility="Auto"  
                  VerticalScrollBarVisibility="Auto">
        <DockPanel>
            <Rectangle Height="75" Width="150" Fill="Red" DockPanel.Dock="Top" />
            <Rectangle Height="75" Width="150" Fill="Blue" />
        </DockPanel>
    </ScrollViewer>
</Border>

【讨论】：

我使用的是 StackPanel，但问题是使用 StackPanel，垂直滚动条很粗暴（不平滑）。它只给了我一个可以显示第一个或第二个 TreeView 的 2 个位置滚动条
@GuillaumeCogranne 然后尝试将 DockPanel 或 Grid 包装在 StackPanel 中。它应该给你两全其美:)
我想我只是尝试了所有可能的包装，要么我没有任何滚动条，要么我得到了“错误”滚动条，每个 TreeView 仅水平独立:(
@GuillaumeCogranne 我明白你在使用 StackPanel 时跳动的 ScrollBar 是什么意思。我将示例更新为可在测试环境中使用的示例，因此只需对其进行调整以使用您的控件即可。

【解决方案2】：

尝试禁用树木的水平ScrollViewer。这样包装ScrollViewer 将需要打开。

XAML：

<ScrollViewer Grid.Row="2" CanContentScroll="True">
      <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="*" />
               <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <TreeView Grid.Row="0" x:Name="tView" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
               [...]
           </TreeView>

           <TreeView Grid.Row="1" Name="pluginsView" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
               [...]
           </TreeView>
      </Grid>
</ScrollViewer>

【讨论】：

当我将区域缩小到一个极点时，您的代码不会出现滚动条:(它隐藏了出现的错误滚动条（这是一件非常好的事情）而且我没有最后的任何滚动条:(

【解决方案3】：

经过数小时的测试，这对我有用：

 <ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto">
     <DockPanel ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <TreeView x:Name="tView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                [...]
            </TreeView>

            <TreeView Name="pluginsView" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                [...]
            </TreeView>
      </DockPanel>
  </ScrollViewer>

为此，您必须禁用 TreeViews 和 Grid 的可见性，并且您必须在 ScrollViewer 上使用 HorizontalScrollBarVisibility="Auto"！

【讨论】：