WPF FAQ - TabControl

How do I dynamically hide and unhide tabs in a TabControl ?

The TabItems have a Visibility property which can be set to Collapsed (no space will be reserved for this tab) or Hidden (not rendered, but space will be reserved for this tab).

[XAML]
 
        <TabControl x:Name='tabControl1'>
            <TabItem Header='Tab1'></TabItem>
            <TabItem Header='Tab2' Visibility='Hidden'></TabItem>
            <TabItem Header='Tab3' Visibility='Collapsed'></TabItem>
            <TabItem Header='Tab4'></TabItem>
        </TabControl>
Permalink
How do I get a X in my tabs to allow the user to close certain tabs, as in IE?

This Code Project article provides you such an implementation:

An Extended WPF TabControl

Permalink
How can I add a style to a TabItem that is used in the TabControl ?

Here is a custom style that changes the look and feel of the tabs (TabItems) in the corresponding window.

[XAML]

<Style TargetType='TabItem'>
  <Setter Property='BorderThickness' Value='3'/>
  <Setter Property='BorderBrush' Value='Red'/>
  <Setter Property='Background' Value='LightBlue'/>
  <Setter Property='VerticalContentAlignment' Value='Center'/>
  <Setter Property='HorizontalContentAlignment' Value='Center'/>
  <Setter Property='Template'>
    <Setter.Value>
      <ControlTemplate TargetType='{x:Type TabItem}'>
        <Border>
          <Grid>
            <Grid>
              <Border CornerRadius='3,3,0,0' Background='{TemplateBinding Background}' 
                   BorderBrush='{TemplateBinding BorderBrush}' 
                   BorderThickness='{TemplateBinding BorderThickness}'/>
            </Grid>
            <Border BorderThickness='{TemplateBinding BorderThickness}' 
                 Padding='{TemplateBinding Padding}'>
              <ContentPresenter ContentSource='Header' 
                 HorizontalAlignment='{TemplateBinding HorizontalContentAlignment}' 
                 VerticalAlignment='{TemplateBinding VerticalContentAlignment}'/>
            </Border>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

This is how the tabs look with the above style applied on them:

Permalink
How do I make the tabs in a TabControl appear on the bottom instead of on top?

Set the ‘TabStripPlacement’ enum property to ‘Bottom’. The possible enum values of this property are Left, Top, Right and Bottom.

Permalink
How do I validate the current tab before selection changes to another tab on user click?

Unfortunately, WPF doesn’t provide a straight forward way of validating a tab page’s content before switching to a new tab, in the first version. One workaround is to listen to the TabItem’s PreviewLostKeyboardFocus event and mark it as Handled as shown below.

[C#]
        public TabValidation()
        {
            InitializeComponent();

            foreach (TabItem item in tabControl1.Items)
            {
                item.PreviewLostKeyboardFocus += new KeyboardFocusChangedEventHandler(item_PreviewLostKeyboardFocus);
            }
        }

        void item_PreviewLostKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
        {
            // sender is the TabItem.
            if (this.ValidateTab() == false)
                e.Handled = true;
        }
Permalink