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

DataGridColumn的派生类:

image

 

一般情况下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  

结果就是:

image

 

第一列默认是可以编辑的(由于使用默认的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> 

结果:

image


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> 

结果:

image


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值