WPF之DataGrid應用（轉

阿新 • • 發佈：2019-02-05

有幫助，所以轉了

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

由於涉及的應用比較多，所以篇幅會很長。但可以確保各個版塊相互獨立，總共4個部分

1.資料繫結

2.DataGrid的增改刪功能

3.DataGrid的分頁實現

4.DataGrid的樣式設計

先上一張截圖，讓你大概知道自己需要的功能是否在這張圖裡有所實現。

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

1.資料繫結（涉及DataGrid繫結和Combox繫結）

在DataGrid 中同時包含“自動生成列”與“使用者自定義列” 由屬性AutoGenerateColumns控制。

預設情況下， DataGrid 將根據資料來源自動生成列。下圖列出了生成的列型別。

如果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>
</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}}"/>
<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=性別}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<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>
</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>

首先我們要獲取CheckBox中的值，有哪些是被選中的。顯然CheckBox裡面還必須繫結值，並且還需要一個事件。給CheckBox新增的程式碼如下

後臺程式碼

//由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">
</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>
</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>
</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>
lt;/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>
</DataGrid>

⑤ 讓使用者在單元格獲得焦點時編輯 ComboBox

其實這不屬於樣式的範疇了，但我喜歡把改善使用者體驗歸於這一類。當我們的表格裡有類似ComboBox的控制元件時（如： DatePicker 控制元件等）。我們編輯這些控制元件時，首先第一次單擊獲取單元格焦點，

第二次點選才能獲取編輯時的焦點，也就是使用者必須單擊2次才能進行操作。這種機制其實是適合文字框控制元件的，但對於其它控制元件，像ComboBox就顯得很不方便了。所以我們要做的就是單擊第一次的

時候使用者就可以編輯ComboBox。

接下來我要在DataGrid添加了三個新屬性（RowDetailsVisibilityMode、SelectionMode 和 SelectionUnit）和一個新的事件處理程式 (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>

費了不少時間，希望可以幫助大家。有什麼地方有誤歡迎大家指正！！！

WPF之DataGrid應用（轉

WPF之DataGrid應用（轉

硬件工程師必會電路模塊之MOS管應用（轉）

詳解CSS display:inline-block的應用（轉）

Druid 大數據分析之快速應用（單機模式）

app自動化測試之實戰應用（百度app簡單測試）

mysql性能優化之索引優化（轉）

聊聊高併發系統之降級特技（轉）

win10系統安裝之GHOST還原（轉+編輯）

【Fiddler學習】Fiddler簡介和Web抓包應用（轉）

PyTorch原始碼解讀之torchvision.transforms（轉）

PyTorch源碼解讀之torchvision.transforms（轉）

Java基礎之反射應用（如何獲取物件的構造方法、屬性以及、基本方法）

.net跨平臺之mono應用（一）——Linux系統初識

JavaSpring之Aop應用（java專案）

複習之SpringBoot應用（一）——SpringBoot檔案上傳

位運算在角色許可權設計中的應用（轉）

拿到6個offer的面試經驗-2015年硬體類筆面試經歷之面試篇（轉）

設計模式之策略模式（轉）

優化演算法之牛頓法（轉）

透視MySQL資料庫之更新語句（轉貼自csdn）

WPF之DataGrid應用 （轉

相關推薦

WPF之DataGrid應用（轉