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.

You'd have to change the ControlTemplate for the TabControl. Is it something that you're comfortable with? — XAMeLi
@Tomtom Its not that hard to do. Here's an example of a TabControl template from MSDN: msdn.microsoft.com/en-us/library/ms754137.aspx (I'm not sure if it's the exact one used, but it should be close). Just copy it and edit it so the TabItems are drawn within your boundaries — Rachel

WiiMaxx WiiMaxx · Accepted Answer · 2013-04-29T12:49:20

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>

Not visible TabItems if TabControl-Items are located left

1 Answers