wpf 的datagrid控件, 如果直接对 ColumnHeaderStyle 进行设置,会出现整列表头一个背景色(丢失了各列的边框)
以下通过对各列分别设置列头模板,实现 datagrid 渐变表头的一种方法。
1.定义样式模板
<!---渐变背景笔刷-->
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="myGradientBrush">
<GradientStop Color="#FFB5E0FF" Offset="0"/>
<GradientStop Color="#FF54A0D8" Offset="0.653"/>
<GradientStop Color="#FF9FC6E2" Offset="0.991"/>
</LinearGradientBrush>
<Style x:Key="gradientColumnHeaderStyle_left" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border Background="White" BorderBrush="Black" BorderThickness="0,0,0,1">
<Grid Background="{StaticResource myGradientBrush}" >
<Label FontSize="13" Content="{TemplateBinding Content}" Width="{TemplateBinding Width }" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="gradientColumnHeaderStyle_middle" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border Background="White" BorderBrush="Black" BorderThickness="1,0,0,1">
<Grid Background="{StaticResource myGradientBrush}" >
<Label FontSize="13" Content="{TemplateBinding Content}" Width="{TemplateBinding Width}" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="gradientColumnHeaderStyle_right" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border Background="White" BorderBrush="Black" BorderThickness="1,0,1,1">
<Grid Background="{StaticResource myGradientBrush}" >
<Label FontSize="13" Content="{TemplateBinding Content}" Width="{TemplateBinding Width}" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2.使用样式模板
<DataGrid Width="340" >
<DataGrid.Columns>
<DataGridTextColumn HeaderStyle="{StaticResource gradientColumnHeaderStyle_left}" Foreground="White" Header="层名" IsReadOnly="True" Width="83" />
<DataGridTextColumn HeaderStyle="{StaticResource gradientColumnHeaderStyle_middle}" Foreground="White" Header="目标值" IsReadOnly="True" Width="65" />
<DataGridTextColumn HeaderStyle="{StaticResource gradientColumnHeaderStyle_middle}" Foreground="White" Header="允许值" IsReadOnly="True" Width="70" />
<DataGridTextColumn HeaderStyle="{StaticResource gradientColumnHeaderStyle_middle}" Foreground="White" Header="实际值" IsReadOnly="True" Width="65" />
<DataGridTextColumn HeaderStyle="{StaticResource gradientColumnHeaderStyle_right}" Foreground="White" Header="判定" IsReadOnly="True" Width="55" />
</DataGrid.Columns>
</DataGrid>
使用的时候,如果直接使用这个datagrid赋数据源,则会出现数据行列宽和表头列宽不匹配的情况(原因不明),因此这种用法只能绘制表头。
至于数据表格,定义一个没有表头的datagrid即可。
实现的表头结果为: