Wednesday, June 05, 2013

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

Inline image 2

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



QR: Inline image 1