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

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

可以展现的数据

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

显示文本: DataGridTextColumn

显示复选框: DataGridCheckboxColumn

下拉框: DataGridComboboxColumn

超链接: DataGridHyperlinkColum

常用属性

<!--AutoGenerateColumns 是否自动生成列 设置为false不会自动生成列-->

<!--AutoGenerateColumns 是否删除行-->

<!--CanUserSortColums 是否允许列进行排序-->

<!--GridLinesVisibility设置网格线-->

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(); // 强制更新表格
相关推荐
九鼎科技-Leo12 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
麻花20131 天前
C#之WPF的C1FlexGrid空间的行加载事件和列事件变更处理动态加载的枚举值
开发语言·c#·wpf
lcintj1 天前
【WPF】Prism学习(九)
学习·wpf·prism
界面开发小八哥1 天前
界面控件DevExpress WPF中文教程:网格视图数据布局的列和卡片字段
wpf·界面控件·devexpress·ui开发·用户界面
△曉風殘月〆1 天前
如何在WPF中嵌入其它程序
wpf
Crazy Struggle1 天前
功能齐全的 WPF 自定义控件资源库(收藏版)
.net·wpf·ui控件库
shepherd枸杞泡茶2 天前
WPF动画
c#·.net·wpf
lcintj2 天前
【WPF】Prism学习(十)
学习·wpf·prism
wyh要好好学习2 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing2 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计