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

Posted 2023-02-22

技术标签:

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

？需要直接修改xaml吗？

【问题讨论】：

查看这篇文章。A 任何想要设置数据网格样式的人都必须阅读blogs.msdn.com/b/jaimer/archive/2009/01/20/… 【参考方案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>

【讨论】：

以上是关于使用 WPF 数据网格时如何更改列标题的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章

如何使用从wpf中的数据库中获取的值更改datagrid行背景颜色

如何以编程方式更改 WPF 中的数据网格行颜色？

选择后更改整个数据网格行的背景颜色

需要更改 extjs 网格操作列内图标的背景颜色

在运行时更改 WPF DataGrid 整列的背景颜色

C＃WPF更改网格背景图像[重复]