#834 – Displaying Custom Content on a TabControl’s Tabs

When you use a TabControl in your application, each tab is represented by a TabItem.  The content of the TabItem is a single container and items placed within this container show up in the body of the TabControl when that tab is clicked.

When you set the Header property of a TabItem to some text, that text will be drawn on the tab.

    <TabControl Margin="5" >
        <TabItem Header="His">
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem Header="Hers">
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>

Because TabItem.Header is of type object, you can set the Header to anything that you like.  (E.g. a panel containing multiple items).

    <TabControl Margin="5" >
        <TabItem>
            <TabItem.Header>
                <Image Source="His.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="His stuff goes here"/>
            </StackPanel>
        </TabItem>

        <TabItem>
            <TabItem.Header>
                <Image Source="Hers.png" Height="50"/>
            </TabItem.Header>
            <StackPanel>
                <Label Content="Her stuff goes here"/>
            </StackPanel>
        </TabItem>
    </TabControl>