WPF的DataGrid用法-小白向

前幾天打算嘗試下DataGrid的用法，起初覺得應該很簡單，可後來被各類使用方法和功能實現所折磨。網絡上的解決方法太多，但也太雜。無法子，我只好硬着頭皮閱覽各類文獻資料，而後不斷的去嘗試，總算小有成果。所以，把我學到的和你們分享一下，相信這篇文章會讓你再很短的時間內學會DataGrid的大部分主要功能，並且不少難點均可以在裏面找到解決方案。

因爲涉及的應用比較多，因此篇幅會很長。但能夠確保各個版塊相互獨立，總共4個部分

1.數據綁定

2.DataGrid的增改刪功能

3.DataGrid的分頁實現

4.DataGrid的樣式設計

先上一張截圖，讓你大概知道本身須要的功能是否在這張圖裏有所實現。

PS：使用技術：WPF + ADO.NET Entity Framework

---

 

 

 

1.數據綁定（涉及DataGrid綁定和Combox綁定）

 

在DataGrid 中同時包含「自動生成列」與「用戶自定義列」 由屬性AutoGenerateColumns控制。

默認狀況下， DataGrid 將根據數據源自動生成列。 下圖列出了生成的列類型。

若是AutoGenerateColumns="True" ，咱們只須要以下幾行代碼

<DataGrid Name="dataGrid1" AutoGenerateColumns="True" />

後臺dataGrid1.ItemsSource = infoList; //infoList爲內容集合（這是我從數據庫中獲取的記錄集合 類型爲List<T>）

PS:由於這裏給dataGrid1綁定了數據源，因此下面綁定的字段都是infoList中的字段名稱，一樣也對應着我數據表中的字段名。裏面包含FID,公司名稱，職員姓名，性別，年齡，職務。解釋下，怕你們沒法理解Binding 後面的值是如何來的了

顯然這種數據綁定很是的容易，若是對錶格要求不高，這中無疑是最簡單方便的。

 

若是AutoGenerateColumns="False" 表格字段的顯示就要靠咱們手動去完成了。這個也是數據綁定的重點，由於實際應用中咱們大多都是自定義去完成DataGrid的數據綁定。

接下來貼出代碼（後面的全部功能均可以在此代碼基礎上添加和修改）

<Window x:Class="CSDN_C.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:assembly="clr-namespace:System;assembly=mscorlib" 
xmlns:local="clr-namespace:Demo" 
Title="MainWindow"  Loaded="Window_Loaded">
<Window.Resources>
  <ObjectDataProvider x:Key="keySex" MethodName="GetValues" ObjectType="{x:Type assembly:Enum}">
    <ObjectDataProvider.MethodParameters>
      <x:Type Type="local:Sex"></x:Type>   <!--引用後臺的枚舉類型，爲字段‘性別’提供數據源。上面引用了命名空間Demo-->
    </ObjectDataProvider.MethodParameters>
  </ObjectDataProvider>
</Window.Resources>
 
<Grid> 
  <DataGrid Name="dataGrid1"  AutoGenerateColumns="False">
    <DataGrid.Columns>
      <DataGridTemplateColumn Header="操做" Width="40">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <CheckBox ></CheckBox>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
      <DataGridTextColumn Header="公司名稱" Width="80" Binding="{Binding 公司名稱, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
      <DataGridTextColumn Header="姓名" Width="80" Binding="{Binding 職員姓名, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
      <DataGridComboBoxColumn Header="sex" SelectedItemBinding="{Binding 性別}" ItemsSource="{Binding Source={StaticResource keySex}}"/>
      <!--Combox綁定,獲取上面定義的資源keySex.綁定性別-->
      <DataGridTextColumn Header="年齡" Width="80" Binding="{Binding 年齡, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
      <DataGridTextColumn Header="職務" Width="80" Binding="{Binding 職務, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    </DataGrid.Columns>
  </DataGrid>
</Grid>
</Window>

 

後臺

namespace Demo{
/// <summary>
/// MainWindow.xaml 的交互邏輯
/// </summary>
public enum Sex { 男,女 };  //注意 寫在命名空間內 ，不要寫在類裏，不然臺前local:Sex找不到路徑
 
}

 

當咱們綁定好數據運行程序的時候，會發現 DataGridComboBoxColumn下拉框裏雖然綁定了值，可是他不會默認顯示出已經設定好的值。因此咱們就能夠擯棄這種現有的 DataGridComboBoxColumn，咱們用DataGrid樣板標籤DataGridTemplateColumn。

咱們在DataGridTemplateColumn標籤裏要用到2個控件，一個 TextBlock控件來顯示內容，另外一個ComBox來提供選擇。

因此咱們能夠用以下代碼替換掉

<DataGridComboBoxColumn Header="sex" SelectedItemBinding="{Binding 性別}" ItemsSource="{Binding Source={StaticResource keySex}}"/>

<DataGridTemplateColumn Header="性別">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=性別}"/>  <!--顯示狀態時顯示 TextBlock裏的值-->
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>  <!--編輯狀態就切換到ComboBox裏進行下拉選擇操做-->
                            <ComboBox x:Name="taskCombo" ItemsSource="{Binding Source={StaticResource keySex}}"  SelectedItem ="{Binding Path=性別}"  IsSynchronizedWithCurrentItem="False"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>

注意 CellTemplate和 CellEditingTemplate的區別

 

 

2.DataGrid的增改刪功能

  

①添加記錄行+編輯記錄行

 

因爲增長和編輯有必定的聯繫，因此就放一塊兒來討論

在上面的代碼處添加2個Button按鈕,DataGrid默認是輸入一行記錄後自動會生成一個新行（相似MSSQL數據庫添加表記錄）。由屬性 CanUserAddRows來控制 當 CanUserAddRows=false的時候就不會自動生成新行。爲了方便咱們本身來控制，因此在DataGrid裏面設置CanUserAddRows爲false.

<Grid> 
  <Button Content="添加"   Name="btnAdd"  Click=" btnAdd_Click" />
  <Button Content="保存"  Name="btnSave" Click="btnSave_Click" />
  <DataGrid Name="dataGrid1" AutoGenerateColumns="False"  CanUserAddRows="False">   <!--此時的DataGrid就沒法本身生成新行了-->
  </DataGrid>
</Grid>

 

後臺事件

 int judge = 0;   //0表示編輯狀態，1爲添加狀態。由於後面的增長和編輯都在同一個事件中，因此建一個變量來區分操做
 
 TB_Information  tbInfo = new TB_Information();    //這個類能夠供我調用裏面的方法來進行增刪改查的操做
 
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
 
        judge = 1;  //如今爲添加狀態     
 
       dataGrid1.CanUserAddRows = true;    //點擊添加後  將CanUserAddRows從新設置爲True，這樣DataGrid就會自動生成新行，咱們就能在新行中輸入數據了。
}
 
 
//如今咱們能夠添加新記錄了，咱們接下來要作的就是獲取這些新添加的記錄
 
//先聲明一個存儲新建記錄集的List<T>      這裏的Information是個人數據表實體類  裏面包含FID ，公司名稱，職員姓名，性別，年齡，職務
 
 List<Information> lstInformation = new List<Information>();
 
//咱們經過 RowEditEnding來獲取新增的記錄，就是每次編輯完行後，行失去焦點激發該事件。   更新記錄也是執行該事件
 
 private void dataGrid1_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)
{
     Information info = new Information();   //我本身的數據表實例類
      info = e.Row.Item as Information;        //獲取該行的記錄
      if (judge == 1)                                          //若是是添加狀態就保存該行的值到lstInformation中  這樣咱們就完成了新行值的獲取
      {
          lstInformation.Add(info);
      }
      else
      {  
          tbInfo.UpdInformation(info);            //若是是編輯狀態就執行更新操做  更新操做最簡單，由於你直接能夠在DataGrid裏面進行編輯，編輯完成後執行這個事件就完成更新操做了
      }
}
 
 
 
//獲取到記錄後，單擊保存按鈕就能夠保存lstInformation中的每一條記錄
private void btnSave_Click(object sender, RoutedEventArgs e)
{
       foreach (Information info in lstInformation)
       {
             tbInfo.InsInformation(info);      //執行插入方法，將記錄保存到數據庫
      }
            judge = 0;          //從新回到編輯狀態
            lstInformation.Clear();
           dataGrid1.CanUserAddRows = false;     //由於完成了添加操做 因此設置DataGrid不能自動生成新行了
           Binding(Num, 1);
}

 

這裏又會遇到一個問題。那就是更新數據的時候，發現數據更本就沒更新。跟蹤代碼會發現後臺獲得的值仍是原來的，沒法獲取編輯後的值。這個問題就是綁定模式的問題，咱們只需設置雙向綁定就能夠了。且做用對象是在屬性值更改的狀況下進行雙向綁定。 只要在前面的每一個表字段處加上 Mode=TwoWay, UpdateSourceTrigger=PropertyChanged問題就解決了

例如： 

<DataGridTextColumn Header="公司名稱" Width="80" Binding="{Binding 公司名稱, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

 

②刪除記錄

 

爲了有良好的用戶體驗，我就作了個能夠批量刪除的刪除功能。就是利用到CheckBox控件來完成。

以綁定代碼爲基礎添加代碼

<Grid>
<Button Content="添加" Name="btnAdd" Click="btnAdd_Click" />
<Button Content="保存" Name="btnSave" Click="btnSave_Click" />
<Button Content="刪除" Name="btnDelete" Click="btnDelete_Click" />

</Grid>

 

首先咱們要獲取CheckBox中的值，有哪些是被選中的。顯然CheckBox裏面還必須綁定值，而且還須要一個事件。給CheckBox添加的代碼以下

<DataTemplate>
<CheckBox Click="CheckBox_Click" Tag="{Binding FID}" ></CheckBox>
</DataTemplate>

 

後臺代碼

//由ChecBox的Click事件來記錄被選中行的FID
 
 List<int> selectFID = new List<int>();  //保存選中要刪除行的FID值
 
 private void CheckBox_Click(object sender, RoutedEventArgs e)
{
     CheckBox dg = sender as CheckBox;
     int FID = int.Parse(dg.Tag.ToString());   //獲取該行的FID
     var bl = dg.IsChecked;
     if (bl == true)
     {
        selectFID.Add(FID);         //若是選中就保存FID
     }
     else
     {
        selectFID.Remove(FID);  //若是選中取消就刪除裏面的FID
    }
}
 
//已經獲取到裏面的值了，接下來就只要完成刪除操做就能夠了  刪除事件以下
 
 private void btnDelete_Click(object sender, RoutedEventArgs e)
{
     foreach (int FID in selectFID)
    {
         tbInfo.DelInformation(FID);   //循環遍歷刪除裏面的記錄
    }
    //Binding(Num, 1);       //這個是我綁定的一個方法，做用是刪除記錄後從新給DataGrid賦新的數據源
}

  

 

3.DataGrid的分頁實現

  
原理：其實分頁功能的實現你們都清楚，無非就是把一個記錄集經過運算來刷選裏面對應頁碼的記錄。

接來下咱們再次添加新的代碼

<Grid>
<DataGrid  Name="dataGrid1" AutoGenerateColumns="False">
        <!--省略N個代碼-->
</DataGrid>
<StackPanel Orientation="Horizontal">
       <TextBlock Text="轉到" Margin="5"/>
       <TextBox Name="tbxPageNum" Text="" />
       <TextBlock Text="頁" />
       <Button Content="GO"   Click="btnGo_Click"/>
       <Button Name="btnUp" Content="上一頁"  VerticalAlignment="Center" Click="btnUp_Click"/> 
       <Button Name="btnNext" Content="下一頁"  VerticalAlignment="Center" Click="btnNext_Click"/>
       <TextBlock Height="20">
             <TextBlock Text="【共" />
             <TextBlock Name="tbkTotal" Foreground="Red" />
             <TextBlock Text="頁】" />
             <TextBlock Text="【當前" />
             <TextBlock Name="tbkCurrentsize" Foreground="Red" />
             <TextBlock Text="頁】" />
       </TextBlock>
</StackPanel>
</Grid>

 

首先咱們先寫個分頁的方法，供上面這些事件調用

後臺代碼

//number表示每一個頁面顯示的記錄數    currentSize表示當前顯示頁數
 
 private void Binding(int number, int currentSize)
{
      List<Information> infoList = new List<Information>();
      infoList = tbInfo.GetInformationList();      //獲取數據源
      int count = infoList.Count;          //獲取記錄總數
      int pageSize = 0;            //pageSize表示總頁數
      if (count % number == 0)
      {
           pageSize = count / number;
      }
      else
      {
           pageSize = count / number + 1;
      }
      tbkTotal.Text = pageSize.ToString();       
 
      tbkCurrentsize.Text = currentSize.ToString();   
      infoList = infoList.Take(number * currentSize).Skip(number * (currentSize - 1)).ToList();   //刷選第currentSize頁要顯示的記錄集
      dataGrid1.ItemsSource = infoList;        //從新綁定dataGrid1
}
 
 
 
//分頁方法寫好了 接下來就是響應下一頁，上一頁，和跳轉頁面的事件了
 
//先定義一個常量
 
 const int Num=12;  //表示每頁顯示12條記錄
 
//上一頁事件 
 
 private void btnUp_Click(object sender, RoutedEventArgs e)
{
     int currentsize = int.Parse(tbkCurrentsize.Text); //獲取當前頁數
     if (currentsize > 1)
     {
         Binding(Num, currentsize - 1);   //調用分頁方法
     }
}
 
 
//下一頁事件
private void btnNext_Click(object sender, RoutedEventArgs e)
{
     int total = int.Parse(tbkTotal.Text); //總頁數
     int currentsize = int.Parse(tbkCurrentsize.Text); //當前頁數
     if (currentsize < total)
    {
        Binding(Num, currentsize + 1);   //調用分頁方法
    }
}
 
 
//跳轉事件
private void btnGo_Click(object sender, RoutedEventArgs e)
{
    int pageNum = int.Parse(tbxPageNum.Text);
    int total = int.Parse(tbkTotal.Text); //總頁數
    if (pageNum >= 1 && pageNum <= total)
    {
       Binding(Num, pageNum);     //調用分頁方法
    }
}

 

 

4.DataGrid的樣式設計

爲何用WPF，不就是由於WPF擁有絢麗的設計頁面功能麼（固然遠不止這些）。雖然我美工這方面不好勁，可是最基本的設計咱們仍是要會一些。因此接下來作的工做主要就是給DataGrid上色了。（有些須要用到後臺代碼，也許不屬於樣式這類，但總歸是改變外觀，因此就放在一塊兒概括了）

 

①給DataGrid自動添加行序號+修改行表頭顏色

 

後臺代碼

//窗體加載事件
 
 private void Window_Loaded(object sender, RoutedEventArgs e)
{
    Binding(Num, 1);   //調用分頁方法  顯示第一頁
    dataGrid1.LoadingRow += new EventHandler<DataGridRowEventArgs>(dataGrid_LoadingRow);    //自動添加序號的事件  調用下面的dataGrid_LoadingRow
}
 
 public void dataGrid_LoadingRow(object sender, DataGridRowEventArgs e)
{
        e.Row.Header = e.Row.GetIndex() + 1;    //設置行表頭的內容值
}

 

接下來就能夠修改行表頭的顏色了

<DataGrid Name="dataGrid1">
   <DataGrid.RowHeaderStyle>
     <Style TargetType="DataGridRowHeader">
          <Setter Property="Width" Value="15"/>
          <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>
  </DataGrid.RowHeaderStyle>
<!--省略N個代碼-->
</DataGrid>

 

②給列表頭添加顏色

 

 <DataGrid Name="dataGrid1">
<!--給整個表頭添加顏色開始-->
          <DataGrid.ColumnHeaderStyle>
               <Style TargetType="DataGridColumnHeader">
                    <Setter Property="Background">
                         <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="White" Offset="0"/>
                                        <GradientStop Color="LightBlue" 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>
                <DataGridTemplateColumn Header="操做" Width="40">
                     <DataGridColumn.HeaderStyle>
                           <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"/>
                               <Setter Property="Width" Value="70"/>
                          </Style>
                    </DataGridColumn.HeaderStyle>
                </DataGridTemplateColumn>
          </DataGrid.Columns>
<!--給單個列表頭添加顏色結束-->
<!--省略N個代碼-->
</DataGrid>

 

③給行添加顏色+滑鼠事件

 

<DataGrid Name="dataGrid1">
     <DataGrid.RowStyle>
         <Style TargetType="DataGridRow">
                <Setter Property="Background" Value="LightBlue" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">     <!--當鼠標通過時 改變顏色-->
                         <Setter Property="Background" Value="SkyBlue"/>
                          <Setter Property="Foreground" Value="White"/>
                    </Trigger>
              </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
 <!--省略N個代碼-->
</DataGrid>

 

④給單元格添加顏色

 

<DataGrid Name="dataGrid1">
      <DataGrid.CellStyle>
          <Style TargetType="DataGridCell">
                <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">     <!--單元格被選中時 改變顏色-->
                              <Setter Property="Background" Value="LightPink"/>
                        </Trigger>
                </Style.Triggers>
          </Style>
</DataGrid.CellStyle>
 
<!--省略N個代碼-->
</DataGrid>

 
⑤ 讓用戶在單元格得到焦點時編輯 ComboBox

 

其實這不屬於樣式的範疇了，但我喜歡把改善用戶體驗歸於這一類。當咱們的表格裏有相似ComboBox的控件時（如： DatePicker 控件等）。咱們編輯這些控件時，首先第一次單擊獲取單元格焦點，第二次點擊才能獲取編輯時的焦點，也就是用戶必須單擊2次才能進行操做。這種機制實際上是適合文本框控件的，但對於其它控件，像ComboBox就顯得很不方便了。因此咱們要作的就是單擊第一次的時候用戶就能夠編輯ComboBox。

接下來我要在DataGrid添加了三個新屬性（RowDetailsVisibilityMode、SelectionMode 和 SelectionUnit）和一個新的事件處理程序 (SelectedCellsChanged)

前臺

<DataGrid Name="dataGrid1" CanUserAddRows="False" AutoGenerateColumns="False" RowEditEnding="dataGrid1_RowEditEnding"RowDetailsVisibilityMode="VisibleWhenSelected" SelectionMode="Extended" SelectionUnit="Cell" SelectedCellsChanged="dataGrid1_SelectedCellsChanged" >

</DataGrid>

 

後臺

如今就差一個 SelectedCellsChanged(選則單元格時出發該事件)事件的後臺代碼了

private void dataGrid1_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e)
{
     if (e.AddedCells.Count == 0)
          return;
     var currentCell = e.AddedCells[0];
     if (currentCell.Column == dataGrid1.Columns[3])   //Columns[]從0開始  我這的ComboBox在第四列  因此爲3
     {
            dataGrid1.BeginEdit();    //  進入編輯模式  這樣單擊一次就能夠選擇ComboBox裏面的值了
     }
}

 

⑥固定列表頭

 

這個很是簡單 只要在DataGrid裏添加一個屬性便可

<DataGrid FrozenColumnCount="1" >

<!--從1開始 1表示第一列 這裏若是要固定個人操做列就設置爲1-->

</DataGrid>

by:https://blog.csdn.net/sanjiawan/article/details/6785394