WPF Custom DataGrid ใน C # (2023)

การแนะนำ

WPF Custom DataGrid ใน C #ให้ข้อมูลโค้ดเพื่อสร้าง DataGrid แบบกำหนดเองของ WPF ที่มีคุณสมบัติในการค้นหาและกรองข้อมูล ที่นี่เราจะสาธิตการสร้าง WPF DataGrid แบบกำหนดเองโดยใช้โปรแกรมโดยใช้ C#

WPF Custom DataGrid ใน C #

การสาธิตนี้สร้างการควบคุม Custome DataGrid โดยสืบทอดคลาสการควบคุมฐาน System.Windoes.Controls.DataGrid และแทนที่วิธีการบางอย่างเพื่อใช้การค้นหาข้อมูลและตัวกรองข้อมูลตามอินพุตของผู้ใช้

ตารางข้อมูลที่กำหนดเองจะค้นหาข้อมูลจากแต่ละเซลล์และใช้สีพื้นหลังและสีพื้นหน้ากับเซลล์ที่ตรงตามเกณฑ์การค้นหา มีคุณสมบัติสาธารณะบางอย่างที่ช่วยในการค้นหาค่าของเซลล์ ได้รับด้านล่าง

ตัวกรองการค้นหา WPF DataGrid (WPF Custom DataGrid ใน C #)

คลาสกริดข้อมูลที่กำหนดเองนี้มีคุณสมบัติสาธารณะหนึ่งรายการที่ชื่อว่า IsFilter ที่เปิดใช้งาน DataGrid เพื่อกรองได้ หากคุณสมบัติ IsFilter เป็นจริง จะแสดงกล่องข้อความ (หากประเภทข้อมูลเป็นสตริงหรือ int ) และช่องทำเครื่องหมาย (หากประเภทข้อมูลเป็นบูลีน) ในส่วนหัวของคอลัมน์แต่ละรายการ นอกจากพร็อพเพอร์ตี้นี้แล้ว ยังประกอบด้วยพร็อพเพอร์ตี้อื่นๆ ด้วย ซึ่งจะกล่าวถึงด้านล่าง

การค้นหา WPF DataGrid (WPF Custom DataGrid ใน C #)

รายการคุณสมบัติสาธารณะของ DataGrid แบบกำหนดเองที่ใช้เพื่อทำให้ DataGrid สามารถค้นหาได้

1. IsEnableSearch(บูล) :ทำให้เปิดใช้งาน DataGrid ที่กำหนดเองเพื่อค้นหาข้อมูล
2. SearchFieldName(สตริง) :ชื่อของฟิลด์ที่มีค่าที่จะค้นหา
3. MatchDataBGColor(แปรง) :กำหนดสีพื้นหลังของเซลล์ที่มีข้อมูลการค้นหา
4. MatchDataFGColor(แปรง) :กำหนดสีพื้นหน้าของเซลล์ที่มีข้อมูลการค้นหา

ฟังก์ชันของ DataGrid แบบกำหนดเองที่ใช้เพื่อทำให้ DataGrid สามารถค้นหาได้

ค้นหา Visual Childrenเป็นฟังก์ชันเสริมที่ช่วยค้นหาตัวควบคุมย่อย (กล่องข้อความอยู่ในเซลล์ DataGrid) ซึ่งค่านั้นจะถูกค้นหาใน Datagrid โดยใช้คลาส System.Windows.Media.VisualTreeHelper

IEnumerable แบบคงที่สาธารณะ  FindVisual Children  (DependencyObject ParentControl) โดยที่ T : DependencyObject { ถ้า (ParentControl != null) { สำหรับ (int i = 0; i < VisualTreeHelper.Get ChildrenCount(ParentControl); i++) { DependencyObject ChildControl = VisualTreeHelper .GetChild(ParentControl, ผม); ถ้า (ChildControl != null && ChildControl คือ T) { ให้ผลตอบแทน (T)ChildControl; } foreach (T ChildOfChildControl ใน FindVisual Children(ChildControl)) { ให้ผลตอบแทน ChildOfChildControl; } } } } } } } }

FindVisual Children() สำหรับ WPF Custom DataGrid ใน C#

SearchTextBox_TextChangedเป็นเหตุการณ์ที่เริ่มต้นโดย TextChange ของ TextBoxes ที่ใช้ในการค้นหาข้อมูลใน DataGrid เหตุการณ์ TextChange จะค้นหาค่าการค้นหาจากแต่ละเซลล์ของ DataGrid หากตรงตามเงื่อนไข ก็จะกำหนดสีพื้นหน้าและพื้นหลังของเซลล์ DataGrid ของคุณ

โมฆะส่วนตัว SearchTextBox_TextChanged (ผู้ส่งวัตถุ, RoutedEventArgs e) { TextBox TB = (TextBox) ผู้ส่ง; foreach (DataGridColumn DGC ใน this.Columns) { สำหรับ (int ind = 0; ind < this.Items.Count; ind++) { FrameworkElement FE = DGC.GetCellContent (this.Items [ind]); ถ้า (FE!=null && FE.GetType().Name == "TextBlock") { TextBlock TX = (TextBlock)FE; ถ้า (TX != null) { ถ้า (!string.IsNullOrEmpty(TB.Text) && TX.Text.Contains(TB.Text)) { System.Windows.Media.BrushConverter BC = ใหม่ System.Windows.Media.BrushConverter( ); TX.Background = this.MatchDataBGColor; TX.Foreground = this.MatchDataFGColor; } อื่น { TX.Background = System.Windows.Media.Brushes.White; TX.Foreground = System.Windows.Media.Brushes.Black; } } } } } } } } } }

SearchTextBox_TextChanged() สำหรับ WPF Custom DataGrid ใน C#

OnItemsSource เปลี่ยนแปลงแล้วเรียกใช้ฟังก์ชันที่กล่าวถึงข้างต้น (FindVisual Children) ซึ่งจะใช้การอ้างอิงของตัวควบคุมกล่องข้อความที่มีข้อความที่จะค้นหาในตารางข้อมูล และเพิ่มตัวจัดการเหตุการณ์การเปลี่ยนแปลงข้อความลงในกล่องข้อความของคุณ

การป้องกันแทนที่เป็นโมฆะ OnItemsSourceChanged (System.Collections.IEnumerable oldValue, System.Collections.IEnumerable newValue) { //code ค้นหาตัวควบคุมกล่องข้อความที่มีอยู่ในพาเรนต์ของ datagrid base.OnItemsSourceChanged (oldValue, newValue); ถ้า (this.IsEnableSearch == จริง &&!string.IsNullOrEmpty(this.SearchTextBoxName)) { foreach (TextBox tb ใน FindVisual Children(this.Parent)) { ถ้า (this.SearchTextBoxName == tb.Name) { สิ่งนี้ กล่องข้อความค้นหา = tb; this.SearchTextBox.TextChanged += ใหม่ TextChangedEventHandler (SearchTextBox_TextChanged); } } } } } } } }

OnItemsSourceChanged() สำหรับ WPF Custom DataGrid ใน C#

การสาธิต: WPF DataGrid Search (WPF Custom DataGrid ใน C#)

1. เริ่ม Visual Studio ในหน้าเริ่มต้นสร้างโครงการใหม่ เลือกวัดไลบรารีคลาสแล้วเปลี่ยนชื่อเป็นตารางข้อมูลที่ค้นหาได้

2. เปลี่ยนชื่อ class1 เป็นค้นหาได้ DataGridจากนั้นสืบทอดจาก System.Windows.Controls.DataGrid เพิ่มเหนือทรัพย์สินสาธารณะและส่วนตัวกล่องข้อความค้นหา.

   publicstring SearchTextBoxName { รับ; ชุด; } บูลสาธารณะ IsEnableSearch { get;set; } สาธารณะ System.Windows.Media.Brush MatchDataBGColor{ รับชุด; } สาธารณะ System.Windows.Media.Brush MatchDataFGColor{ รับชุด; } กล่องข้อความส่วนตัว SearchTextBox { รับ; ชุด; }

3. ในตัวสร้างเริ่มต้นของคลาส เริ่มต้นและตั้งค่าเริ่มต้นของคุณสมบัติสาธารณะ

   SearchableDataGrid สาธารณะ () { this.IsEnableSearch = เท็จ; this.MatchDataBGColor= System.Windows.Media.Brushes.Yellow; this.MatchDataFGColor= System.Windows.Media.Brushes.Gray; }

4. คัดลอกค้นหา Visual Childrenฟังก์ชั่นและวางในค้นหาได้ DataGridคลาสด้านล่างตัวสร้าง

5. คัดลอกOnItemsSource เปลี่ยนแปลงแล้วฟังก์ชั่นและวางในค้นหาได้ DataGridชั้นต่ำกว่าค้นหา Visual Childrenการทำงาน.

   (Video) C# WPF UI | How to Design Flat Data Table Dashboard in WPF (Customize Datagrid)

6. คัดลอกSearchTextBox_TextChangedฟังก์ชั่นและวางในค้นหาได้ DataGridชั้นต่ำกว่าOnItemsSource เปลี่ยนแปลงแล้วการทำงาน.

7. เพิ่มการอ้างอิงที่เกี่ยวข้อง (เนมสเปซ) ให้กับคลาส

8. ตอนนี้ชั้นเรียนของคุณพร้อมแล้ว และคุณเสร็จสิ้นกับWPF Custom Grid ใน C #สำหรับการค้นหาคุณสามารถใช้ในไฟล์ XAML เหมือนค่าเริ่มต้นDataGridคุณกำลังใช้

WPF DataGrid Filter (WPF Custom DataGrid ใน C#)

รายการคุณสมบัติสาธารณะของ DataGrid แบบกำหนดเองที่ใช้เพื่อทำให้ DataGrid สามารถค้นหาได้ และจะถูกนำไปใช้นอกคลาส Custom DataGrid

1. IsFilter (บูล):ประเภทข้อมูลบูลีน เปิดใช้งาน s DataGrid เพื่อกรองได้
2. ชื่อคอลัมน์ (สตริง):นอกจากนี้ยังเป็นคุณสมบัติส่วนตัวคือชื่อคอลัมน์ของ Custome Data Grid ซึ่งจะมีการค้นหาค่าเซลล์
3. SearchValue (วัตถุ) :เป็นทรัพย์สินส่วนตัวที่มีค่าจะถูกค้นหาใน Data Grid
4. รายการข้อมูล :คุณสมบัตินี้เป็นวัตถุของ ICollectionView อินเทอร์เฟซ IcollectionView เป็นของ System.ComponentModel คุณสมบัติที่ทรงพลังที่สุดของมันคือ ช่วยให้คอลเลกชันมีฟังก์ชันการทำงานของการจัดการบันทึกปัจจุบัน การเรียงลำดับแบบกำหนดเอง การกรอง และการจัดกลุ่ม คุณสมบัติ DataList ประกอบด้วยรายการที่เชื่อมโยงกับ DataGrid และวางเป็นรายการแหล่งที่มาของ DataGrid ฐาน

ฟังก์ชันของ DataGrid ศุลกากรที่ใช้เพื่อทำให้ DataGrid สามารถกรองได้

OnInitializedฟังก์ชันนี้ถูกแทนที่จากคลาสฐาน (Base DataGrid) ที่ใช้ในการเริ่มต้นคุณสมบัติ

การแทนที่ที่ได้รับการป้องกันเป็นโมฆะ OnInitialized (EventArgs e) { base.OnInitialized (e); this.DataList = null; this.SearchValue = null; this.ColumnName = ""; this.IsFilter = เท็จ; }

OnItemSource เปลี่ยนแปลงแล้วฟังก์ชันนี้เป็นส่วนประกอบหลักของตัวกรอง WPF DataGridเทมเพลตจะถูกเพิ่มในส่วนหัวของแต่ละคอลัมน์ของ Custome DataGrid เช่นกล่องข้อความหรือกล่องกาเครื่องหมายควบคุมในฟังก์ชันนี้ หากประเภทข้อมูลของคอลัมน์คือ DagaGridTextColumn กว่า TextBox จะถูกเพิ่มในส่วนหัวหรือประเภทข้อมูล f คอลัมน์คือ DataGridCheckBoxColumn กว่า CheckBox จะถูกเพิ่มในส่วนหัว

การป้องกันแทนที่เป็นโมฆะ OnItemsSourceChanged (System.Collections.IEnumerable oldValue, System.Collections.IEnumerable newValue) { Datalist = CollectionViewSource.GetDefaultView (newValue); base.OnItemsSourceChanged (ค่าเก่า, Datalist); ถ้า (this.IsFilter == จริง) { foreach (DataGridColumn DGC ใน this.Columns) { โรงงาน FrameworkElementFactory = FrameworkElementFactory ใหม่ (typeof (StackPanel)); FrameworkElementFactory LFactory = FrameworkElementFactory ใหม่ (ประเภทของ (ฉลาก)); LFactory.SetValue (Label.ContentProperty, DGC.Header.ToString()); Factory.AppendChild (LFactory); ถ้า (DGC.GetType().Name == "DataGridTextColumn") { FrameworkElementFactory TFactory = FrameworkElementFactory ใหม่ (typeof (TextBox)); TFactory.SetValue (TextBox.MarginProperty, ความหนาใหม่ (0)); TFactory.SetValue(TextBox.WidthProperty, 150.00); TFactory.SetValue(TextBox.NameProperty, "txt" + DGC.Header.ToString()); TFactory.AddHandler(TextBox.TextChangedEvent, ใหม่ TextChangedEventHandler(TextBox_TextChanged), เท็จ); Factory.AppendChild(TFactory); } ถ้า (DGC.GetType().Name == "DataGridCheckBoxColumn") { FrameworkElementFactory TFactory = FrameworkElementFactory ใหม่ (typeof(CheckBox)); TFactory.SetValue(CheckBox.NameProperty, "txt" + DGC.Header.ToString()); TFactory.AddHandler (CheckBox.ClickEvent, ใหม่ RoutedEventHandler (CheckBox_Checked), เท็จ); Factory.AppendChild(TFactory); } เทมเพลต DataTemplate = DataTemplate ใหม่ (); Template.DataType = typeof (HeaderedContentControl); Template.VisualTree = โรงงาน; DGC.HeaderTemplate = แม่แบบ; } } }

OnItemsSourceChanged() สำหรับ WPF Custom DataGrid ใน C#

CheckBox_Checkedใช้เพื่อกรองข้อมูลจากกริดแบบกำหนดเองเมื่อมีคอลัมน์ช่องทำเครื่องหมายอยู่ใน DataGrid ดำเนินการเมื่อเหตุการณ์ CheckBox (Used to filet) แตกเป็นเสี่ยงๆ

เป็นโมฆะ CheckBox_Checked (ผู้ส่งวัตถุ, RoutedEventArgs e) { ช่องทำเครื่องหมาย CB = (ช่องทำเครื่องหมาย) ผู้ส่ง; this.SearchValue = CB.IsChecked; ContentPresenter CP = (ContentPresenter)CB.TemplateParent; DataGridColumnHeader DGCH = (DataGridColumnHeader)CP.TemplateParent; DataGridColumn DGC = DGCH.Column; this.ColumnName = DGC.Header.ToString(); this.Datalist.Filter = this.CustomeFilter; }

CheckBox_Checked() สำหรับ WPF Custom DataGrid ใน C#

TextBox_TextChangedสิ่งนี้ใช้สำหรับการกรอง WPF DataGrid พร้อมกล่องข้อความ มันดำเนินการเมื่อเหตุการณ์ textchange เริ่มทำงานจากกล่องข้อความ (ใช้เพื่อกรองข้อมูล)

โมฆะส่วนตัว TextBox_TextChanged (ผู้ส่งวัตถุ, RoutedEventArgs e) { กล่องข้อความ STB = (กล่องข้อความ) ผู้ส่ง; this.SearchValue = STB.Text; ContentPresenter CP = (ContentPresenter)STB.TemplateParent; DataGridColumnHeader DGCH = (DataGridColumnHeader)CP.TemplateParent; DataGridColumn DGC = DGCH.Column; this.ColumnName = DGC.Header.ToString(); this.Datalist.Filter = this.CustomeFilter; }

TextBox_TextChanged() สำหรับ WPF Custom DataGrid ใน C#

CustomeFilterเรียกว่าภายในTextBox_TextChangedฟังก์ชันจับคู่ข้อมูลกริดกับค่าที่ส่งผ่านสำหรับตัวกรอง

บูลส่วนตัว CustomeFilter (รายการวัตถุ) { พิมพ์ TP = item.GetType (); PropertyInfo PI = TP.GetProperty (ชื่อคอลัมน์นี้); วัตถุ [] obj = วัตถุใหม่ [ this.SearchValue.ToString (). ความยาว]; ค่าสตริง = PI.GetValue(item,obj).ToString(); ค่า = ค่า ToUpper (); คืนค่า StartsWith(this.SearchValue.ToString().ToUpper()); }

CustomeFilter() สำหรับ WPF Custom DataGrid ใน C#

การสาธิต: WPF DataGrid Filter (WPF Custom DataGrid ใน C#)

1. เพิ่มคลาสในโครงการและเปลี่ยนชื่อ class1 เป็นตารางข้อมูลที่กรองได้จากนั้นสืบทอดจาก System.Windows.Controls.DataGrid

2. เพิ่มด้านล่างทรัพย์สินสาธารณะและส่วนตัวในชั้นเรียน

   ICollectionView Datalist ส่วนตัว { รับ; ชุด; } วัตถุส่วนตัว SearchValue { รับ; ชุด; } สตริงสาธารณะ ColumnName { รับ; ชุด; } IsFilter บูลสาธารณะ { รับ; ชุด; }

3. ในคอนสตรัคเตอร์ดีฟอลต์ของคลาส ให้ initializee และตั้งค่าดีฟอลต์ของคุณสมบัติ IsFilter

   สาธารณะ FilterableDataGrid () { this.IsFilter = เท็จ; }

4. คัดลอกOnInitializedฟังก์ชั่นและวางในตารางข้อมูลที่กรองได้คลาสด้านล่างตัวสร้าง

   (Video) WPF Controls | 27-Datagrid | Custom Datagrid | Part-4

5. คัดลอกOnItemsSource เปลี่ยนแปลงแล้วฟังก์ชั่นและวางในตารางข้อมูลที่กรองได้ชั้นต่ำกว่าOnInitializedการทำงาน.

6. คัดลอกCheckBox_Checkedฟังก์ชั่นและวางในตารางข้อมูลที่กรองได้ชั้นต่ำกว่าOnItemsSource เปลี่ยนแปลงแล้วการทำงาน.

7. คัดลอกSearchTextBox_TextChangedฟังก์ชั่นและวางในตารางข้อมูลที่กรองได้ชั้นต่ำกว่าCheckBox_Checkedการทำงาน.

8. คัดลอกCustomeFilterฟังก์ชั่นและวางในตารางข้อมูลที่กรองได้ชั้นต่ำกว่าSearchTextBox_TextChangedการทำงาน.

9. เพิ่มการอ้างอิงที่เกี่ยวข้อง (เนมสเปซ) ให้กับคลาส

10. ตอนนี้ชั้นเรียนของคุณพร้อมแล้ว และคุณเสร็จสิ้นกับWPF Custom DataGrid ใน C #สำหรับการกรองคุณสามารถใช้ในไฟล์ XAML ได้เหมือนค่าเริ่มต้นDataGridคุณกำลังใช้

บทความที่เกี่ยวข้อง

1. แอปพลิเคชัน WPF โดยใช้ MVVM ใน C #
2. ปุ่ม WPF Round Corner พร้อมเอฟเฟกต์การคลิก
3. กล่องรหัสผ่านแบบ Round Corner ใน WPF
4. กล่องข้อความมุมมนใน WPF
5. WPF Custom Datagrid Control (กรองได้)
6. กล่องรายการ WPF Round Corner
7. RadioButtonListBox แบบกำหนดเองพร้อมรูปภาพ
8. รายการปุ่มตัวเลือกใน WPF
9. CheckedListBox แบบกำหนดเองใน WPF

สรุป

ที่นี่เราได้เรียนรู้จากการสาธิตวิธีการสร้างสองWPF Custom DataGrid ใน C #ด้วยคุณสมบัติการค้นหาและกรอง ยังได้เรียนรู้วิธีการค้นหา wpf ใน datagrid ด้วย textbox และสร้าง wpf datagrid filter mvvm ฉันหวังว่าคุณจะสนุกกับมันมาก

ขอบคุณ