使用 WPF 数据网格时如何更改列标题的背景颜色答案

【问题标题】：How to change column header's background color when using WPF datagrid使用 WPF 数据网格时如何更改列标题的背景颜色
【发布时间】：2011-05-28 01:59:51
【问题描述】：

使用 WPF 数据网格时如何更改列标题的背景颜色？需要直接修改xaml吗？

【问题讨论】：

查看这篇文章。A 任何想要设置数据网格样式的人都必须阅读blogs.msdn.com/b/jaimer/archive/2009/01/20/…

标签： c# .net wpf xaml wpfdatagrid

【解决方案1】：

试试这个：

  <windows.Resources>
      <LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#FF6B8E95" Offset="0"/>
                <GradientStop Color="#FF14A7C1" Offset="1"/>
                <GradientStop Color="#FF1E424E" Offset="0.509"/>
                <GradientStop Color="#FF1D4855" Offset="0.542"/>
                <GradientStop Color="#FF1D4855" Offset="0.542"/>
                <GradientStop Color="#FF193A44" Offset="0.526"/>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#FF1D1D1D" Offset="0.614"/>
                <GradientStop Color="#FF007F96" Offset="0.853"/>
                <GradientStop Color="#FF0AEAFA" Offset="1"/>
            </LinearGradientBrush>

            <Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
                <Setter Property="Background" Value="{StaticResource HeaderBrush}" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="MinHeight" Value="30" />
                <Setter Property="Cursor" Value="Hand" />
            </Style>
    </Windows.Resources>

<Grid>
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>
</Grid>

这是结果：

【讨论】：

为包含结果截图点赞！
如果您有一个BorderThickness 或0，则不需要为HeaderBorderBrush 设置颜色（至少如本示例截图所示）。

【解决方案2】：

试试这个

    <Style.Triggers >
        <Trigger Property="SortDirection" Value="Ascending"  >

            <Setter Property="Background" Value="{StaticResource SelectedSolidColor}" />

        </Trigger>

    </Style.Triggers>




</Style>

【讨论】：

【解决方案3】：

我发现对我来说，不可能只更改背景颜色而不丢失其他样式（paddig/borders/...）

所以我写了一些与原始风格相似的风格：aero2.normalcolor.xaml

样式包含鼠标悬停、按下和排序效果

这是结果

您也可以创建自己的颜色

    <!--DATAGRID-->
    <LinearGradientBrush x:Key="ThemeDGHeader_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0.42"/>
        <GradientStop Color="#FFEAEAEA" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Border" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF7F8FA" Offset="0"/>
        <GradientStop Color="#FFD5D5D5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFDAF4FF" Offset="0.42"/>
        <GradientStop Color="#FFACE2F9" Offset="0.6"/>
        <GradientStop Color="#FFA1DCF5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFBCE4F9" Offset="0.42"/>
        <GradientStop Color="#FF8CD5F7" Offset="0.6"/>
        <GradientStop Color="#FF77C6EE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Sorted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE7F8FF" Offset="0.42"/>
        <GradientStop Color="#FFDEF5FF" Offset="0.6"/>
        <GradientStop Color="#FFBCE8FB" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ThemeDGHeader_MouseOverBorder" Color="#FF76C8F0"/>
    <SolidColorBrush x:Key="ThemeDGHeader_PressedBorder" Color="#FF7EC2E2"/>
    <SolidColorBrush x:Key="ThemeDGHeader_SortedBorder" Color="#FF9DD8F5"/>
    <SolidColorBrush x:Key="ThemeDG_Border" Color="#FF688CAF"/>
    <!--DATAGRID HEADER-->
    <Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Width" Value="8"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DCHS">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border x:Name="BR" 
                                BorderThickness="1,0,1,1"  
                                Padding="0,0,2,0"
                                BorderBrush="{StaticResource ThemeDGHeader_Border}"
                                Background="{StaticResource ThemeDGHeader_Background}">
                            <Border x:Name="BRIN" 
                                    CornerRadius="1"
                                    Padding="4,4,4,2"
                                    BorderThickness="0,0,0,0"
                                    BorderBrush="{StaticResource ThemeDGHeader_PressedBorder}"
                                    >
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                />
                            </Border>

                        </Border>
                        <Path x:Name="SortArrow"
                                        HorizontalAlignment="Center" VerticalAlignment="Top"                                           
                                        Width="7" Height="4" Margin="0,1,0,0"
                                        Stretch="Fill"
                                        RenderTransformOrigin="0.5,0.5"
                                        Visibility="Visible"
                                        Data="M0,0 L1,0 0.5,1 z" >
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0,0">
                                    <GradientStop Color="#FF9DC3D8" Offset="1"/>
                                    <GradientStop Color="#FF7AA8C4" Offset="0.403"/>
                                    <GradientStop Color="#FF4B7085" Offset="0.017"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="SortDirection" Value="{x:Null}">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="SortArrow" Property="RenderTransform">
                                <Setter.Value>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="-1"/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_MouseOver}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_MouseOverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="BR" Property="Border.Padding" Value="0,0,0,0"/>
                            <Setter TargetName="BRIN" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Pressed}" />
                            <Setter TargetName="BRIN" Property="Border.BorderThickness" Value="1,1,1,0"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDG_Border}"/>
                            <Setter TargetName="BR" Property="Border.BorderThickness" Value="1,0,1,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

使用：

<DataGrid ColumnHeaderStyle="{StaticResource DCHS}"/>

【讨论】：

没关系，但是我们如何设置材料设计主题？？thanx
@david2020 - 你必须为深色主题创建自己的颜色

【解决方案4】：

Style style = new Style(typeof(System.Windows.Controls.Primitives
    .DataGridColumnHeader));
style.Setters.Add(new Setter(ToolTipService.ToolTipProperty
    ,"Your tool tip here"));
style.Setters.Add(new Setter { Property = BackgroundProperty, Value 
    = Brushes.Yellow });


dgExcelSheet.Columns[1].HeaderStyle = style;

【讨论】：

这个答案是针对 WinForms 的DataGrid，而不是 WPF。

【解决方案5】：

使用带有针对 DataGridColumnHeader 的 setter 的样式：

<DataGrid>
    <DataGrid.Resources>
        <Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="Blue" />
        </Style>
    </DataGrid.Resources>
</DataGrid>

【讨论】：

这样好像去掉了列分隔符并压缩了边框，所以列标题看起来有点不一样。
<Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="0,0,1,0"/> 有助于消除这种情况
添加BasedOn，保留旧属性：<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
@wotanii - 你的建议不起作用。（尝试使用 VS2017 和 .NET 4.6.2）

【解决方案6】：

<DataGridTextColumn Header="ID">
    <DataGridTextColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="Green"/>
        </Style>
    </DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>

【讨论】：