DataGrid控件在WPF中担任着表格的角色,大多用于展现数据,他有着自定义表头、单元格,和数据绑定等效果。
可以展现的数据
可以显示以下几种标签显示不同数据 :
显示文本: DataGridTextColumn
显示复选框: DataGridCheckboxColumn
下拉框: DataGridComboboxColumn
超链接: DataGridHyperlinkColum
常用属性
<!--AutoGenerateColumns 是否自动生成列 设置为false不会自动生成列-->
<!--AutoGenerateColumns 是否删除行-->
<!--CanUserSortColums 是否允许列进行排序-->
<!--GridLinesVisibility设置网格线-->
DataGrid实例
// 设计表格
<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.自定义单元格
<!--自定义单元格的模版-->
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding ClassId}"></TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemp
2.设置自定义表头局部样式
<!--表头局部样式-->
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Background"
Value="Red"/>
</Style>
</DataGrid.ColumnHe
3.设置自定义单元格局部样式
<!--内容局部样式-->
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Background"
Value="Pink" />
</Style>
</DataGridTextColumn.Ele
4.设置自定义表头全局样式
<!--表头全局样式-->
<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.设置自定义单元格全局样式
<!--内容全局样式-->
<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后台添加表格数据
// 添加
students.Add(new Student()
{
Name = "鲁班" + 000,
Age = 000 + 19 + "",
Sex = "男",
Class = 989 + "班",
Ah = true
});
this.data.Items.Refresh();
7.删除表格数据
students.RemoveAt(data.SelectedIndex);// 获取当前选中元素
data.Items.Refresh(); // 强制更新表格