Search code examples
c#mvvmbindingdatatemplateexpander

MVVM binding in templates issue (specifically Expander control's HeaderTemplate)

Alright so I have a data template called GeneralVocabItemTemplateInput. In it is an expander control.

The data template is linked to a view model and so various items can be bound. In fact I can bind the header text for the expander as follows:

<DataTemplate x:Key="GeneralVocabItemTemplateInput">
            <Grid Margin="2">
                <Expander Header="{Binding ID}">

And that works fine. The header text displays the ID value. The point being that the expander's data context is the view model I want.

All good so far. Now rather than the ID as text I wanted a template instead so I could have more customisation. I created a data template that I could assign to the HeaderTemplate property of expander. So I created one in my resource dictionary that looks like this:

<DataTemplate x:Key="TemplateTest">
    <StackPanel>
        <Border BorderThickness="1" BorderBrush="Black">
            <TextBlock Margin="2" Text="{Binding ID}"/>
        </Border>
    </StackPanel>
</DataTemplate>

Very simple, a set border as well as the same bound value from before.

I use that in the expander as follows:

<DataTemplate x:Key="GeneralVocabItemTemplateInput">
            <Grid Margin="2">
                <Expander HeaderTemplate="{StaticResource TemplateTest}">

Here's where I get the problem. The black border appears, but there's nothing inside it.

Clearly the template works and can be found since the border appears, but the binding doesn't. I've played around with it for a while and haven't come up with a solution.

One thing I did try was to change where TemplateTest was stored (the data template). It was in a separate resource dictionary file, so I moved it into the same file as my original template (GeneralVocabItemTemplateInput) to see if that made a difference. No difference.

I hope someone can shed some light on this.

Solution

  • It works at my side with the following change:

    <Expander HeaderTemplate="{StaticResource TemplateTest}" Header="{Binding}">

    Explanation: DataContext in the HeaderTemplate is set to the Header itself (which seems to be reasonable). When there is no Header set, the DataContext is therefore null.