Community toolkit DataGrid ColumnHeader background

BitSmithy 1,951 Reputation points
2024-05-23T10:34:58.8566667+00:00

Hello,

I am styling DataGrid Columns with such style

        <Color x:Key="MyColumnHeaderBackgroundColor">AliceBlue</Color>
        <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="MyColumnHeaderBackgroundColor"/>

and this works for next to all columns. But I have one column styled myself:

        <Style x:Name="WCTDataGrid_CheckBoxHeaderStyle" TargetType="wctprimitives:DataGridColumnHeader">
            <Setter Property="Background" Value="AliceBlue"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="wctprimitives:DataGridColumnHeader">
                        <CheckBox MaxWidth="40" Margin="5,0,0,0"
                                  Checked="SelectAll"
                                  Unchecked="DeselectAll"
                                  Background="AliceBlue"
                                  />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I set this style to column code behind on AutoGeneratingColumn event

        private void AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
		{
			e.Column.CanUserResize = true;
			e.Column.Tag = e.PropertyName;

			if(e.PropertyName == "IsSelected")
			{
                var templateColumn = new DataGridTemplateColumn(); 				templateColumn.HeaderStyle = WCTDataGrid_CheckBoxHeaderStyle;

                templateColumn.CellTemplate = (DataTemplate)this.Resources["WCTDataGrid_CheckBoxCellDataTemplate"];
                templateColumn.Width = DataGridLength.SizeToHeader;

                e.Column = templateColumn;             
} 
}

This column has no AliceBlue background, how to set this?

If possible I prefer using one of this settings:

        <Color x:Key="MyColumnHeaderBackgroundColor">AliceBlue</Color>

        <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="MyColumnHeaderBackgroundColor"/>
Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 16,151 Reputation points Microsoft Vendor
    2024-05-24T04:05:50.8633333+00:00

    Hi @BitSmithy ,

    Welcome to Microsoft Q&A!

    The solution is to put the CheckBx in ContentPresenter, and set the background of ContentPresenter to AliceBlue.

     <Style x:Name="WCTDataGrid_CheckBoxHeaderStyle" TargetType="wctprimitives:DataGridColumnHeader">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="wctprimitives:DataGridColumnHeader">
                     <ContentPresenter Background="AliceBlue" >
                         <CheckBox MaxWidth="40" Margin="5,0,0,0"/>
                     </ContentPresenter>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
    

    Thank you.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful