Binding a DataTemplate in a UserControl

Question

I'm writing a UserControl, which I intend to use on several pages. It should encapsulate the behaviour to be the same for all pages. But the content and the layout should be different.

On the UserControl I have a ListView whoes ItemSource is bound to a CollectionViewSource with grouping enabled.

<ListView
  ItemSource="{Binding Source={StaticResource Collection}}"
  ItemTemplate="{Binding GroupedDataTemplate}">
  <ListView.GroupStyle>
    <GroupSytele HeaderTemplate="{Binding HeaderDataTemplate}"/>
  </ListView.GroupStyle>
</ListView>

The UserControl has the DependencyProperties "GroupedDataTemplate", "HeaderDataTemplate" for the layout and one "GroupedCollection" for the data.

On the page, where the UserControl is used, I defined the DataTemplates like:

<controls:MyUserControl
  GroupedCollection="{Binding DataContext.MyDataCollection, ElementName=thePage}">
  <controls:MyUserControl.GroupedDataTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Description}"/>
    </DataTemplate>
  </controls:MyUserControl.GroupedDataTemplate>
  <controls:MyUserControl.HeaderDataTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Key}"/>
    </DataTemplate>
  </controls:MyUserControl.HeaderDataTemplate>
</controls:MyUserControl>

My problem is, that the DataTemplate definition for "GroupedDataTemplate" works as expected, the description is shown. But for the "HeaderDataTemplate" it doesn't, it is shown only the ToString()-representation of the object.

The setter of the "HeaderDataTemplate" is called and the DataTemplate is assigned to the DependencyProperty of the UserControl.

If I replace the UserControl with the ListView itself, it works as expceted. Thus the binding works propperly to the Description and the Key, but it will only work for description if it is inside the UserControl.

For test purposes I have added a converter to the binding of the Key in the page and it is never called. I all cases, where I define a DataTemplate for an ItemTemplate (ListView or GridView) it works, but is doesn't for the HeaderTemplate of the GroupStyle.

What is my fault?

Grace Feng Grace Feng · Accepted Answer · 2016-10-12T07:22:51

Very good question, it seems when you use Binding for the HeaderTemplate of GroupSytele, in the .g.cs file of your UserControl, it doesn't generate the update code for HeaderDataTemplate, it means when you define this HeaderDataTemplate property for example like this:

public static readonly DependencyProperty HeaderDataTemplateProperty = DependencyProperty.Register("HeaderDataTemplate", typeof(DataTemplate), typeof(UserGroupedListView), new PropertyMetadata(null));

public DataTemplate HeaderDataTemplate
{
    get { return (DataTemplate)GetValue(HeaderDataTemplateProperty); }
    set { SetValue(HeaderDataTemplateProperty, value); }
}

The get never gets called.

A workaround here is that you can change the Binding to x:Bind like this in your UserControl:

<ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemTemplate="{Binding GroupedDataTemplate}">
    <ListView.GroupStyle>
        <GroupStyle HeaderTemplate="{x:Bind HeaderDataTemplate}" />
    </ListView.GroupStyle>
</ListView>

Basically you've done nothing wrong, but it seems data binding for the HeaderTemplate of GroupStyle can only work when it uses x:Bind.

Binding a DataTemplate in a UserControl

1 Answers