Adding ScrollViewer on TabControl hides contents

[TangDave]

I can add scrolling over the tab items of a TabControl using information from this post: #11896

However, a rather unfortunate side-effect is that the contents of the tab items disappear (in my sample xaml below, tab item 'One' should display 2 checkboxes but doesn't).

Here is simplified xaml which demonstrates the problem:

<TabControl Width="200">
	
	<!-- this allows scrolling through the tab items, but hides the tab item contents! --> 
	<TabControl.Styles>
		<Style Selector="TabControl">
			<Setter Property="Template">
				<ControlTemplate>
					<ScrollViewer HorizontalScrollBarVisibility="Auto">
						<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}"/>
					</ScrollViewer>
				</ControlTemplate>
			</Setter>
		</Style>
	</TabControl.Styles>
			
	<TabItem Header="One">
		<DockPanel>
			<!-- these are only visible if I remove the 'TabControl.Styles' section -->
			<CheckBox Content="First option"/>
			<CheckBox Content="Second option"/>
		</DockPanel>
	</TabItem>

	<TabItem Header="Two">
	</TabItem>

	<TabItem Header="Three">
	</TabItem>

	<TabItem Header="Four">
	</TabItem>

	<TabItem Header="Five">
	</TabItem>

	<TabItem Header="Six">
	</TabItem>
</TabControl>

[timunie]

        <TabControl.Styles>
            <Style Selector="TabControl">
                <Setter Property="Template">
                    <ControlTemplate>
                        <DockPanel>
                            <ScrollViewer AllowAutoHide="False"
                                          DockPanel.Dock="Top"
                                          HorizontalScrollBarVisibility="Auto">
                                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
                            </ScrollViewer>
                            <ContentPresenter Content="{TemplateBinding SelectedContent}" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter>
            </Style>
        </TabControl.Styles>

[timunie]

This is not yet final, but the idea should be clear.

[TangDave]

Perfect - works great! Thanks for your help.

[TangDave]

For anyone using this, you might want to add Margin="0,0,0,22" for the TabItems so that the scrollbar isn't crowding the tab headers too much.