WPF 自定義DataGrid控件樣式

内容轉自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html

一、DataGrid基本樣式（一）

小剛已經把DataGrid的樣式寫的很完整了，這裡我做點補充，先貼上基本樣式的代碼：

<!--DataGrid樣式-->
        <Style TargetType="DataGrid">
            <!--網格線顔色-->
            <Setter Property="CanUserResizeColumns" Value="false"/>
            <Setter Property="Background" Value="#FFF7EDAD" />
            <Setter Property="BorderBrush" Value="#FFF5F7F5" />
            <Setter Property="HorizontalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
            <Setter Property="VerticalGridLinesBrush">
                <Setter.Value>
                    <SolidColorBrush Color="#d6c79b"/>
                </Setter.Value>
            </Setter>
        </Style>

        <!--标題欄樣式-->
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MinHeight" Value="28" />
            <Setter Property="Foreground" Value="#323433" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridColumnHeader">
                        <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1" 
                             BorderBrush="#e6dbba" 
                              Width="Auto">
                            <Grid >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0" 
                            VerticalAlignment="Center" RenderTransformOrigin="1,1" />
                                <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Height" Value="25"/>
        </Style>
        <!--行樣式觸發-->
        <!--背景色改變必須先設定cellStyle 因為cellStyle會覆寫rowStyle樣式-->
        <Style  TargetType="DataGridRow">
            <Setter Property="Background" Value="#F2F2F2" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <!--隔行換色-->
                <Trigger Property="AlternationIndex" Value="0" >
                    <Setter Property="Background" Value="#e7e7e7" />
                </Trigger>
                <Trigger Property="AlternationIndex" Value="1" >
                    <Setter Property="Background" Value="#f2f2f2" />
                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                    <!--<Setter Property="Foreground" Value="White"/>-->
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!--單元格樣式觸發-->
        <Style TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DataGridCell">
                        <TextBlock TextAlignment="Center" VerticalAlignment="Center"  >
                           <ContentPresenter />
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
            </Style.Triggers>
        </Style>

引用示例：

<DataGrid x:Name="DataGrid" AutoGenerateColumns="False"  VerticalAlignment="Top"
                  CanUserSortColumns="False"     Margin="5" IsReadOnly="True"
                  CanUserResizeColumns="False" CanUserResizeRows="False"  SelectionMode="Single"
                  CanUserReorderColumns="False" AlternationCount="2"  RowHeaderWidth="0" CanUserAddRows="False" >
     <DataGrid.Columns>
           <DataGridTextColumn Header="名稱" Width="150"  Binding="{Binding  Name}"/>
           <DataGridTextColumn Header="班級"   Width="120"  Binding="{Binding Class}"/>
           <DataGridTextColumn Header="性别"  Width="120"  Binding="{Binding Sex}"/>
           <DataGridTextColumn Header="班級排名"  Width="130"  Binding="{Binding ClassRank}"/>
           <DataGridTextColumn Header="全校排名"  Width="140"  Binding="{Binding SchoolRank}"/>
     </DataGrid.Columns>
</DataGrid>

初始化綁定資料C#代碼：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            StudentList = new List<StudentInfo>()
            {
                new StudentInfo()
                {
                    Name="張三",
                    Class="三班",
                    Sex="男",
                    ClassRank=10,
                    SchoolRank=103
                },
                 new StudentInfo()
                {
                    Name="李四",
                    Class="三班",
                    Sex="男",
                    ClassRank=12,
                    SchoolRank=110
                },
                  new StudentInfo()
                {
                    Name="李梅",
                    Class="三班",
                    Sex="女",
                    ClassRank=3,
                    SchoolRank=70
                },
             };
            this.DataGrid.ItemsSource = StudentList;
        }

        public List<StudentInfo> StudentList { get; set; }
        public class StudentInfo
        {
            public string Name { get; set; }
            public string Class { get; set; }
            public string Sex { get; set; }
            public int ClassRank { get; set; }
            public int SchoolRank { get; set; }
        }

效果展示：

二、DataGrid基本樣式（二）

上面的代碼實作了隔行換色的效果，但是沒有滑鼠選中效果。另外有些使用者希望能夠進行列頭拖動及排序。那麼就需要做以下更改：

添加DataGridRow樣式：

<Style x:Key="AlertCount1" TargetType="DataGridRow">
            <Setter Property="Background" Value="#F2F2F2" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="0" >
                    <Setter Property="Background" Value="White" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="Black"/>
                    <Setter Property="Background" Value="LightGray"/>
                </Trigger>
            </Style.Triggers>
        </Style>

在引用時，設定DataGrid的RowStyle="{StaticResource AlertCount1}"且AlternationCount="1"。這樣就可以實作突出選中效果，取消隔行顯示效果。要實作表頭拖動，使用上面的樣式代碼是不行的，上面的樣式代碼去掉了拖動的控件。要實作拖動需要将其加上。

下面是對DataGrid控件的補充：

控件常用方法：

BeginEdit：使DataGrid進入編輯狀态。

CancelEdit：取消DataGrid的編輯狀态。

CollapseRowGroup：閉合DataGrid的行分組。

CommitEdit：确認DataGrid的編輯完成。

ExpandRowGroup：展開DataGrid的行分組。

GetGroupFromItem：從具體Item中得到分組。

ScrollIntoView：滾動DataGrid視圖。

控件常用屬性：

AlternatingRowBackground：擷取或設定一個筆刷用來描繪DataGrid奇數行的背景。

AreRowDetailsFrozen：擷取或設定一個值用來判斷是否當機每行内容的詳細資訊。

AreRowGroupHeadersFrozen：擷取或設定一個值用來判斷是否當機分組行的頭部。

AutoGenerateColumns：擷取或設定一個值用來判斷是否允許自動生成表列。

CanUserReorderColumns：擷取或設定一個值用來判斷是否允許使用者重新排清單列的位置。

CanUserSortColumns：擷取或設定一個值用來判斷是否允許使用者按列對表中内容進行排序。

CellStyle：擷取或設定單元格的樣式。

ColumnHeaderHeight：擷取或設定列頭的高度。

ColumnHeaderStyle：擷取或設定列頭的樣式。

Columns：擷取元件中包含所有列的集合。

ColumnWidth：擷取或設定列寬。

CurrentColumn：擷取或設定包含目前單元格的列。

CurrentItem：擷取包含目前單元格且與行綁定的資料項。

DragIndicatorStyle：擷取或設定當拖曳列頭時的樣式。

DropLocationIndicatorStyle：擷取或設定呈現列頭時的樣式。

FrozenColumnCount：擷取或設定當機列的個數。

GridLinesVisibility：擷取或設定網格線的顯示形式。

HeadersVisibility：擷取或設定行頭及列頭的顯示形式。

HorizontalGridLinesBrush：擷取或設定水準網格線的筆刷。

HorizontalScrollBarVisibility：擷取或設定水準滾動條的顯示樣式。

IsReadOnly：擷取或設定DataGrid是否為隻讀。

MaxColumnWidth：擷取或設定DataGrid的最大列寬。

MinColumnWidth：擷取或設定DataGrid的最小列寬。

RowBackground：擷取或設定用于填充行背景的筆刷。

RowDetailsTemplate：擷取或設定被用于顯示行詳細部分的内容的模闆。

RowDetailsVisibilityMode：擷取或設定一個值用以判定行詳細部分是否顯示。

RowGroupHeaderStyles：擷取呈現行分組頭部的樣式。

RowHeaderStyle：擷取或設定呈現行頭的樣式。

RowHeaderWidth：擷取或設定行頭的寬度。

RowHeight：擷取或設定每行的高度。

RowStyle：擷取或設定呈現行時的樣式。

SelectedIndex：擷取或設定目前選中部分的索引值。

SelectedItem：擷取或設定與目前被選中行綁定的資料項。

SelectedItems：擷取與目前被選中的各行綁定的資料項們的清單（List）。

SelectionMode：擷取或設定DataGrid的選取模式。

VerticalGridLinesBrush：擷取或設定垂直網格線的筆刷。

VerticalScrollBarVisibility：擷取或設定垂直滾動條的顯示樣式。

所有代碼已經上傳到github：https://github.com/cmfGit/WpfDemo.git

作者：一葉知秋

出處：http://www.cnblogs.com/xiaomingg/

GitHub：https://github.com/caomfan/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接配接，否則保留追究法律責任的權利。

WPF 自定義DataGrid控件樣式

一、DataGrid基本樣式（一）

二、DataGrid基本樣式（二）

繼續閱讀

Unity遊戲開發背景知識

vs編譯完提示不支援嘗試的執行操作

【C# MySQL】第一次使用C#對MySQL進行操作的心得

C#基礎——與C#的第一次邂逅聲明：IDE：第一個C#果實：Console淺析：總結：

英文月日年日期格式的實作

C# 位元組數組 byte[] 快速比較算法

C# 位元組數組、字元串轉化位元組數組轉字元串字元串轉位元組數組位元組數組轉整數整數轉位元組數組字元串轉位元組字元串轉數值數值轉字元串

C#用Zlib壓縮或解壓縮位元組數組

C# 比較兩個位元組數組是否相等

對于VS中scanf報錯永久解決，建立源檔案自動添加#define _CRT_SECURE_NO_WARNINGS 1

《C#進階程式設計》讀書筆記 -索引

CQ V1.0分詞bates(基于雙數組tire樹)—應該是目前最快的中文分詞算法

C#多線程——前台線程和背景線程

C#+ArcEngine代碼檢測ArcEngine Runtime是否安裝以及是否授權

七牛雲-C#SDK-上傳-前期準備

WPF開發帶水印的輸入框