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

4 posts, 0 answers
  1. Kim
    Kim avatar
    6 posts
    Member since:
    Dec 2013

    Posted 24 Apr 2014 Link to this post

    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
  2. Kim
    Kim avatar
    6 posts
    Member since:
    Dec 2013

    Posted 24 Apr 2014 Link to this post

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

    Cheers,

    Kim
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 25 Apr 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Kim
    Kim avatar
    6 posts
    Member since:
    Dec 2013

    Posted 29 Apr 2014 Link to this post

    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
Back to Top