Indent TabItem in WPF Application

A question arose on my lunchbreak: how do you indent the first TabItem in a TabControl in WPF? Say, to put a logo or button on the same line as the tab headers.

This is a three-minute solution, so it may not be optimal, but…


A couple screens to show that the TabControl works, and that the Button works (see button highlight in third image).



This is a quick and dirty solution. Instead of trying to modify the TabControl template, I created a TabControl with four TabItems. I set the width of the first one to the desired indent size, and then set its Visibility to “Hidden”.

The hidden TabItem left a blank space just large enough for my button. I declared the button lower in the XAML than the TabControl to put it higher in the z-order. I also set the TabControl’s SelectedIndex to “1” to select the first visible TabItem.

All that’s left is for a designer to come along and style it up. The XAML is as follows:

<Window x:Class="HelloWorld.MainWindow"
        Title="MainWindow" Height="350" Width="525">

        <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectedIndex="1">
            <TabItem Width="100" Visibility="Hidden"/>
            <TabItem Header="Hello">
                <TextBlock FontSize="16" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">Grumpy Wizards make toxic brew for the Evil Queen and Jack.</TextBlock>
            <TabItem Header="World">
                        <RadialGradientBrush Center="0.5,0.5">
                            <GradientStop Color="Blue" Offset="0"/>
                            <GradientStop Color="Black" Offset="1"/>
            <TabItem Header="Mars">
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="Red" Offset="1"/>
        <Button Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">Clicky</Button>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s