TabControl: all TabItems collapsed, but content of 1st TabItem still visible

Question

I've got a rather strange behavior on a TabControl, whose TabItems are all collapsed: The content of the first TabItem is still visible (but the header is not).

The TabControl and its TabItems are setup like this:

<TabControl>
    <TabItem Header="Data 1"
             Visibility="{Binding Path=DataTable1.HasRows, 
                                  Converter={StaticResource BoolToVisibility}}">
        <UI:ShowData DataContext="{Binding Path=DataTable1}"/>
    </TabItem>
    <TabItem Header="Data 2"
             Visibility="{Binding Path=DataTable2.HasRows, 
                                  Converter={StaticResource BoolToVisibility}}">
        <UI:ShowData DataContext="{Binding Path=DataTable2}"/>
    </TabItem>
</TabControl>

If none of the data tables contains any rows, none of the TabItems should be shown. (I known that I could hide the whole TabControl in that case, but that's not the point here.)

Actually the content of the tab item "Header 1" will be displayed despite the TabItem being collapsed! The TabItem's header itself is collapsed, the TabItems border which contains its content and the content itself are displayed.

Edit/Add: This can easily be reproduced using this code (note using Collapsed or Hidden does not make any difference:

<TabControl>
    <TabItem Header="Test 1" Visibility="Hidden">
        <Label>Test1</Label>
    </TabItem>

    <TabItem Header="Test 2" Visibility="Hidden">
        <Label>Test2</Label>
    </TabItem>
</TabControl>

So what's wrong here? Any help/hints are appreciated!

Answer 1

Ok, so you've found a real problem here... I looked around online and found several posts that relate to this. Some say that this is a bug, while others say that it is the designed behaviour. don't know which, although it certainly seems to be more of a bug than a feature.

Either way, you want to know how to deal with the problem. .. there are several solutions. One is just to set the TabItem.Content to null whenever you want to hide the tab and another is another involves adding an empty TabItem and selecting that item before hiding (so that it's empty content is shown).

You can attach a handler to the TabItem.IsVisibleChanged Event to be notified when the Visibility property has been changed:

public void TabItemIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    // Hide TabItem.Content here
}

Here are some links to the relevant posts:

Bug in TabControl/TabItem`s content visibility?
WPF TabControl - Select different tab when TabItem Visibility changes
Is there a workaround for this tabcontrol/tabitem bug

Answer 2

Another solution that I prefer over the ones suggested: Bind the visibility of the TabItem and its content to the same property (using the BooleanToVisibilityConverter). Here's a simple example:

<UserControl.Resources >
    <BooleanToVisibilityConverter x:Key="boolToVis"/>
</UserControl.Resources>
<Grid>
    <TabControl>
        <TabItem Header="TabItem 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
            <Label Content="Content 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
        </TabItem>
        <TabItem Header="TabItem 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
            <Label Content="Content 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
        </TabItem>
    </TabControl>
</Grid>

Answer 3

Could be a WPF bug, anyway bypass by binding the content visibility to the tab item visibility.

    <TabControl>
        <TabItem x:Name="_test1Tab" Header="Test 1" Visibility="Hidden">
            <Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test1</Label>
        </TabItem>

        <TabItem x:Name="_test2Tab" Header="Test 2" Visibility="Hidden">
            <Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test2</Label>
        </TabItem>
    </TabControl>

Answer 4

My solution to this was to put the TabItem I wanted to hide in another position. The problem happens only if you want to collapse only the first TabItem.