WPF之DataGrid表格，自定义表头、自定义单元格

DataGrid控件在WPF中担任着表格的角色，大多用于展现数据，他有着自定义表头、单元格，和数据绑定等效果。

可以展现的数据

可以显示以下几种标签显示不同数据 :

显示文本: DataGridTextColumn

显示复选框: DataGridCheckboxColumn

下拉框: DataGridComboboxColumn

超链接: DataGridHyperlinkColum

常用属性

DataGrid实例

cs 复制代码

// 设计表格
<DataGrid FontSize="18" FontFamily="宋体"
          Name="d1"
          ItemsSource="{Binding}"
          AutoGenerateColumns="False"
          CanUserAddRows="False"
          CanUserSortColumns="False"
          GridLinesVisibility="All">
    
    <!--设置表头样式-->
    <!--TargetType 给表头设置样式-->
    <DataGrid.CellStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
        </Style>
    </DataGrid.CellStyle>

    <!--设置列-->
    <DataGrid.Columns>
        <!--设置表头文本列，显示的数据可以通过bind进行绑定-->
        <DataGridTextColumn Header="姓名" Width="150"
                            Binding="{Binding Name}">

            <DataGridTextColumn.ElementStyle>
                <!--行内单元格样式-->
                <Style TargetType="TextBlock">
                    <Setter Property="HorizontalAlignment"
                            Value="Center" />
                    <Setter Property="VerticalAlignment"
                            Value="Center" />
                </Style>
            </DataGridTextColumn.ElementStyle>

        </DataGridTextColumn>
        
        <!--下拉框列-->
        <DataGridComboBoxColumn Header="班级"
                                x:Name="com"
                                SelectedValueBinding="{Binding ClassId}"></DataGridComboBoxColumn>
        
        <!--自定义列-->
        <DataGridTemplateColumn>
            <!--自定义列的标题-->
            <DataGridTemplateColumn.Header>
                <TextBlock>编号</TextBlock>
            </DataGridTemplateColumn.Header>
            
            <!--自定义单元格的模版-->
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ClassId}"></TextBlock>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplat




在CS后台操作数据绑定
数据绑定
// 设计模型类
public class Student
{
    public string Name { get; set; }  // 学生姓名
    public string ClassId {  get; set; } // 班级编号
}

public class BanJi
{
    public string ClassName { get; set; } // 班级名称
}

// 整理数据并添加
List<Student> list = new List<Student>();
list.Add(new Student(){Name = "迪迦",ClassId = "1000"});
list.Add(new Student(){Name = "赵丽颖",ClassId = "1002"});
list.Add(new Student(){Name = "普京",ClassId = "1003"});

// 整理第二个数据源
List<BanJi> list2 = new List<BanJi>();
list2.Add(new BanJi(){ClassName = "挖机一班"});
list2.Add(new BanJi(){ClassName = "上位机"});
list2.Add(new BanJi(){ClassName = "机械视觉"});

this.d1.ItemsSource = list;
this.com.ItemsSource = list2;
this.com.DisplayMemberPath = "ClassName";// 展示班级名称
this.com.Selecte

DataGrid常用操作

1.自定义单元格

cs 复制代码

<!--自定义单元格的模版-->
<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding ClassId}"></TextBlock>
    </DataTemplate>
</DataGridTemplateColumn.CellTemp

2.设置自定义表头局部样式

cs 复制代码

<!--表头局部样式-->
<DataGrid.ColumnHeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Background"
                Value="Red"/>
    </Style>
</DataGrid.ColumnHe

3.设置自定义单元格局部样式

cs 复制代码

<!--内容局部样式-->
<DataGridTextColumn.ElementStyle>
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="Background"
                Value="Pink" />
    </Style>
</DataGridTextColumn.Ele

4.设置自定义表头全局样式

cs 复制代码

<!--表头全局样式-->
<Style x:Key="sty" TargetType="DataGridColumnHeader">
    <Setter Property="HorizontalAlignment"
            Value="Center" />
    <Setter Property="VerticalAlignment"
            Value="Center" />
    <Setter Property="Background"
            Value="Red" />
</Style>


// 在datagrid中调用样式的键key
<DataGrid FontSize="18"
          FontFamily="宋体"
          Name="data"
          ColumnHeaderStyle="{StaticResource sty}">

5.设置自定义单元格全局样式

cs 复制代码

<!--内容全局样式-->
<Style x:Key="styl" TargetType="{x:Type TextBlock}">
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Background"
            Value="Pink"></Setter>
</Style>

// 在DataGridTextColumn中去调用样式键key
<DataGrid FontSize="18"
          FontFamily="宋体"
          Name="data">
    <DataGrid.Columns>
        <DataGridTextColumn Width="130"
                            Header="姓名"
                            ElementStyle="{StaticResource styl}">
        </DataGridTextColumn>
    </DataGrid.Column

6.CS后台添加表格数据

cs 复制代码

// 添加
students.Add(new Student()
 {
    Name = "鲁班" + 000,
    Age = 000 + 19 + "",
    Sex = "男",
    Class = 989 + "班",
    Ah = true

});
this.data.Items.Refresh();

7.删除表格数据

cs 复制代码

students.RemoveAt(data.SelectedIndex);// 获取当前选中元素
data.Items.Refresh(); // 强制更新表格