wpf datagrid 实现渐变表头

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>


3.说明:

使用的时候,如果直接使用这个datagrid赋数据源,则会出现数据行列宽和表头列宽不匹配的情况(原因不明),因此这种用法只能绘制表头。  

至于数据表格,定义一个没有表头的datagrid即可。

实现的表头结果为:






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值