Expander HeaderTemplate cannot access Expander's DataContext

3 posts, 1 answers
  1. Joe
    Joe avatar
    60 posts
    Member since:
    Nov 2017

    Posted 13 Jun Link to this post

    My problem is simple: In my RadExpander header template, I am unable to access the properties of the data context of the expander itself.  Why does the header not have the same data context?

    Here is a simple example:  A main Window with a label and a RadExpander (with HeaderTemplate).  The simple label easily accesses the "Name" property.  The RadExpander's HeaderTemplate cannot

     

    <Window x:Class="TestTelerik.MainWindow"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:tk="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:testTelerik="clr-namespace:TestTelerik"
                    Title="MainWindow" Height="350" Width="525"
                    >
        <StackPanel>
     
            <!-- This shows up just fine -->
     
           <Label Content="{Binding HeaderTitle}"/>
     
            <tk:RadExpander>
                <tk:RadExpander.HeaderTemplate>
                    <DataTemplate>
                         <!-- This does not show.  Why not? -->
                        <Label Content="{Binding HeaderTitle}"/>
                    </DataTemplate>
                </tk:RadExpander.HeaderTemplate>
            </tk:RadExpander>
        </StackPanel>
    </Window>

     

    The DataContext of this window is just itself:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }
     
        public string HeaderTitle => "Items!";
    }

    My real-world use case it actually quite a bit more complicated so it's not a viable solution for me to try to bind the "RadExpander.Header" property directly. 

    Nor can I use the  "ElementName=" binding syntax.  Not in my case

    What is the best way to make the RadExpander HeaderTemplate inherit its the RadExpander's  data context?

     

  2. Joe
    Joe avatar
    60 posts
    Member since:
    Nov 2017

    Posted 13 Jun in reply to Joe Link to this post

    After some checking on StackOverflow and talking it over with others, I have been made to understand that I can get at the expander's DataContext with a pretty complicated databinding that looks up the visual tree for the first instance of RadExpander.  I changed my sample expander XAML to look like this and it seems to work:

    <tk:RadExpander>
        <tk:RadExpander.HeaderTemplate>
            <DataTemplate>
                <Label Content="{Binding Path=DataContext.HeaderTitle, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type tk:RadExpander}}}"/>
     
            </DataTemplate>
        </tk:RadExpander.HeaderTemplate>
    </tk:RadExpander>

     

    Is this this thing I need to do for any HeaderTemplate?  Is there some simpler way I'm missing?  It just seems really odd.

     

  3. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    2223 posts

    Posted 18 Jun Link to this post

    Hello Joe,

    The relative source binding is one way to go. The other one is to set the Header property of the RadExpander control. Actually, the data context of the HeaderTemplate is the content of the Header property.

    You will notice this behavior also in the WPF native ContentControl. There the ContentTemplate doesn't know about the DataContext of the control. Instead it uses the Content property.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top