Bind to the Template of each item in an ItemsSource collection

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?

create an interface with those properties which each ViewModel implements — Jake Berger
Unfortunately there is no property which returns tab containers so you have to implement the properties related to the menu item in your view models. — vortexwolf
@jberger - I'll have to do that, I suppose. I was also hoping to allow - in the future - a single tab to exist in multiple Tab controls at once, which would cause conflicts with the "IsSelected" property; as soon as I set it to true, it will be selected in ALL tab controls instead of just the one I want. The solution, then, appears to be that I must wrap each viewmodel in another generic "TabItemViewModel" which exposes those common TabItem-related properties. Then I can keep a single instance of my core ViewModel wrapped in multiple instances of my wrapper TabItem view models. — BTownTKD
@BTownTKD: there are ways to work around the "future" issue as well, but that's beyond the scope of the question — Jake Berger

Chris DaMour Chris DaMour · Accepted Answer · 2012-03-05T21:24:42

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?

Bind to the Template of each item in an ItemsSource collection

1 Answers