#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"/>

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">
                <!-- ... -->



About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #897 – Content on a TabItem Does Not Automatically Wrap

  1. Pingback: Dew Drop – September 3, 2013 (#1,616) | Alvin Ashcraft's Morning Dew

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 )

Connecting to %s

%d bloggers like this: