Not visible TabItems if TabControl-Items are located left

Question

I have an application with a TabControl on it. The TabItems for this TabControl are created dynamically while the application is running.

The xaml-code to create the TabControl is:

<TabControl x:Name="tcTabs" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" TabStripPlacement="Left"/>

If I set the TabStripPlacement to Top I can see all TabItems. But in my case, where the TabStripPlacement is set to Left, it may occure that the TabItems are displayed outside the bounds of the application.

Is there an opportunity to get something like a scrollviewer or something else, where I can scroll to not visible TabItems? Or just set the TabItems in two or more columns on the left-border.

Answer 1

Like XAMLeLi already mentioned

you should use ControlTemplate for the TabControl

here is the working example (here is the Original)

<TabControl TabStripPlacement="Left" Height="60">
    <TabControl.Template>
        <ControlTemplate TargetType="TabControl">
            <StackPanel Orientation="Horizontal">
                <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled"  >
                    <TabPanel x:Name="HeaderPanel" Margin="2,2,2,0" IsItemsHost="true" />
                </ScrollViewer>
                <ContentPresenter x:Name="PART_SelectedContentHost"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      Margin="{TemplateBinding Padding}"
                                      ContentSource="SelectedContent"/>
            </StackPanel>
        </ControlTemplate>
    </TabControl.Template>
    <TabItem Header="Visible" >
        <Grid Width="100" Height="100" Background="Blue"/>
    </TabItem>
    <TabItem Header="Visible"/>
    <TabItem Header="Visible"/>
    <TabItem Header="inv" Background="Red">
        <Button Content="blubb"></Button>
    </TabItem>
    <TabItem Header="inv"/>
    <TabItem Header="inv"/>
    <TabItem Header="inv"/>
</TabControl>