Hide the TabControl header

Question

What's the programmatic way (ie not using styles as in this question, but using code) to hide the TabControl header? I'll be glad for a snippet.

score 91 · Answer 1 · edited Mar 04 '13 at 15:22

91

Actually, it's very straight forward to hide the tab strip. You just set each TabItems Visibility to Collapsed. You still see the tab content,...just not the tab header itself.

edited Mar 04 '13 at 15:22

answered Nov 17 '10 at 13:23

EightyOne Unite

11,665
14
79
105

7

Mine too, Do you know why it has this behavior? We were expecting the tab container to disappear completely. – Purplegoldfish Mar 12 '13 at 15:25
This worked for me, too - thanks. I also ended up creating a BooleanToVisibilityCollapsedConverter so that I could data-bind this property to my view-model. – lightw8 Jul 21 '13 at 22:09
This only shows the tab content from the first tab for me. That happens to be what I want, but this odd behavior makes me reluctant to use it in production. Does anyone have an explanation why this works? – Michael Repucci Feb 13 '15 at 21:59
5

This works, but when you try to edit the content inside the TabItem, it won't work. So I find my self removing Visibility="Collapsed", editing the child items, then putting Visibility="Collapsed" back onto the element. Kind of annoying. – EdwardM Nov 03 '15 at 21:45
@edwardm thanks for mentioning! this will prevent a lot of bugs and googling :p. But how to toggle the tabitem visibilty property in codebehind? – ThrowingDwarf May 09 '16 at 08:48
You can also set the height to 0. I prefer this in some cases depending how I want things to display. Also I like to bind the property so I can swap between tabs with ease. – David Bentley Dec 28 '17 at 16:51
Great, and in Sebastian's answer this gets even better. – Bent Tranberg Aug 10 '18 at 12:31

score 49 · Accepted Answer · answered Sep 23 '09 at 16:00

49

Style s = new Style();
s.Setters.Add(new Setter(UIElement.VisibilityProperty, Visibility.Collapsed));
tabControl.ItemContainerStyle = s;

answered Sep 23 '09 at 16:00

Thomas Levesque

286,951
70
623
758

score 20 · Answer 3 · answered Feb 07 '18 at 07:46

20

Simple XAML Style

<TabControl>
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Visibility" Value="Collapsed"/>
        </Style>
    </TabControl.ItemContainerStyle>
    ...
</TabControl>

answered Feb 07 '18 at 07:46

Sebastian

375
3
14

1

Better solution than the upper one when you have a lot of tabs – Keytrap Mar 11 '20 at 13:20

score 9 · Answer 4 · answered Sep 23 '09 at 15:47

Well, there are several ways to do this.

The ugliest way: Use VisualTreeHelper to find TabPanel (or any other Panel you use to host items), and set it's Visibility property to Visibility.Collapsed. Why ugly? It's easy to create few annoying bugs here or break this approach with 'harmless' style update if you was not careful enough...

I prefer using combination of Xaml and code behind. You bind either TabItem's visibility to view model property or TabPanel's visibility to view model property. In both cases you have to override style (either ItemContainer's style or whole TabControl's style). In both cases you have view model. Now, to toggle tab header's visibility, you just update a property in the view model. Here is an example with TabItems:

XAML

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication5"
        Title="Tab Settings"
        Height="300"
        Width="300">
  <Window.Resources>
    <local:TabControlViewModel x:Key="tabVM" />
    <BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" />
  </Window.Resources>
  <Grid>
    <TabControl DataContext="{StaticResource tabVM}">
      <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
          <Setter Property="Visibility"
                  Value="{Binding TabHeaderVisible, Converter={StaticResource booleanToVisibilityConverter}}" />
        </Style>
      </TabControl.ItemContainerStyle>
      <TabItem Header="Tab 1">
        <StackPanel>
          <TextBlock Text="Content" />
          <Button Content="Toggle Header"
                  Click="ToggleHeaderClick" />
        </StackPanel>
      </TabItem>
      <TabItem Header="Tab 2 Header">
        <TextBlock Text="Tab 2 Content" />
      </TabItem>
    </TabControl>
  </Grid>
</Window>

C#

using System.ComponentModel;
using System.Windows;
using System.Windows.Input;

namespace WpfApplication5
{
  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();
    }

    private void ToggleHeaderClick(object sender, RoutedEventArgs e)
    {
      var tabControlVM =
        ((FrameworkElement)sender).DataContext as TabControlViewModel;
      if (tabControlVM != null)
      {
        tabControlVM.TabHeaderVisible = !tabControlVM.TabHeaderVisible;
      }
    }
  }

  public class TabControlViewModel : INotifyPropertyChanged
  {
    private bool _tabHeaderVisible = true;

    public ICommand ToggleHeader
    {
      get; private set;
    }

    public bool TabHeaderVisible
    {
      get { return _tabHeaderVisible; }
      set
      {
        _tabHeaderVisible = value;
        OnPropertyChanged("TabHeaderVisible");
      }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string name)
    {
      var changed = PropertyChanged;
      if (changed != null)
      {
        changed(this, new PropertyChangedEventArgs(name));
      }
    }
  }
}

Wow. I was expecting a line such as `tab.Header.Visible = false` not to a gigantic XML+code behind monster! — Elazar Leibovich, Sep 23 '09 at 16:37
This shows the appropriate way to accomplish this within the MVVM design pattern. While this is not what the question asked for, it is still helpful for those enforcing the pattern throughout their code. — Charlie, Aug 27 '13 at 20:21
useful if you are stritcly MVVM, but in some projects which necessarily use database generated things like a POS, this is not realistic to enforce, especially because there is litle to no XAML. However, any tips for projects like that to keep the code cleaner? — ThrowingDwarf, May 09 '16 at 08:45

score 1 · Answer 5 · answered Feb 14 '18 at 15:56

I've tried this in some code where I populate the tab items manually...

tabItemToAdd.Visibility = Visibility.Collapsed;

...but then I had a weird thing happen where the second time I'd clear out the tab control's items, create the tab item again and use this approach before adding it to the tab control, the entire tab item and its contents were gone, not just the tab header. So I've had success with the programmatic equivalent of this solution:

tabItemToAdd.Template = new ControlTemplate();

score 1 · Answer 6 · answered Oct 28 '19 at 14:38

1

If you use C# and set the x:Name for the TabItem, you can also manipulate the Visibility like so:

tabItemName.Visibility = Visibility.Collapsed;

answered Oct 28 '19 at 14:38

Ronnie

231
2
4

score -3 · Answer 7 · edited Jun 12 '19 at 12:39

-3

private void TabItemControl_MouseEnter(object sender, MouseEventArgs e)
{
    if (this.TabItemControl.IsSelected == false)
    {
        this.TabItemControl.Opacity = 100;
    }
}

private void TabItemControl_MouseLeave(object sender, MouseEventArgs e)
{
    if (this.TabItemControl.IsSelected == false)
    {
        this.TabItemControl.Opacity = 0;
    }
}

private void TabAllControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (this.TabItemControl.IsSelected == false)
    {
        this.TabItemControl.Opacity = 0;
    }
}

edited Jun 12 '19 at 12:39

marsh-wiggle

2,508
3
35
52

answered Apr 14 '15 at 08:03

user3549063

1

2

Please give some background as to why this is the answer – JEV Apr 14 '15 at 08:14
Please only answer if you understand the question. – Munim Munna May 31 '18 at 11:45
While this code may answer the question, it is better to explain how to solve the problem and provide the code as an example or reference. Code-only answers can be confusing and lack context. – Robert Columbia May 31 '18 at 12:16

Hide the TabControl header

7 Answers7

Linked