关闭

WPF DataGrid 控件(自定义样式篇)

标签: datagrid
806人阅读 评论(0) 收藏 举报
分类:

   在《WPF 4 DataGrid 控件(基本功能篇)》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容,其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。

ColumnHeaderStyle 属性

     一般来讲列表头是用户首先注意的内容,那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过<DataGrid.ColumnHeaderStyle>来全局定义;也可以针对个别列在<DataGrid.Columns>中通过<DataGridColumn.HeaderStyle>定义。

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
            SelectionUnit="CellOrRowHeader" IsReadOnly="True">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="White" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontSize" Value="13" />
        </Style>
    </DataGrid.ColumnHeaderStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}">
            <DataGridColumn.HeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="White" Offset="0"/>
                                <GradientStop Color="SkyBlue" Offset="0.5"/>
                                <GradientStop Color="White" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="FontSize" Value="13"/>
                    <Setter Property="Width" Value="80"/>
<Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="ToolTip" Value="Sort by Column"/> </Trigger> </Style.Triggers> </Style> </DataGridColumn.HeaderStyle> </DataGridTextColumn> <DataGridTextColumn Header="Age" Binding="{Binding Age}"> <DataGridColumn.HeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="LightGreen" Offset="0.5"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="13"/> <Setter Property="Width" Value="50"/> </Style> </DataGridColumn.HeaderStyle> </DataGridTextColumn> <DataGridComboBoxColumn Header="Sex" SelectedItemBinding="{Binding Sex}" ItemsSource="{Binding Source={StaticResource sexEnum}}"> <DataGridColumn.HeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="LightPink" Offset="0.5"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="13"/> <Setter Property="Width" Value="70"/> </Style> </DataGridColumn.HeaderStyle> </DataGridComboBoxColumn> <DataGridCheckBoxColumn Header="Pass Exam?" Width="100" Binding="{Binding Pass}"/> <DataGridHyperlinkColumn Header="Email" Width="150" Binding="{Binding Email}"/> </DataGrid.Columns> </DataGrid>

     其效果如下图所示,Name、Age、Sex 列会按各自的样式显示。未定义样式的Pass Exam 和Email 列将按<DataGrid.ColumnHeaderStyle>全局定义显示,并且当鼠标移置到这两列上方时会有“Sort by Column”提示信息。

ColumnHeaderStyle

RowHeaderStyle 属性

     列表头介绍完了下面再来看看行表头,其定义方式与列表头相同,直接在<DataGrid>中加入<DataGrid.RowHeaderStyle>进行全局定义,见如下代码:

... ...
<DataGrid.RowHeaderStyle>
    <Style TargetType="DataGridRowHeader">
        <Setter Property="Content" Value=" ·¤"/>
        <Setter Property="Width" Value="10"/>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="SkyBlue" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="ToolTip" Value="Select this Row"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowHeaderStyle>
... ...

效果图:

RowHeaderStyle

RowStyle 属性

     接下来我们来为行设置样式,使每行的颜色变为蓝色,并且当鼠标移至行上方时,其背景颜色会变为灰色,文字颜色变为白色。

... ...
<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Setter Property="Background" Value="LightBlue" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>
... ...

效果图:

RowStyle

CellStyle 属性

     单元格部分我们继续制作一个动态样式,当鼠标点击单元格后,其背景色将变为绿色。

... ...
<DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="SeaGreen"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.CellStyle>
... ...

效果图:

CellStyle

作者:李敬然(Gnie)
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。
0
0
查看评论

WPF 4 DataGrid 控件(自定义样式篇)

在《WPF 4 DataGrid 控件(基本功能篇)》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容,其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。 ColumnHeaderStyle 属性...
  • ccx_john
  • ccx_john
  • 2013-12-04 08:30
  • 607

WPF中DataGrid的使用

DataGrid是WPF中的数据显示控件,相当于Winform中的DataGridView。但是两者之间的用法确存在一些差异。在文档中,如果利用两者的不同之处可以更加清楚的描述好DataGrid的使用,我将采用该种方法。好了我们首先看一下如何为DataGrid指定数据源吧!
  • lsc19890723
  • lsc19890723
  • 2011-10-08 21:02
  • 16337

C# WPF DataGrid在Grid中自适应窗体大小

XAML 中设置   例如   上面设置了Margin和Width="Auto"即可实现自适应窗体大小。 其中用了Margin就不要设置DataGrid的高度Height,不要设置HorizontalAlignment 和VerticalAlignmen...
  • lvyiwuhen
  • lvyiwuhen
  • 2016-09-23 15:12
  • 5152

WPF DataGridTemplateColumn 获取内部控件

xaml前台代码:                                     ...
  • m15188153014
  • m15188153014
  • 2015-09-21 16:04
  • 741

WPF:获取DataGrid控件单元格DataGridCell

/* ---------------------------------------------------------- 文件名称:DataGridPlus.cs 作者:秦建辉 MSN:splashcn@msn.com QQ:36748897 博客:http://blog.csdn.net/...
  • jhqin
  • jhqin
  • 2012-06-08 14:47
  • 21629

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师)。 下面,找到我的小抄造型的网格。它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱。 在DataGrid中的最高水平,你...
  • Metal1
  • Metal1
  • 2014-11-19 22:43
  • 13297

C# WPF DataGrid控件同行编辑的实时更新问题

这些天一直在研究WPF,试图用其来进行数据库客户端的制作。DataGrid控件以其数据显示和实时编辑的方便易用,自然是不能不用。     数据库程序中,往往要实现多级联动这一功能以实现范围的选择等。本人在实现该功能的过程中发现DataGrid控件一个让人十分崩溃的点,就是在编辑完...
  • oHanTanYanYing
  • oHanTanYanYing
  • 2015-10-26 20:33
  • 2159

WPF 自定义RadioButton

直接上效果图 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/...
  • libo250
  • libo250
  • 2015-01-01 22:21
  • 2455

DataGrid中的子控件Combox之数据源绑定(WPF)

看到同事有一个这样的需求,自己就写了一个小例子 如何根据DataGrid中Combox中选择的值将对应的数据显示到DataGrid中 创建了 三个数据源   List SelectionList为 Combox 数据源存放于所有数据相相关联的字段值(Selection), ...
  • baiduandxunlei
  • baiduandxunlei
  • 2013-03-17 21:45
  • 9456

C# WPF DataGrid 分组(Group)

C# WPF DataGrid 分组(Group) 效果如图,每个列的名字可以自定义。我随便用了”File”和”Attachment Name”。 在Window的Resources里面设置Style, GroupHeaderStyle: <Style
  • anyicheng2015
  • anyicheng2015
  • 2017-02-15 15:23
  • 1419
    个人资料
    • 访问:107050次
    • 积分:1390
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:33篇
    • 译文:0篇
    • 评论:6条
    最新评论