Problems setting image to RadPane header/tab using data template and binding

[Kim]

I have the following xaml:

<telerik:RadPane DataContext="{Binding Path=Panes.ConceptualModel}">
  <telerik:RadPane.Header>
    <StackPanel Orientation="Horizontal">
      <Image Source="{Binding Path=ImagePath}" Width="16" Height="16"/>
      <TextBlock Text="{Binding Path=Name}"/>
    </StackPanel>
  </telerik:RadPane.Header>
  <some content/>
</telerik:RadPane>
                    
This correctly shows both the image and the name in the tab, but the header of the pane says "System.Wndows.Controls.Stackpanel" instead of "Conceptual model", the value of the bound Name property (see attached image WithoutDataTemplate). Also, the coloring of the tab is much lighter than it is if I don't use the <telerik:RadPane.Header> -construction and just bind Header directly to the Name property. 

I found an example here which shows how to use a DataTemplate, which is more in line with how I  want to implement this:
http://www.telerik.com/help/wpf/raddocking-how-to-add-icon-pane-header.html

So if I, according to the example, instead move the stack panel to a DataTemplate like this: 

<DataTemplate x:Key="dtPaneHeader">
  <StackPanel Orientation="Horizontal">
    <Image Source="{Binding Path=ImagePath}" Width="16" Height="16"/>
    <TextBlock Text="{Binding Path=Name}"/>
  </StackPanel>
</DataTemplate>

and change the xaml to:

<telerik:RadPane 
  DataContext="{Binding Path=Panes.ConceptualModel}"
  Header="{Binding Path=Name}"
  HeaderTemplate="{StaticResource dtPaneHeader}" >
 <some content/>
</telerik:RadPane>

I get neither image nor name in the tab (see attached image WithDataTemplate). If I remove Header="{Binding Path=Name}", I get an empty string in the header as well. If I change the image and the text to unbound static values, it works. So apparently there is some sort of binding issue using the DataTemplate?

Here's another example with static property values in the DataTemplate  (see attached image WithDataTemplateStaticProperties):

<DataTemplate x:Key="dtPaneHeader">
    <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Path=ImagePath}" Width="16" Height="16"/>
        <Image Source="Images/Content/Class.png"/>
        <TextBlock Text="{Binding Path=Content}"/>
        <TextBlock Text="Static text"/>
    </StackPanel>
</DataTemplate>


Help appreciated,

Kim

[Kim]

...apparently the screenshots didn't come through...

Cheers,

Kim

[Vladi]

Hi Kim,

We are not sure what the issue exactly is when creating custom Header/TitleTemplate.

If the desired behavior is to be able to pass different Header Text and Image Path to the Templates you can do the following:

• Create a class that will be used as a ViewMode for each RadPane's Template that contains properties for the Header Text and the Image Path
• Create a class that will be used as ViewModel for the RadDocking/RadPane and in it add instances for each RadPane's Template ViewMode
• Bind the DataContext of the RadPane to the main ViewModel that holds the Template ViewModel instances
• Bind the Header/Title to each instance of Template's ViewModel from the main ViewModel
• Finally simply add binds to the properties of the Template ViewModel in the custom DataTemplate

I created and attached a sample project for you that shows the described approach, hope this is helpful. It is worth mentioning that in MVVM oriented projects you can take advantage of our new PanesSource feature, more information about it can be found in our online documentation here.

Regards,
Vladi
Telerik

 

 

[Kim]

Hi Vladi!

Thanks, this helped. It was exactly what I was talking about. Apparently my bindings were pointing to all the wrong places.

Ah, the details, the details :-)

Cheers,

Kim