WPF DataGrid. الكفاح من أجل القالب

مرحبا بالجميع!

آمل أن أوضح من خلال مقالي مسألة ربط تمثيل XML لـ DataGrid بمجموعته البرمجية. لهذا ، من الأفضل استخدام مثال محدد. لذلك ، نحن بحاجة إلى وضع قائمة عناصر بعض الهيكل في الجدول. لنفترض أن العناصر نفسها تنظر في الكود كما يلي:

class Element { public Element (string firstName, string lastName, string phoneNumber, DateTime date) { this.firstName = firstName; this.lastName = lastName; this.phoneNumber = phoneNumber; this.date = date; } public string FirstName { get { return this.firstName; } set { this.firstName = value; } } public string LastName { get { return this.lastName; } set { this.lastName = value; } } public string PhoneNumber { get { return this.phoneNumber; } set { this.phoneNumber = value; } } public DateTime Date { get { return this.date; } set { this.date = value; } } private string firstName; private string lastName; private string phoneNumber; private DateTime date; } 

وفقًا لذلك ، ستبدو قائمتهم كما يلي:

 List<Element> elements = new List<Element>(); 

الآن دعنا ننتقل إلى DataGrid. نظرًا لأن هذا هو نفس WPF ، يمكنك سحبها إلى النموذج بيديك. دع IDE يكتب الكود الخاص بها.

 <DataGrid x:Name="dataGrid" Margin="10,103,0,15" CellEditEnding="dataGrid_CellEditEnding" Grid.RowSpan="2" Grid.ColumnSpan="2" HorizontalAlignment="Left" Width="728" AutoGenerateColumns="False"/> 

هنا ، أقوم يدويًا بتعيين AutoGenerateColumns = "False" فقط ، حيث أننا في المستقبل سنقوم بتحرير أعمدة الجدول بأنفسنا.

بعد ذلك ، نحتاج إلى ربط البيانات بالجدول ، حيث يجب أن يتوافق كل حقل من عناصر العنصر مع عمود الجدول.

 <DataGrid.Columns> <DataGridTextColumn Header="" Binding="{Binding Path=FirstName}"/> <DataGridTextColumn Header="" Binding="{Binding Path=LastName}"/> <DataGridTemplateColumn Header="" SortMemberPath="PhoneNumber"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}" /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> <DataGridTemplateColumn Header="" SortMemberPath="Date"> <DataGridTemplateColumn.CellTemplate> <DataTemplate > <TextBlock Text="{Binding Path=Date, StringFormat='dd/MM/yyyy'}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <DatePicker SelectedDate="{Binding Date}"/> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> </DataGrid.Columns> 

يتم استخدام نوعين من الأعمدة DataGridTextColumn و DataGridTemplateColumn هنا. يمكنك أن تقرأ عن أنواعها في كل مكان. الشيء الرئيسي الذي يجب فهمه هنا هو أنه بمساعدة DataGridTemplateColumn ، يمكنك تعيين أي قالب. أي أنه في خلايا هذا العمود سيكون من الممكن وضع أي عناصر تحكم (أزرار ، تقويمات ، وما إلى ذلك). على سبيل المثال ، يوجد في العمود الثالث مربع نص:

 <DataGridTemplateColumn Header="" SortMemberPath="PhoneNumber"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 

هام: لا تنس تسجيل العنوان ، لأن الإكمال التلقائي معطل بالنسبة لنا. وأيضًا بالنسبة لـ DataGridTemplateColumn ، من الضروري تسجيل SortMemberPath ، حتى يعرف أي حقل لفرز البيانات.

دعنا ننتقل إلى ملزمة. هذا هو ربط البيانات نفسها. نحددها باستخدام Binding Path = PhoneNumber. الشيء الرئيسي الذي يجب مراعاته هنا هو أن هذا هو اسم طريقة الفصل التي تُرجع قيمة الحقل (وليس رقم الهاتف ، ولكن رقم الهاتف ، انظر وصف الفصل).
وأكثر شيء واحد. من الممكن إدخال أنواع مختلفة من القوالب (DataTemplate) للخلايا في الحالة الطبيعية (CellTemplate) وفي حالة التحرير (CellEditingTemplate). في العمود الرابع من الخلية في الحالة العادية ، يكون TextBox ، وفي حالة التحرير DatePicker:

 <DataGridTemplateColumn Header="" SortMemberPath="Date"> <DataGridTemplateColumn.CellTemplate> <DataTemplate > <TextBlock Text="{Binding Path=Date, StringFormat='dd/MM/yyyy'}"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate> <DatePicker SelectedDate="{Binding Date}"/> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> 

تجدر الإشارة أيضًا إلى أنه عند العمل مع التواريخ ، يحتوي حقل النص على خاصية StringFormat التي يمكن تنسيقها. من المهم أن يكون العرض الصحيح للشهر "MM" كبيرًا.

الآن ، لربط بيانات محددة بالجدول ، دعنا نعود إلى الشفرة في C #.
بعد ملء الصفيف بعناصر ، يجب تحديده كمصدر للبيانات:

 dataGrid.ItemsSource = elements; 

وبالتالي ، سيتم عرض أي تغييرات على العناصر في الجدول ، وعلى العكس من ذلك ، فإن أي تغييرات يتم إجراؤها على الجدول ستؤدي إلى تغييرات في العناصر. ولكن عند إجراء تغييرات على العناصر ، يجب عليك استدعاء الأسلوب

 dataGrid.Items.Refresh(); 

.
وكمثال جيد آخر على حزمة C # - XML ​​، سأقدم مثالًا على التحقق من ملء خلايا أرقام الهاتف بالأرقام فقط. للقيام بذلك ، قم بتحرير جزء الشفرة في العمود الثالث قليلاً:

 <DataGridTemplateColumn.CellTemplate> <DataTemplate> <TextBox Text="{Binding Path=PhoneNumber}" TextChanged="phN_TextChanged"/> </DataTemplate> </DataGridTemplateColumn.CellTemplate> 

يمكن ملاحظة أنه في علامة TextBox قمت بتعيين معالج لحدث تغيير النص. الآن يبقى فقط تسجيل هذا المعالج في الكود:

  private void phN_TextChanged(object sender, TextChangedEventArgs e) { int result = 0; TextBox txtx = sender as TextBox; if (txtx !=null) { if (!int.TryParse(txtx.Text, out result)) { txtx.Text = txtx.Text.Substring(0, txtx.Text.Length - 1); txtx.CaretIndex = txtx.Text.Length; } } } 

يمكن أيضًا التحقق من الأرقام من خلال التعبيرات العادية.

الافراج جيدة للجميع!