DataGrid组件非常像html中的table列表功能，用于创建表格数据的组件。

DataGrid数据绑定

• ItemsSource 绑定

namespace WpfApp1{
    public partial class Page1 : Page{
        public Page1(){
            InitializeComponent();
            //数据模型装入数据内容
            List list = new List();
            list.Add(new Test { Subj = "备注1", Points = 15, Name = "zhtbs", ClassName = "2年7" });
            list.Add(new Test { Subj = "备注2", Points = 16, Name = "kkk", ClassName = "2年7" });
            list.Add(new Test { Subj = "备注3", Points = 14, Name = "zzz", ClassName = "2年7" });
            dataGrid.ItemsSource = list;//DataGrid组件 装入数据模型
        }
        public class Test{//DataGrid组件数据模型
            public string Subj { get; set; }
            public int Points { get; set; }
            public string Name { get; set; }
            public string ClassName { get; set; }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

xaml代码

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="*"/>
        Grid.RowDefinitions>
        <Label FontSize="50" Grid.Row="0">Page1Label>
        <DataGrid  x:Name ="dataGrid"  Grid.Row="1"/>------------列表组件
    Grid>
Page>
1
2
3
4
5
6
7
8
9

• DataContext 绑定数据
• ItemsSource=“{Binding Path = Data}” 属性绑定数据模型。

 //         获得mvvm数据中的  UserFrom 类中的 Data属性数据集合

namespace WpfApp1{
    public partial class Page1 : Page{
        public Page1(){
            InitializeComponent();
            //数据模型装入数据内容
            List list = new List();
            list.Add(new Test { Subj = "备注1", Points = 15, Name = "zhtbs", ClassName = "2年7" });
            list.Add(new Test { Subj = "备注2", Points = 16, Name = "kkk", ClassName = "2年7" });
            list.Add(new Test { Subj = "备注3", Points = 14, Name = "zzz", ClassName = "2年7" });
           var from = new UserFrom();//定义 mvvm数据模型
            from.Data = list;
            this.DataContext = from;//DataGrid组件 装入数据模型
        }
        // mvvm 数据模型
        public class UserFrom{
            public List Data { get; set; }//DataGrid组件内容
        }
        public class Test{//DataGrid组件数据模型
            public string Subj { get; set; }
            public int Points { get; set; }
            public string Name { get; set; }
            public string ClassName { get; set; }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

DataGrid列设置

使用默认的DataGrid组件的列设置，列数名称是取得数据模型的属性名称。如果需要自己定义列的名称，可以使用DataGrid组件中的Columns标签来设置列的内容信息。

• AutoGenerateColumns 是否自动生成数据模型中的列信息

<DataGrid ItemsSource="{Binding Path = Data}" x:Name ="dataGrid"   
          Grid.Row="1" 
          AutoGenerateColumns="False">----------使用自定义列设置
    <DataGrid.Columns>
        <DataGridTextColumn
                    Width="200"
                    MinWidth="50"
                    Binding="{Binding Name}"---列对应的数据模型中的数据
                    Header="名称" />-----------列数据名称
        <DataGridTextColumn
                    Width="150"
                    Binding="{Binding Points}"
                    Header="分数" />
        <DataGridTextColumn
                    Width="*"
                    Binding="{Binding ClassName}"
                    Header="班级" />
    DataGrid.Columns>
DataGrid>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

DataGrid行属性RowStyle

设置数据表格组件的行宽组件功能。

• AlternationCount：设置ItemControl中交替项的数据，可以理解为各几行换色设置。

<DataGrid ItemsSource="{Binding Path = Data}" x:Name ="dataGrid"  
          Grid.Row="1" 
          AutoGenerateColumns="False" 
          AlternationCount="2">-----------------------------AlternationIndex属性对应关系
            <DataGrid.RowStyle>
                <Style TargetType="{x:Type DataGridRow}">  
                    
                        "AlternationIndex" Value="0">
                            "Background" Value="#ffeedd" />
                        
                        "AlternationIndex" Value="1">
                            "Background" Value="#ff22dd" />
                        
                        "IsSelected"
                        Value="True">
                            "BorderBrush"
                        Value="Blue" />
                            "BorderThickness"
                        Value="2" />
                        
                    
                Style>
            DataGrid.RowStyle>
            <DataGrid.Columns>
                <DataGridTextColumn
                    Width="200"
                    MinWidth="50"
                    Binding="{Binding Name}"
                    Header="名称" />
                <DataGridTextColumn
                    Width="150"
                    Binding="{Binding Points}"
                    Header="分数" />
                <DataGridTextColumn
                    Width="*"
                    Binding="{Binding ClassName}"
                    Header="班级" />
            DataGrid.Columns>
DataGrid>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39