WPF 4 DataGrid 進階樣式完全指南：ColumnHeader、RowHeader、Row、Cell 深度自定義

DataGrid 是 WPF 數據展示的核心控件，其視覺樹層級豐富，支援從整體到局部的多層次樣式自定義。本文系統講解四大樣式屬性的聲明式配置與觸發器互動技巧。

樣式層級架構

1. ColumnHeaderStyle：列表頭樣式

全域樣式（漸層背景 + 懸停提示）

<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.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="ToolTip" Value="Click to Sort"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.ColumnHeaderStyle>

單列覆蓋樣式（Name 欄位藍色系）

<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>
    </DataGridColumn.HeaderStyle>
</DataGridTextColumn>

2. RowHeaderStyle：行表頭樣式

<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>

3. RowStyle：數據行樣式

基礎藍色 + 懸停變灰白字

<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>
            <!-- 交替行顏色 -->
            <Trigger Property="AlternationIndex" Value="1">
                <Setter Property="Background" Value="AliceBlue"/>
            </Trigger>
            <!-- 選中行 -->
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="DodgerBlue"/>
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>

4. CellStyle：單元格樣式

選中單元格綠色高亮

<DataGrid.CellStyle>
    <Style TargetType="DataGridCell">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="SeaGreen"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush" Value="DarkGreen"/>
            </Trigger>
            <!-- 編輯狀態 -->
            <Trigger Property="IsEditing" Value="True">
                <Setter Property="Background" Value="LightYellow"/>
            </Trigger>
            <!-- 錯誤驗證 -->
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="Background" Value="MistyRose"/>
                <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.CellStyle>

進階技巧：多重觸發條件與優先級控制

MultiTrigger：滑鼠懸停且未選中時

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsSelected" Value="False"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="LightCyan"/>
</MultiTrigger>

DataTrigger：根據資料值動態樣式

<DataTrigger Binding="{Binding Pass}" Value="False">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>

完整 DataGrid 樣式整合範例

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
          SelectionUnit="CellOrRowHeader" IsReadOnly="True"
          AlternationCount="2">  <!-- 啟用交替行 -->
    <DataGrid.ColumnHeaderStyle> ... </DataGrid.ColumnHeaderStyle>
    <DataGrid.RowHeaderStyle> ... </DataGrid.RowHeaderStyle>
    <DataGrid.RowStyle> ... </DataGrid.RowStyle>
    <DataGrid.CellStyle> ... </DataGrid.CellStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" 
            HeaderStyle="{StaticResource NameHeaderStyle}"/>
        <DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
        <DataGridComboBoxColumn Header="Sex" SelectedItemBinding="{Binding Sex}" 
            ItemsSource="{Binding Source={StaticResource sexEnum}}"/>
        <DataGridCheckBoxColumn Header="Pass" Binding="{Binding Pass}"/>
        <DataGridHyperlinkColumn Header="Email" Binding="{Binding Email}"/>
    </DataGrid.Columns>
</DataGrid>

效能與維護建議

• 樣式資源化：將 Style 定義於 `Window.Resources` 或 `ResourceDictionary`，多處複用
• 避免過度視覺樹：複雜 Template 會增加渲染開銷，大數據量時優先用 Setter 屬性
• Virtualization：確保 `EnableRowVirtualization=True`、`EnableColumnVirtualization=True`（預設開啟）
• AlternationCount：設定 >1 啟用交替行，配合 `AlternationIndex` Trigger 實現斑馬紋

總結

DataGrid 樣式系統遵循「全域基礎 + 局部覆蓋 + 觸發器動態」模式。掌握 ColumnHeaderStyle/HeaderStyle、RowHeaderStyle、RowStyle、CellStyle 四大屬性與 `Trigger`/`MultiTrigger`/`DataTrigger` 三種觸發器，即可構建專業級、高可用性的數據網格介面。