#901 – Scrolling Content within a TabControl

You can scroll content within a given tab of a TabControl by placing the content of each tab into a ScrollViewer.  In the example below, the first tab contains a ScrollViewer, which in turns contains a Grid containing the tab’s content.

    <TabControl Margin="10">
        <TabItem Header="Romans">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Image Source="Augustus.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Text="Augustus"/>

                    <Image Grid.Column="1" Source="Tiberius.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="Tiberius"/>

                    <Image Grid.Column="2" Source="Caligula.jpeg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="2" Text="Caligula"/>

                    <Image Grid.Column="3" Source="Claudius.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="3" Text="Claudius"/>

                    <Image Grid.Column="4" Source="Nero.jpg" Height="60" Margin="5"/>
                    <TextBlock Grid.Row="1" Grid.Column="4" Text="Nero"/>
                </Grid>
            </ScrollViewer>
        </TabItem>
        <TabItem Header="Greeks">
        </TabItem>
    </TabControl>

901-001

#900 – Changing the Font Used in a TabControl

There are a couple of different ways to change the font used within a TabControl.

You can set font properties on the TabControl itself.  These properties will apply to the fonts used for all controls within the tab control, either on the tab headers, or within the content of a particular tab.

<TabControl Margin="10" FontSize="18">

900-001
If you set a font property on a TabItem, that property will apply to both the header and content for just that single tab.
900-002

If you want to change font properties just for text used in the header portion of the tab, you can specify the Header as a TextBlock and then set the font properties on that TextBlock.

    <TabControl Margin="10">
        <TabItem>
            <TabItem.Header>
                <TextBlock Text="Augustus" FontSize="18"/>
            </TabItem.Header>

900-003

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

899-001

#898 – Setting the Text that Appears on a TabItem

Each tab within a TabControl is represented by an instance of a TabItem.  If you want some text to be displayed on the clickable portion of a tab, you can specify the text that should appear by setting the Header property of the TabItem.

    <TabControl Margin="10" >
        <TabItem Header="Augustus">
            <StackPanel Orientation="Horizontal">
                <Image Source="Augustus.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Augustus" VerticalAlignment="Center"/>
            </StackPanel>
        </TabItem>
        <TabItem Header="Tiberius">
            <StackPanel Orientation="Horizontal">
                <Image Source="Tiberius.jpg" Height="100" Margin="5"/>
                <TextBlock Text="Tiberius" VerticalAlignment="Center"/>
            </StackPanel>
        </TabItem>
    </TabControl>

898-001

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

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

897-002

#896 – A TabControl Groups Content into a Series of Pages

You can use a TabControl to organize content in your application into a series of pages, allowing the user to click on the page that contains the content that they want to see.

The TabControl contains a series of TabItem elements representing each tab.  Each TabItem has a Header property defining text or content to appear on the clickable part of the tab.  Each TabItem also has a single child element, representing the content to be displayed when you are viewing the tab.  This will normally be a panel that contains other controls.

    <TabControl Margin="10">
        <TabItem Header="You">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Label Content="Name:"/>
                <TextBox Grid.Column="1" Width="120" Margin="5"
                         HorizontalAlignment="Left"/>
                <Label Grid.Row="1" Content="Age:"/>
                <TextBox Grid.Row="1" Grid.Column="1" Width="80" Margin="5"
                         HorizontalAlignment="Left"/>
            </Grid>
        </TabItem>

        <TabItem Header="Zappa">
            <StackPanel>
                <Image Source="Zappa.jpg" Height="80" Margin="5"/>
                <Label Content="Composer and musician"
                       HorizontalAlignment="Center"/>
            </StackPanel>
        </TabItem>
    </TabControl>

896-001
896-002

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

834-001
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>

834-002