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

转载 2013年12月04日 08:30:48
  在《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

本文来自李敬然的博客,原文地址:http://www.cnblogs.com/gnielee/archive/2010/04/19/wpf4-datagrid-control-style.html

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

在《WPF 4 DataGrid 控件(基本功能篇)》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容,其中将涉及到ColumnHead...
  • beauty_1991
  • beauty_1991
  • 2015年06月17日 11:24
  • 804

WPF中DataGrid的使用

DataGrid是WPF中的数据显示控件,相当于Winform中的DataGridView。但是两者之间的用法确存在一些差异。在文档中,如果利用两者的不同之处可以更加清楚的描述好DataGrid的使用...
  • lsc19890723
  • lsc19890723
  • 2011年10月08日 21:02
  • 16312

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

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

WPF DataGridTemplateColumn 获取内部控件

xaml前台代码:                                                                               ...
  • m15188153014
  • m15188153014
  • 2015年09月21日 16:04
  • 737

WPF:获取DataGrid控件单元格DataGridCell

/* ---------------------------------------------------------- 文件名称:DataGridPlus.cs 作者:秦建辉 MSN:spla...
  • jhqin
  • jhqin
  • 2012年06月08日 14:47
  • 21610

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师)。 下面,找到我的小抄造型的网格。它不是100...
  • Metal1
  • Metal1
  • 2014年11月19日 22:43
  • 13278

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

这些天一直在研究WPF,试图用其来进行数据库客户端的制作。DataGrid控件以其数据显示和实时编辑的方便易用,自然是不能不用。     数据库程序中,往往要实现多级联动这一功能以实现范围的选择等。本...
  • oHanTanYanYing
  • oHanTanYanYing
  • 2015年10月26日 20:33
  • 2150

WPF 自定义RadioButton

直接上效果图
  • libo250
  • libo250
  • 2015年01月01日 22:21
  • 2445

WPF 4 DataGrid 控件(基本功能篇)

提到DataGrid 不管是网页还是应用程序开发都会频繁使用。通过它我们可以灵活的在行与列间显示各种数据。本篇将详细介绍WPF 4 中DataGrid 的相关功能。 自定义列      默认情况下...
  • djc11282
  • djc11282
  • 2013年10月18日 10:43
  • 667

WPF 4 DataGrid 控件(基本功能篇)

    来源:http://www.cnblogs.com/gnielee/archive/2010/04/16/wpf4-datagrid-control-basic.html提到DataGrid ...
  • mao_kun
  • mao_kun
  • 2011年03月16日 18:51
  • 649
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF 4 DataGrid 控件(自定义样式篇)
举报原因:
原因补充:

(最多只允许输入30个字)