原文:WPF 4 DataGrid 控件（自定义样式篇）

     在《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”提示信息。

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>

... ...

效果图：

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>

... ...

效果图：

CellStyle 属性

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

... ...

<DataGrid.CellStyle>

    <Style TargetType="DataGridCell">

        <Style.Triggers>

            <Trigger Property="IsSelected" Value="True">

                <Setter Property="Background" Value="SeaGreen"/>

            </Trigger>

        </Style.Triggers>

    </Style>

</DataGrid.CellStyle>

... ...

效果图：

最新文章

  1. MySQL查询分析器EXPLAIN或DESC
  2. 转 Datatables中文API——基本参数
  3. 阻止PHP彩蛋信息泄漏 [转]
  4. windows下编译Libevent
  5. MFC中Listbox控件的简单使用
  6. 一个可视化的retrospective网站
  7. ZOJ问题--hdu3788
  8. 利用代码改变世界 #AzureDev
  9. react的初涉入
  10. HT for Web嵌入QtWebKit的client解决方式
  11. 对比AutoResetEvent和ManualResetEvent
  12. python_如何拆分含有多种分隔符的字符串?
  13. java 实现多文件打包下载
  14. jQuery CSS 类
  15. 田螺便利店—filezilla实现Linux和windows通信
  16. 利用SUM打java补丁
  17. Mysql之常用操作(2)
  18. BrowserRoute服务器配置
  19. linux strncpy()和strcat使用总结
  20. 几种线程安全的Map解析

热门文章

  1. ios开发核心动画七：核心动画与UIView动画的区别
  2. [Angular] Subscribing to router events
  3. [GraphQL] Use GraphQLList with GraphQLObject Types
  4. acdream 1430 SETI 后缀数组+height分组
  5. NBU7.0 RMAN 异机恢复 not found in NetBackup catalog
  6. IOS开发中经常使用的宏定义
  7. 【codeforces 757C】Felicity is Coming!
  8. Android 自定义View——自定义点击事件
  9. APPCAN学习笔记002---app高速开发AppCan.cn平台特色
  10. Oracle中的游标（转）