Question

I have a heavily templated TabControl – similar in design to the Scrollable Tab Control found here. Like the linked tutorial, I have a “menu” button on the far right that displays a list of all the tabs in the TabControl. By selecting one of the menu items, you can immediately jump to that tab.

The MenuItem style is set up thusly (assuming we’re bound to a collection of TabItems):

<Style x:Key="TabMenuItem" TargetType="{x:Type MenuItem}">
    <!-- This will help us bind to the Header of a TabItem -->
    <Setter Property="Header" Value="{Binding Path=Header}" />
    <Setter Property="IsEnabled" Value="{Binding Path=IsEnabled}" />
    <Setter Property="IsCheckable" Value="{Binding Path=IsEnabled}" />
    <Setter Property="IsChecked" Value="{Binding Path=IsSelected}" />
</Style>

And the items are bound within the TabControl template like this:

<MenuItem ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}, Path=Items}"
          ItemContainerStyle="{StaticResource TabMenuItem}" />

This works fine when the TabControl is populated by normal TabItems. It ceases to work if the TabItems are the result of a DataTemplate, when my TabControl is bound to a list of ViewModels. My ViewModels don’t contain those properties that my menu item refers to – only the resulting Template TabItem does.

So my ultimate question is; is there some syntax that allows me to bind to the collection of Templates (TabItems), rather than the collection of base ViewModel items?

Answer 1

You need to convert the binding source collection to tab items, thus the items collection will be tab items. There’s a pretty good example of a converter in the accepted answer for How bind TabControl?