在《WPF 4 DataGrid 控件（基本功能篇）》中我們已經(jīng)學(xué)習(xí)了DataGrid 的基本功能及使用方法。本篇將繼續(xù)介紹自定義DataGrid 樣式的相關(guān)內(nèi)容，其中將涉及到ColumnHeader、RowHeader、Row、Cell 的各種樣式設(shè)置。

ColumnHeaderStyle 屬性

　　一般來(lái)講列表頭是用戶首先注意的內(nèi)容，那么如何在DataGrid 中設(shè)計(jì)一個(gè)美觀的表頭呢。我們既可以在<DataGrid>中通過(guò)<DataGrid.ColumnHeaderStyle>來(lái)全局定義；也可以針對(duì)個(gè)別列在<DataGrid.Columns>中通過(guò)<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>

　　 其效果如下圖所示，Name、Age、Sex 列會(huì)按各自的樣式顯示。未定義樣式的Pass Exam 和Email 列將按<DataGrid.ColumnHeaderStyle>全局定義顯示，并且當(dāng)鼠標(biāo)移置到這兩列上方時(shí)會(huì)有"Sort by Column"提示信息。

RowHeaderStyle 屬性

　　列表頭介紹完了下面再來(lái)看看行表頭，其定義方式與列表頭相同，直接在<DataGrid>中加入<DataGrid.RowHeaderStyle>進(jìn)行全局定義，見(jiàn)如下代碼：

　　<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Content" Value=" ·¤"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="SkyBlue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ToolTip" Value="Select this Row"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowHeaderStyle>
... ...

效果圖：

RowStyle 屬性

　　接下來(lái)我們來(lái)為行設(shè)置樣式，使每行的顏色變為藍(lán)色，并且當(dāng)鼠標(biāo)移至行上方時(shí)，其背景顏色會(huì)變?yōu)榛疑淖诸伾優(yōu)榘咨?/p>

　　... ...
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="LightBlue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
Style>
</DataGrid.RowStyle>
... ...

　　效果圖：

CellStyle 屬性

　　單元格部分我們繼續(xù)制作一個(gè)動(dòng)態(tài)樣式，當(dāng)鼠標(biāo)點(diǎn)擊單元格后，其背景色將變?yōu)榫G色。

　　... ...
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="SeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
... ...

　　效果圖：