为TabControl添加ScrollViewer后标签页内容消失问题求助

你自定义的TabControl模板只实现了标签项的滚动，但完全丢掉了默认模板里负责展示选中标签内容的部分——默认TabControl的模板是标签头区域+内容显示区域的组合，你只保留了标签头的ItemsPresenter，自然看不到TabItem里的内容。

修正后的模板需要同时包含标签头的滚动容器，以及显示选中内容的ContentPresenter，示例代码如下：

<TabControl Width="200">
    <TabControl.Styles>
        <Style Selector="TabControl">
            <Setter Property="Template">
                <ControlTemplate>
                    <DockPanel>
                        <!-- 带滚动的标签头区域 -->
                        <ScrollViewer DockPanel.Dock="Top" 
                                      HorizontalScrollBarVisibility="Auto"
                                      VerticalScrollBarVisibility="Disabled">
                            <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}"/>
                        </ScrollViewer>
                        <!-- 选中标签的内容显示区域 -->
                        <ContentPresenter Content="{TemplateBinding SelectedContent}"/>
                    </DockPanel>
                </ControlTemplate>
            </Setter>
        </Style>
    </TabControl.Styles>
            
    <TabItem Header="One">
        <DockPanel>
            <CheckBox Content="First option"/>
            <CheckBox Content="Second option"/>
        </DockPanel>
    </TabItem>

    <TabItem Header="Two"/>
    <TabItem Header="Three"/>
    <TabItem Header="Four"/>
    <TabItem Header="Five"/>
    <TabItem Header="Six"/>
</TabControl>

关键改动点：

• 用DockPanel把标签头和内容区域垂直排列
• 标签头放在顶部，添加ScrollViewer实现横向滚动
• 下方添加ContentPresenter绑定SelectedContent属性，用来展示选中TabItem的内容

这样既保留了标签项的滚动功能，又能正常显示每个标签页里的内容。

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