This is a migrated thread and some comments may be shown as answers.

Expander HeaderTemplate cannot access Expander's DataContext

2 Answers 85 Views
Expander
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Iron
Veteran
Iron
Joe asked on 13 Jun 2019, 04:28 PM

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 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 13 Jun 2019, 05:15 PM

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.

 

0
Accepted
Martin Ivanov
Telerik team
answered on 18 Jun 2019, 06:53 AM
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.
Tags
Expander
Asked by
Joe
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Joe
Top achievements
Rank 1
Iron
Veteran
Iron
Martin Ivanov
Telerik team
Share this question
or