Question

How do I set the TabItem.Header to bindings taken from few fields, each binding shown in a different size, all in the place of the original header text; without overriding the default style and behavior of the header – I only need the text.

I tried to set its template but then it creates a rectangle that contains the inner controls, and this rectangle is not responsive for user clicks, and also have the control-style, I want this controls to be invisible, only its text should be visible.

I’ve tried the following:

<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
         <DataTemplate>
             <TabItem>
                 <TabItem.Header>
                     <MultiBinding StringFormat="{}{0}-{1}">
                         <Binding Path="Title"/>
                         <Binding Path="Category.Title"/>
                     </MultiBinding>
                 </TabItem.Header>
                 <TabItem.Content>
                     <TextBlock>
                         Here is what is gonna be in the TabItem - not header
                     </TextBlock>
                 </TabItem.Content>
             </TabItem>
         </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

But it doesn’t show anything.

I’ve also tried to set the HeaderTemplate to a DataTemplate but what happens is, the DataTemplate overrides the TabItem style and when I click the text it doesn’t go to the clicked tab, besides, the unselected tabs look very funny, I see the rectangle of the text floating, while I want it to be transparent.

So, to summarize up my question, I want to set TabItem.Header.Text to a MultiBinding with StringFormat.

Answer 1

The TabControl contains a ContentTemplate property as well as the ItemTemplate that it inherits from ItemsControl. It uses the ContentTemplate to differentiate what is showing in the Content area while the ItemTemplate which defines the template for the Header. Additionally, each Item from your ItemSource will automatically be wrapped in a TabItem; it doesn’t need to be re-created in the ItemTemplate, as that will attempt to place a TabItem inside the Header as you are noticing.

Instead of re-creating a TabItem inside the ItemTemplate, use the ItemTemplate to define your Header content, and the ContentTemplate to define your Content.

<TabControl ItemsSource="{Binding}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0}--{1}">
                        <Binding Path="Title" />
                        <Binding Path="Category.Title" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding MyContent}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

In your first paragraph you mentioned wanting to set different sizes on the bound portions of the Header. If you do want to do that, you won’t be able to use a single Binding or MultiBinding to set the Text as is done above. Instead you can nest TextBlocks to achieve this with different formatting for each.

<TabControl.ItemTemplate>
    <DataTemplate>
        <TextBlock>
            <TextBlock Text="{Binding Title}"
                       FontSize="12" />
            <Run Text="--" />
            <TextBlock Text="{Binding Category.Title}"
                       FontSize="10" />
        </TextBlock>
    </DataTemplate>
</TabControl.ItemTemplate>