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