Windowscommunitytoolkit: DataGridTemplateColumn.Header Issue

[corykroll]

I'm submitting a...

• Bug report (I searched for similar issues and did not find one)

Current behavior

I attempted to define a custom template column header, the same that I would within tags with a WPF app. However, instead of working, it crashes the app with:
System.NotSupportedException: Content does not support UIElement; use ContentTemplate instead.

Expected behavior

I'd expect the header of the DataGrid Header to render as I designed it in XAML.

Minimal reproduction of the problem with instructions

What I can do with the WPF DataGrid that works:

This is what I did in the UWP Community Toolkit DataGrid control that causes the crash:

I also tried the following with the same result:

Environment

Nuget Package(s):
Microsoft.Toolkit.Uwp.UI.Controls.DataGrid 3.1.0-preview1

Package Version(s):

Windows 10 Build Number:

• [ ] Creators Update (15063)
• [ ] Fall Creators Update (16299)
• [ x ] April 2018 Update (17134)
• [ ] Insider Build (build number: )

App min and target version:

• [ ] Creators Update (15063)
• [ ] Fall Creators Update (16299)
• [ x ] April 2018 Update (17134)
• [ ] Insider Build (xxxxx)

Device form factor:

• [ x ] Desktop
• [ ] Mobile
• [ ] Xbox
• [ ] Surface Hub
• [ ] IoT

Visual Studio

• [ x ] 2017 (version: 15.7.4)
• [ ] 2017 Preview (version: )

[kbrons]

I've been checking out the implementation, and the control seems to be designed to work with a DataTemplate. You can find an example on how to use it on the MasterDetailsView ItemTemplate implementation

[nmetulev]

/cc @harinikmsft

[corykroll]

@kbrons I'm not sure I fully follow. From what I have to work with, I'd assume I'd need to implement a HeaderStyle with a Style that has a new ContentTemplate, but I'm not seeing it.
If I create a Style here, what TargetType am I using?

<controls:DataGrid.Columns> <controls:DataGridTemplateColumn> <controls:DataGridTemplateColumn.HeaderStyle> ????? </controls:DataGridTemplateColumn.HeaderStyle> </controls:DataGridTemplateColumn> </controls:DataGrid.Columns>

[Frydex]

@corykroll use this:

xmlns:dataprimitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"

and

<controls:DataGridTemplateColumn.HeaderStyle>
                                <Style TargetType="dataprimitives:DataGridColumnHeader">
                                    <Setter Property="ContentTemplate">
                                        <Setter.Value>
                                            <DataTemplate>
                                                <TextBlock Text="t"></TextBlock>
                                            </DataTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </controls:DataGridTemplateColumn.HeaderStyle>

why it is not described anywhere I did not understand...

[corykroll]

That worked - thank you so much!

[blakepell]

@Frydex This is the only place I could find a good example of this. Much thanks!

I had some issues with space being taken up on the right hand side of the column header that I could not get rid of. I theorized it was holding space from the sort icon.

I ended up putting my control in the header via the "Template" property and the spacing issue went away (and the button I placed in the control then fit nicely in the header).

<controls:DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="dataprimitives:DataGridColumnHeader">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dataprimitives:DataGridColumnHeader">
                    <Button Background="DarkGreen" Click="ButtonAddAlias_Click">
                        <SymbolIcon Symbol="Add"></SymbolIcon>
                    </Button>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</controls:DataGridTemplateColumn.HeaderStyle>

[tedrog36]

I am trying to put a checkbox in the column header with the content being the text defined in the Header property of the DataGridTemplateColumn. How do I bind to that from the control template?

{TemplateBinding Content} or {TemplateBinding Text} do not work.

Here is my header style:

<Style x:Key="DataGridCheckboxHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader" >
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <CheckBox Content="{TemplateBinding Content}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

[codeCasa]

@tedrog36

<Style x:Key="DataGridCheckboxHeaderStyle" TargetType="dataprimitives:DataGridColumnHeader" > <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <CheckBox Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" /> </DataTemplate> </Setter.Value> </Setter> </Style>