Question

I am using a TabControl to programmatically show or hide groups of form controls. I have implemented the technique described here and it approximately works as expected, except that there is a band approximately 1 or 2 pixels high in the location where the tab headers are normally displayed.

I have verified this by using Snoop to navigate the visual tree and observe the movement of the highlight rectangle as each element is selected. The size of the rectangle for the tab content element is fractionally smaller than that of the containing TabControl, which accounts for the extra pixels I am seeing. None of the elements that might affect this have margin, border or padding.

To achieve proper alignment with other controls, I need to eliminate this extra space, but I am not sure how. However, perhaps the question I should be asking is “is there a better way to selectively show / hide groups of controls?”.

Thanks for your ideas,
Tim

Answer 1

I suppose the thin line is caused by the TabPanel which is still there even though all TabItems are collapsed.

However, you could change the TabControl‘s ControlTemplate and bind the TabPanel‘s Visibility to the number of tabs, like this:

<TabPanel ... Visibility="{Binding Items.Count, RelativeSource={RelativeSource FindAncestor, Type={x:Type TabControl}}, Converter={StaticResource ZeroToCollapsedConverter}}" ... />

Of course, you will have to implement a converter which converts 0 to Visibility.Collapsed and all other values to Visibility.Visible.

BTW: You can get the default ControlTemplate for the TabControl here.