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…

tab-demo-1

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

tab-demo-2

tab-demo-3
tab-demo-4

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <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>
            <TabItem Header="World">
                <Rectangle>
                    <Rectangle.Fill>
                        <RadialGradientBrush Center="0.5,0.5">
                            <GradientStop Color="Blue" Offset="0"/>
                            <GradientStop Color="Black" Offset="1"/>
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </TabItem>
            <TabItem Header="Mars">
                <Rectangle>
                    <Rectangle.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="Red" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </TabItem>
        </TabControl>
        <Button Width="100" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">Clicky</Button>
    </Grid>
</Window>
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s