WPF 自定义DataGrid控件样式

内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html

一、DataGrid基本样式(一)

小刚已经把DataGrid的样式写的很完整了,这里我做点补充,先贴上基本样式的代码:

 <!--DataGrid样式-->
        <Style TargetType="DataGrid">
            <!--网格线颜色-->
            <Setter Property="CanUserResizeColumns" Value="false"/>
            <Setter Property="Background" Value="#FFF7EDAD" />
            <Setter Property="BorderBrush" Value="#FFF5F7F5" />
            <Setter Property="HorizontalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
        </Style>

        <!--标题栏样式-->
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MinHeight" Value="28" />
            <Setter Property="Foreground" Value="#323433" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridColumnHeader">
                        <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1" 
                             BorderBrush="#e6dbba" 
                              Width="Auto">
                            <Grid >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0" 
                            VerticalAlignment="Center" RenderTransformOrigin="1,1" />
                                <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Height" Value="25"/>
        </Style>
        <!--行样式触发-->
        <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
        <Style  TargetType="DataGridRow">
            <Setter Property="Background" Value="#F2F2F2" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <!--隔行换色-->
                <Trigger Property="AlternationIndex" Value="0" >
                    <Setter Property="Background" Value="#e7e7e7" />
                </Trigger>
                <Trigger Property="AlternationIndex" Value="1" >
                    <Setter Property="Background" Value="#f2f2f2" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                    <!--<Setter Property="Foreground" Value="White"/>-->
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--单元格样式触发-->
        <Style TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridCell">
                        <TextBlock TextAlignment="Center" VerticalAlignment="Center"  >
                           <ContentPresenter />
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

引用示例:

 <DataGrid x:Name="DataGrid" AutoGenerateColumns="False"  VerticalAlignment="Top"
                  CanUserSortColumns="False"     Margin="5" IsReadOnly="True"
                  CanUserResizeColumns="False" CanUserResizeRows="False"  SelectionMode="Single"
                  CanUserReorderColumns="False" AlternationCount="2"  RowHeaderWidth="0" CanUserAddRows="False" >
     <DataGrid.Columns>
           <DataGridTextColumn Header="名称" Width="150"  Binding="{Binding  Name}"/>
           <DataGridTextColumn Header="班级"   Width="120"  Binding="{Binding Class}"/>
           <DataGridTextColumn Header="性别"  Width="120"  Binding="{Binding Sex}"/>
           <DataGridTextColumn Header="班级排名"  Width="130"  Binding="{Binding ClassRank}"/>
           <DataGridTextColumn Header="全校排名"  Width="140"  Binding="{Binding SchoolRank}"/>
     </DataGrid.Columns>
</DataGrid>

初始化绑定数据C#代码:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            StudentList = new List<StudentInfo>()
            {
                new StudentInfo()
                {
                    Name="张三",
                    Class="三班",
                    Sex="",
                    ClassRank=10,
                    SchoolRank=103
                },
                 new StudentInfo()
                {
                    Name="李四",
                    Class="三班",
                    Sex="",
                    ClassRank=12,
                    SchoolRank=110
                },
                  new StudentInfo()
                {
                    Name="李梅",
                    Class="三班",
                    Sex="",
                    ClassRank=3,
                    SchoolRank=70
                },
             };
            this.DataGrid.ItemsSource = StudentList;
        }

        public List<StudentInfo> StudentList { get; set; }
        public class StudentInfo
        {
            public string Name { get; set; }
            public string Class { get; set; }
            public string Sex { get; set; }
            public int ClassRank { get; set; }
            public int SchoolRank { get; set; }
        }

效果展示:

二、DataGrid基本样式(二)

上面的代码实现了隔行换色的效果,但是没有鼠标选中效果。另外有些用户希望能够进行列头拖动及排序。那么就需要做以下更改:

添加DataGridRow样式:

  <Style x:Key="AlertCount1" TargetType="DataGridRow">
            <Setter Property="Background" Value="#F2F2F2" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="0" >
                    <Setter Property="Background" Value="White" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>
            </Style.Triggers>
        </Style>

在引用时,设置DataGrid的RowStyle="{StaticResource AlertCount1}"且AlternationCount="1"。这样就可以实现突出选中效果,取消隔行显示效果。要实现表头拖动,使用上面的样式代码是不行的,上面的样式代码去掉了拖动的控件。要实现拖动需要将其加上。

下面是对DataGrid控件的补充:

控件常用方法:

BeginEdit:使DataGrid进入编辑状态。

CancelEdit:取消DataGrid的编辑状态。

CollapseRowGroup:闭合DataGrid的行分组。

CommitEdit:确认DataGrid的编辑完成。

ExpandRowGroup:展开DataGrid的行分组。

GetGroupFromItem:从具体Item中得到分组。

ScrollIntoView:滚动DataGrid视图。

 

控件常用属性:

AlternatingRowBackground:获取或设置一个笔刷用来描绘DataGrid奇数行的背景。

AreRowDetailsFrozen:获取或设置一个值用来判断是否冻结每行内容的详细信息。

AreRowGroupHeadersFrozen:获取或设置一个值用来判断是否冻结分组行的头部。

AutoGenerateColumns:获取或设置一个值用来判断是否允许自动生成表列。

CanUserReorderColumns:获取或设置一个值用来判断是否允许用户重新排列表列的位置。

CanUserSortColumns:获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。

CellStyle:获取或设置单元格的样式。

ColumnHeaderHeight:获取或设置列头的高度。

ColumnHeaderStyle:获取或设置列头的样式。

Columns:获取组件中包含所有列的集合。

ColumnWidth:获取或设置列宽。

CurrentColumn:获取或设置包含当前单元格的列。

CurrentItem:获取包含当前单元格且与行绑定的数据项。

DragIndicatorStyle:获取或设置当拖曳列头时的样式。

DropLocationIndicatorStyle:获取或设置呈现列头时的样式。

FrozenColumnCount:获取或设置冻结列的个数。

GridLinesVisibility:获取或设置网格线的显示形式。

HeadersVisibility:获取或设置行头及列头的显示形式。

HorizontalGridLinesBrush:获取或设置水平网格线的笔刷。

HorizontalScrollBarVisibility:获取或设置水平滚动条的显示样式。

IsReadOnly:获取或设置DataGrid是否为只读。

MaxColumnWidth:获取或设置DataGrid的最大列宽。

MinColumnWidth:获取或设置DataGrid的最小列宽。

RowBackground:获取或设置用于填充行背景的笔刷。

RowDetailsTemplate:获取或设置被用于显示行详细部分的内容的模板。

RowDetailsVisibilityMode:获取或设置一个值用以判定行详细部分是否显示。

RowGroupHeaderStyles:获取呈现行分组头部的样式。

RowHeaderStyle:获取或设置呈现行头的样式。

RowHeaderWidth:获取或设置行头的宽度。

RowHeight:获取或设置每行的高度。

RowStyle:获取或设置呈现行时的样式。

SelectedIndex:获取或设置当前选中部分的索引值。

SelectedItem:获取或设置与当前被选中行绑定的数据项。

SelectedItems:获取与当前被选中的各行绑定的数据项们的列表(List)。

SelectionMode:获取或设置DataGrid的选取模式。

VerticalGridLinesBrush:获取或设置垂直网格线的笔刷。

VerticalScrollBarVisibility:获取或设置垂直滚动条的显示样式。

 

所有代码已经上传到github:https://github.com/cmfGit/WpfDemo.git

posted @ 2018-04-08 00:16  一叶知秋,知寒冬  阅读(15032)  评论(2编辑  收藏  举报