如何为TreeView内HierarchicalDataTemplate子项添加ScrollViewer滚动功能

对应原型效果为每个树节点内容溢出时，节点自身触发滚动条，而非整树统一滚动。

核心实现逻辑 #

实现效果需要解决三个WPF布局底层的固有问题：

• TreeView默认模板内置全局ScrollViewer，会优先触发整树滚动，必须先移除该全局容器，避免和单节点滚动逻辑冲突
• ScrollViewer在无明确尺寸上限的布局中，会被内容无限撑开，永远无法触发滚动条，必须为每个嵌入的ScrollViewer设置可计算的尺寸约束
• TreeView的嵌套层级会随缩进不断向右延伸内容区，需要统一调整TreeViewItem的对齐规则，为ScrollViewer提供稳定的宽度计算基准

分步实现代码 #

1. 移除TreeView内置全局滚动容器 #

重写TreeView的ControlTemplate，删除默认自带的ScrollViewer组件：

<TreeView x:Name="test" 
          ItemsSource="{Binding Root}">
    <TreeView.Style>
        <Style TargetType="TreeView">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeView">
                        <Border 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <!-- 仅保留内容展示区，不再嵌套全局ScrollViewer -->
                            <ItemsPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TreeView.Style>

2. 统一调整TreeViewItem布局规则 #

设置所有节点的内容区随父级宽度拉伸，避免嵌套导致的内容无限延伸：

<TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Padding" Value="6,3" />
        </Style>
    </TreeView.ItemContainerStyle>

3. 在各层级模板嵌入独立ScrollViewer #

在对应层级的DataTemplate中包裹展示内容，为ScrollViewer设置滚动条规则与尺寸约束，修正原代码中Image控件Visibility属性的枚举值错误：

<TreeView.ItemTemplate>
        <HierarchicalDataTemplate 
            ItemsSource="{Binding TestTemplates}"
            DataType="{x:Type vm1:TestTemplateViewModel}">
            <!-- 顶层节点独立滚动区域 -->
            <ScrollViewer 
                HorizontalScrollBarVisibility="Auto"
                VerticalScrollBarVisibility="Auto"
                MaxWidth="420">
                <Grid>
                    <DockPanel>
                        <TextBlock Text="{Binding TextBlock}" />
                        <Image 
                            Source="/Images/Test.png"
                            Visibility="Visible" />
                    </DockPanel>
                </Grid>
            </ScrollViewer>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <!-- 内层子节点独立滚动区域 -->
                    <ScrollViewer 
                        HorizontalScrollBarVisibility="Auto"
                        VerticalScrollBarVisibility="Auto"
                        MaxWidth="380">
                        <TextBlock Text="{Binding Header}" />
                    </ScrollViewer>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

关键注意点 #

• 嵌入的ScrollViewer必须设置明确的尺寸上限（固定值、绑定父容器ActualWidth的表达式均可），如果使用默认的Auto尺寸，ScrollViewer会随内容无限拉伸，完全不会触发滚动逻辑
• 若需要适配窗口大小自适应，可以将ScrollViewer的MaxWidth替换为绑定父容器ActualWidth的表达式，实现随窗口尺寸动态调整滚动边界
• 多层嵌套场景下，可根据TreeViewItem的层级缩进值自动计算当前节点内容区的可用宽度，避免出现内容宽度溢出的问题
• 如果需要保留整树的纵向滚动能力，可以在TreeView的外层父容器嵌套一个ScrollViewer，仅开启纵向滚动，这样既不影响单节点的横向独立滚动，也能处理整树高度溢出的场景

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