Question

Is there a way to place something (a custom UIElement) in place on the right of TabItems’ headers, so that the headers will consider its size.

I feel like there should be a data template for them, but I do not know what to read or how to query google for that.

alt text http://trotsenko.com.ua/files/sample.png

Answer 1

There isn’t an easy way to place content in that location, but there is a way. To do that you’ll have to override the default ControlTemplate for TabControl.

Most system themes put the TabPanel (where the tabs are) and the tab contents in a Grid like so:

<ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local"
                          SnapsToDevicePixels="true"
                          ClipToBounds="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                            <ColumnDefinition x:Name="ColumnDefinition1"
                                              Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="RowDefinition0"
                                           Height="Auto"/>
                            <RowDefinition x:Name="RowDefinition1"
                                           Height="*"/>
                        </Grid.RowDefinitions>
                        <TabPanel x:Name="HeaderPanel"
                                  Panel.ZIndex ="1" 
                                  KeyboardNavigation.TabIndex="1"
                                  Grid.Column="0"
                                  Grid.Row="0"
                                  Margin="2,2,2,0"
                                  IsItemsHost="true"/>

                        <Border x:Name="ContentPanel"
                                BorderThickness="0,0,1,1"
                                BorderBrush="#D0CEBF"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2"
                                Grid.Column="0" Grid.ColumnSpan="2"
                                Grid.Row="1">
...

...

...
                        </Border>
                    </Grid>
...
                </ControlTemplate>

So you could add another ContentControl to the grid and have it bind to a custom Attached Property. Keep in mind that the default ControlTemplates also have a lot of triggers which control overflow handling, amongst other things, and you’d have to make sure that your additional UI Elements don’t interfere with that.

You should be able to get something like this fairly quickly, though, if you don’t have to deal with TabControl orientation or overflow:

Three TabItems with a Red Border and TextBlock http://img35.imageshack.us/img35/3237/tabpanelexample.png

Good luck!