WPF 4 DataGrid 控件（自定义样式篇）

WPF 4 DataGrid 控件（自定义样式篇）2012-07-19 博客园李敬然在《WPF 4 DataGrid 控件（基本功能篇）》中我们已经学习了DataGrid 的基本功能及使用方法。本篇将继续介绍自定义DataGrid 样式的相关内容，其中将涉及到ColumnHeader、RowHeader、Row、Cell 的各种样式设置。

ColumnHeaderStyle 属性

一般来讲列表头是用户首先注意的内容，那么如何在DataGrid 中设计一个美观的表头呢。我们既可以在<DataGrid>中通过 <DataGrid.ColumnHeaderStyle>来全局定义；也可以针对个别列在<DataGrid.Columns>中通过 <DataGridColumn.HeaderStyle>定义。

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
       SelectionUnit="CellOrRowHeader" IsReadOnly="True">
   <DataGrid.ColumnHeaderStyle>
     <Style TargetType="DataGridColumnHeader">
       <Setter Property="Background">
         <Setter.Value>
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
             <GradientStop Color="White" Offset="0"/>
             <GradientStop Color="Yellow" Offset="0.5"/>
             <GradientStop Color="White" Offset="1"/>
           </LinearGradientBrush>
         </Setter.Value>
       </Setter>
       <Setter Property="Foreground" Value="Black"/>
       <Setter Property="FontSize" Value="13" />
     </Style>
   </DataGrid.ColumnHeaderStyle>

   <DataGrid.Columns>
     <DataGridTextColumn Header="Name" Binding="{Binding Name}">
       <DataGridColumn.HeaderStyle>
         <Style TargetType="DataGridColumnHeader">
           <Setter Property="Background">
             <Setter.Value>
               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                 <GradientStop Color="White" Offset="0"/>
                 <GradientStop Color="SkyBlue" Offset="0.5"/>
                 <GradientStop Color="White" Offset="1"/>
               </LinearGradientBrush>
             </Setter.Value>
           </Setter>
           <Setter Property="Foreground" Value="Black"/>
           <Setter Property="FontSize" Value="13"/>
           <Setter Property="Width" Value="80"/>
           <Style.Triggers>
             <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="ToolTip" Value="Sort by Column"/>
             </Trigger>
           </Style.Triggers>
         </Style>
       </DataGridColumn.HeaderStyle>
     </DataGridTextColumn>

     <DataGridTextColumn Header="Age" Binding="{Binding Age}">
       <DataGridColumn.HeaderStyle>
         <Style TargetType="DataGridColumnHeader">
           <Setter Property="Background">
             <Setter.Value>
               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                 <GradientStop Color="White" Offset="0"/>
                 <GradientStop Color="LightGreen" Offset="0.5"/>
                 <GradientStop Color="White" Offset="1"/>
               </LinearGradientBrush>
             </Setter.Value>
           </Setter>
           <Setter Property="Foreground" Value="Black"/>
           <Setter Property="FontSize" Value="13"/>
           <Setter Property="Width" Value="50"/>
         </Style>
       </DataGridColumn.HeaderStyle>
     </DataGridTextColumn>

     <DataGridComboBoxColumn Header="Sex" 
                 SelectedItemBinding="{Binding Sex}" 
                 ItemsSource="{Binding Source={StaticResource sexEnum}}">
       <DataGridColumn.HeaderStyle>
         <Style TargetType="DataGridColumnHeader">
           <Setter Property="Background">
             <Setter.Value>
               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                 <GradientStop Color="White" Offset="0"/>
                 <GradientStop Color="LightPink" Offset="0.5"/>
                 <GradientStop Color="White" Offset="1"/>
               </LinearGradientBrush>
             </Setter.Value>
           </Setter>
           <Setter Property="Foreground" Value="Black"/>
           <Setter Property="FontSize" Value="13"/>
           <Setter Property="Width" Value="70"/>
         </Style>
       </DataGridColumn.HeaderStyle>
     </DataGridComboBoxColumn>

     <DataGridCheckBoxColumn Header="Pass Exam？" Width="100" 
                 Binding="{Binding Pass}"/>

     <DataGridHyperlinkColumn Header="Email" Width="150" 
                  Binding="{Binding Email}"/>
   </DataGrid.Columns>
</DataGrid>