WPF中设置DataGrid中DataGridColumn列的普通样式和编辑样式

DataGridColumn的派生类：

 

一般情况下DataGridBoundColumn和DataGridComboBoxColumn足以满足多数列的样式，如果需要自定义列样式，则可以使用DataGridTemplateColumn类型。

 

在设置列编辑样式之前，我们先创建一个简单的DataGrid，分别显示名称（用默认的DataGridTextColumn），和分数（使用DataGridTemplateColumn来定义自定义模板：一个ProgressBar）：

1. <DataGrid Name="dataGrid" AutoGenerateColumns="False">  
2.  
3.         <DataGrid.Columns>  
4.  
5.             <DataGridTextColumn Header="姓名"   
6.  
7.                                Binding="{Binding Name}" 
8.  
9.                                Width="*">  
10.  
11.             </DataGridTextColumn>  
12.  
13.             <DataGridTemplateColumn Header="分数" 
14.  
15.                                    Width="2*">  
16.  
17.                 <DataGridTemplateColumn.CellTemplate>  
18.  
19.                     <DataTemplate>  
20.  
21.                         <ProgressBar Value="{Binding Score}"/>  
22.  
23.                     </DataTemplate>  
24.  
25.                 </DataGridTemplateColumn.CellTemplate>  
26.  
27.             </DataGridTemplateColumn>  
28.  
29.         </DataGrid.Columns>  
30.  
31.     </DataGrid>  

背后数据代码是这样：

1. dataGrid.ItemsSource = new people[]  
2.  
3.             {  
4.  
5.                 new people(){ Name = "王", Score = 100 },  
6.  
7.                 new people(){ Name = "刘", Score = 30 },  
8.  
9.                 new people(){ Name = "李", Score = 86 },  
10.  
11.                 new people(){ Name = "赵", Score = 50 }  
12.  
13.             };  
14.  
15.             //people类就不用再说了，两个属性：Name和Score  

结果就是：

 

第一列默认是可以编辑的（由于使用默认的DataGridTextColumn），而第二列我们只定义了显示的模板，无法实现编辑。
 

1：设置DataGridBoundColumn

从上面类型树上可以看到，DataGridBoundColumn是DataGridTextColumn，DataGridHyperlinkColumn和DataGridCheckBoxColumn的父类。作为父类，DataGridBoundColumn定义了两个属性来设置这些子类的普通样式和编辑样式。分别是ElementStyle和EditingElementStyle。它们都是Style对象（WPF中的样式）。这个Style的TargetType根据列的类型所变化。比如DataGridTextColumn，普通样式是针对TextBlock的。而编辑样式则应该针对TextBox。而DataGridCheckBoxColumn得普通样式和编辑样式都应该针对CheckBox的。

 

所以把上面的XAML中的第一个列这样设置：

1. <DataGridTextColumn Header="姓名"   
2.  
3.                                Binding="{Binding Name}" 
4.  
5.                                Width="*"> 
6.  
7.                 <DataGridTextColumn.ElementStyle> 
8.  
9.                     <Style TargetType="TextBlock"> 
10.  
11.                         <Setter Property="Foreground" Value="Red"/> 
12.  
13.                         <Setter Property="TextAlignment" Value="Center"/> 
14.  
15.                     </Style> 
16.  
17.                 </DataGridTextColumn.ElementStyle> 
18.  
19.                 <DataGridTextColumn.EditingElementStyle> 
20.  
21.                     <Style TargetType="TextBox"> 
22.  
23.                         <Setter Property="Foreground" Value="White"/> 
24.  
25.                         <Setter Property="Background" Value="Gray"/> 
26.  
27.                         <Setter Property="BorderBrush" Value="Navy"/> 
28.  
29.                         <Setter Property="BorderThickness" Value="2"/> 
30.  
31.                     </Style> 
32.  
33.                 </DataGridTextColumn.EditingElementStyle> 
34.  
35.             </DataGridTextColumn> 

结果：

2：设置DataGridComboBoxColumn

OK，虽然DataGridComboBoxColumn没有继承与DataGridBoundColumn，但是它和DataGridBoundColumn一样，同样有ElementStyle和EditingElementStyle这两个属性。当然对于DataGridComboBoxColumn，显然样式都要针对ComboBox的，使用上则和上面讲的的一样。

3：设置DataGridTemplateColumn

对于DataGridTemplateColumn，显然CellTemplate就是该列的普通显示样式了。对于编辑样式则可以使用EditingCellTemplate属性。

 

再重新定义下XAML：

1. <DataGridTemplateColumn Header="分数" 
2.  
3.                                    Width="2*"> 
4.  
5.                 <DataGridTemplateColumn.CellTemplate> 
6.  
7.                     <DataTemplate> 
8.  
9.                         <ProgressBar Value="{Binding Score}"/> 
10.  
11.                     </DataTemplate> 
12.  
13.                 </DataGridTemplateColumn.CellTemplate> 
14.  
15.                 <DataGridTemplateColumn.CellEditingTemplate> 
16.  
17.                     <DataTemplate> 
18.  
19.                         <StackPanel> 
20.  
21.                             <TextBlock Text="{Binding Score}" 
22.  
23.                                       TextAlignment="Center"/> 
24.  
25.                             <Slider Value="{Binding Score,UpdateSourceTrigger=PropertyChanged}" 
26.  
27.                                    Maximum="100"/> 
28.  
29.                         </StackPanel> 
30.  
31.                     </DataTemplate> 
32.  
33.                 </DataGridTemplateColumn.CellEditingTemplate> 
34.  
35.             </DataGridTemplateColumn> 

结果：