Dynamic Telerik RadOutlookBar headers come out wrong with ItemTemplate

Question

I'm trying to use Telerik RadControls in a MVVM kind of way but having some strange problems.

The Viewmodel behind the RadOutlookBar has a collection of ViewModels that each have a Title string property. I wanted to define it so way the they get Wrapped inside a RadOutlookBarItem and bind the header/title properties together.

XAML:

<telerik:RadOutlookBar x:Name="Items">
    <telerik:RadOutlookBar.TitleTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding Path=Title}" />
        </DataTemplate>
    </telerik:RadOutlookBar.TitleTemplate>
    <telerik:RadOutlookBar.ItemTemplate>
        <DataTemplate>
            <telerik:RadOutlookBarItem Header="{Binding Path=Title}" >
                <ContentControl Content="{Binding}" />
            </telerik:RadOutlookBarItem>
        </DataTemplate>
    </telerik:RadOutlookBar.ItemTemplate>
</telerik:RadOutlookBar>

This works as intended except that the Header comes out strange. Instead of being like a static string item it seems to get wrapped inside another object that behaves like a similar to a RadOutlookBarItem ( it' changes color when mouseover and such )

Even if I cahnge to straightforward string instead of binding it's still strange. But If I don't define a ItemTemplate inside the RadOutlookBar (that is, not a dynamic control) it looks all right.

What could be going on there?

Answer 1

Solved this and another problem in one fell swoop. I was binding to the wrong Template the whole time. This made me think I had to add OutLookBarItem myself.

In the end I was supposed to bind what I was trying to bind to the ContentTemplate.

<telerik:RadOutlookBar x:Name="Items">
    <telerik:RadOutlookBar.ContentTemplate>
        <DataTemplate >
            <ContentControl Content="{Binding}" />
        </DataTemplate>
    </telerik:RadOutlookBar.ContentTemplate>
    <telerik:RadOutlookBar.TitleTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </telerik:RadOutlookBar.TitleTemplate>
    <telerik:RadOutlookBar.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </telerik:RadOutlookBar.ItemTemplate>
</telerik:RadOutlookBar>

Should work I think.