#899 – Displaying Multiple Controls on a TabControl’s Tabs

You can display simple text on the clickable tabs of a TabControl by setting the Header property of each TabItem to some text.  You can also set the Header to any single control, for example an Image control.

If you want to display something more complex than either some text or a single control, you can set the Header property to contain a layout panel that in turn contains other controls.

    <TabControl Margin="10">
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Augustus.jpg" Height="60" Margin="5"/>
                    <TextBlock Text="Augustus" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Augustus stuff goes here.." Margin="10"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Tiberius.jpg" Height="60" Margin="5"/>
                    <TextBlock Text="Tiberius" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Tiberius stuff goes here.." Margin="10"/>
        </TabItem>
        <TabItem>
            <TabItem.Header>
                <StackPanel>
                    <Image Source="Caligula.jpeg" Height="60" Margin="5"/>
                    <TextBlock Text="Caligula" HorizontalAlignment="Center"/>
                </StackPanel>
            </TabItem.Header>
            <TextBlock Text="Caligula stuff goes here.." Margin="10"/>
        </TabItem>
    </TabControl>