question

BitSmithy-4663 avatar image
0 Votes"
BitSmithy-4663 asked ·

[UWP] how to set DataGrid background color during columns autogeneration

Hello;


How to set DataGridColumn.Header background color to blue during autogeneration column (code behind).

     private void MyDataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
     {

......

}



windows-uwp
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered ·

Hello,

Welcome to Microsoft Q&A!

If you want to change the Background of DataGridColumn.Header, you need to change its default Style. From the default Style, there is a line which define the background of the Header:

 <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="{ThemeResource DataGridColumnHeaderBackgroundBrush}" Grid.ColumnSpan="2"/>

So if you want to change the background, you can change the value of DataGridColumnHeaderBackgroundBrush or define a Background property and bind the property with this Fill property. For example, I define a Background property in Style of DataGridColumnHeader.

.xaml:

 <Page.Resources>
     <ResourceDictionary>
         <ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary x:Key="Default">
                 <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>
                 <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                 <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                 <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                 <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
             </ResourceDictionary>
             <ResourceDictionary x:Key="HighContrast">
                 <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>
                 <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                 <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                 <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                 <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
             </ResourceDictionary>
             <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="InvalidBrush" Color="#C50500"/>
                 <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                 <SolidColorBrush x:Key="ScrollBarsSeparatorBackground" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9"/>
                 <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                 <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                 <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                 <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                 <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
             </ResourceDictionary>
         </ResourceDictionary.ThemeDictionaries>

         <SolidColorBrush x:Key="SystemControlGridLinesBaseMediumLowBrush" Color="{StaticResource SystemBaseMediumLowColor}" Opacity="0.4"/>
         <SolidColorBrush x:Key="SystemControlRowGroupHeaderBackgroundMediumBrush" Color="{StaticResource SystemChromeMediumColor}"/>
         <SolidColorBrush x:Key="DataGridCurrencyVisualPrimaryBrush" Color="Transparent"/>

         <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
         <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor" Color="Red"/>
         <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
         <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
         <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
         <x:String x:Key="SortIconAscending">&#xE74A;</x:String>
         <x:String x:Key="SortIconDescending">&#xE74B;</x:String>
         <StaticResource x:Key="GridLinesBrush" ResourceKey="SystemControlGridLinesBaseMediumLowBrush"/>
         <StaticResource x:Key="DataGridCellFocusVisualPrimaryBrush" ResourceKey="SystemControlFocusVisualPrimaryBrush"/>
         <StaticResource x:Key="DataGridCellFocusVisualSecondaryBrush" ResourceKey="SystemControlFocusVisualSecondaryBrush"/>

         <Style x:Key="DataGridColumnHeaderNoSortStyle" TargetType="controlsprimitives:DataGridColumnHeader">
             <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}"/>
             <Setter Property="Background" Value="Blue"></Setter>
             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
             <Setter Property="VerticalContentAlignment" Value="Center"/>
             <Setter Property="IsTabStop" Value="False"/>
             <Setter Property="SeparatorBrush" Value="{ThemeResource GridLinesBrush}"/>
             <Setter Property="Padding" Value="12,0,0,0"/>
             <Setter Property="FontSize" Value="12"/>
             <Setter Property="MinHeight" Value="32"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="controlsprimitives:DataGridColumnHeader">
                         <Grid x:Name="ColumnHeaderRoot">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*"/>
                                 <ColumnDefinition Width="Auto"/>
                             </Grid.ColumnDefinitions>
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="CommonStates">
                                 </VisualStateGroup>
                                 <VisualStateGroup x:Name="FocusStates">
                                     <VisualState x:Name="Unfocused"/>
                                     <VisualState x:Name="Focused">
                                         <Storyboard>
                                             <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1"/>
                                         </Storyboard>
                                     </VisualState>
                                 </VisualStateGroup>
                                 <VisualStateGroup x:Name="SortStates">
                                     <VisualState x:Name="Unsorted"/>
                                     <VisualState x:Name="SortAscending">
                                         <Storyboard>
                                             <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>
                                         </Storyboard>
                                     </VisualState>
                                     <VisualState x:Name="SortDescending">
                                         <VisualState.Setters>
                                             <Setter Target="SortIcon.Glyph" Value="{ThemeResource SortIconDescending}"/>
                                         </VisualState.Setters>
                                         <Storyboard>
                                             <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>
                                         </Storyboard>
                                     </VisualState>
                                 </VisualStateGroup>
                             </VisualStateManager.VisualStateGroups>
                             <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="{TemplateBinding Background}" Stretch="Fill"/>
                             <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*"/>
                                     <ColumnDefinition MinWidth="0" Width="Auto"/>
                                 </Grid.ColumnDefinitions>
                                 <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                 <FontIcon x:Name="SortIcon" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource DataGridColumnHeaderForegroundBrush}" FontSize="12" Glyph="{ThemeResource SortIconAscending}" HorizontalAlignment="Center" Opacity="0" VerticalAlignment="Center"
                                       Visibility="Collapsed"/>
                             </Grid>
                             <Rectangle x:Name="VerticalSeparator" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" Visibility="{TemplateBinding SeparatorVisibility}" Width="1"/>
                             <Grid x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0">
                                 <Rectangle x:Name="FocusVisualPrimary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" StrokeThickness="2" Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}" VerticalAlignment="Stretch"/>
                                 <Rectangle x:Name="FocusVisualSecondary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" Margin="2" StrokeThickness="1" Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}" VerticalAlignment="Stretch"/>
                             </Grid>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </ResourceDictionary>
 </Page.Resources>

 <controls:DataGrid x:Name="dataGrid1" ItemsSource="{x:Bind Customers}">
     <controls:DataGrid.Columns>
         <controls:DataGridTextColumn
         Header="First Name" 
         Width="SizeToHeader"
         Binding="{Binding FirstName}"
         FontSize="20" HeaderStyle="{StaticResource MyDataGridColumnHeaderStyle}">
         </controls:DataGridTextColumn>
     </controls:DataGrid.Columns>
 </controls:DataGrid>

Update:

If you want to override the DataGridColumnHeaderBackgroundColor, you can try the following method and don't need to change its default style.

.xaml:

 <Page.Resources>
     <Color x:Key="MyColumnHeaderBackgroundColor">Red</Color>
     <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="MyColumnHeaderBackgroundColor"/>
 </Page.Resources>









· 2 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

So if you want to change the background, you can change the value of DataGridColumnHeaderBackgroundBrush


How to change or overwrite DataGridColumnHeaderBackgroundBrush

0 Votes 0 · ·

About how to override DataGridColumnHeaderBackground, I have updated my answer, please check the Update part.

0 Votes 0 · ·