#897 – Content on a TabItem Does Not Automatically Wrap

The individual tabs on a TabControl are each represented by a TabItem.  TabItem is a content control, which means that it contains a single element.  That element is typically a panel, which in turn contains child controls.

If the element that you set for the content of a TabItem is too wide to be completely displayed within the TabControl, it will not automatically wrap.  Below, a horizontally-oriented StackPanel is placed on the first tab and the content does not fit.

    <TabControl Margin="10">
        <TabItem Header="Emperors">
            <StackPanel Orientation="Horizontal">
                <Image Source="Augustus.jpg" Height="100" Margin="5"/>
                <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
                <Image Source="Caligula.jpeg" Height="100" Margin="5"/>
                <Image Source="Claudius.jpg" Height="100" Margin="5"/>
                <Image Source="Nero.jpg" Height="100" Margin="5"/>
            </StackPanel>
        </TabItem>
    </TabControl>

If you want content on the tab to wrap, you need to use a panel that knows how to wrap its own content (e.g. a WrapPanel).

    <TabControl Margin="10">
        <TabItem Header="Emperors">
            <WrapPanel Orientation="Horizontal">
                <!-- ... -->