WPF DataGrid. Battez-vous pour le modèle

Bonjour à tous!

J'espère qu'à travers mon article, je clarifierai la question de la liaison de la représentation XML du DataGrid avec sa collection de code. Pour cela, il est préférable d'utiliser un exemple spécifique. Nous devons donc placer la liste des éléments d'une certaine structure dans le tableau. Disons que les éléments eux-mêmes ressemblent au code comme suit:

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; } 

En conséquence, leur liste ressemblera à:

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

Passons maintenant au DataGrid. Comme il s'agit du même WPF, vous pouvez le tirer sur le formulaire avec vos mains. Laissez l'IDE écrire le code pour cela.

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

Ici, je définis manuellement uniquement AutoGenerateColumns = "False", car à l'avenir, nous éditerons nous-mêmes les colonnes du tableau.

Ensuite, nous devons lier les données à la table, chaque champ de l'élément doit correspondre à la colonne de la table.

 <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> 

Deux types de colonnes DataGridTextColumn et DataGridTemplateColumn sont utilisés ici. Vous pouvez lire sur leurs types partout. La principale chose à comprendre ici est qu'à l'aide de DataGridTemplateColumn, vous pouvez définir n'importe quel modèle. Autrement dit, dans les cellules de cette colonne, il sera possible de placer tous les contrôles (boutons, calendriers, etc.). Par exemple, dans la troisième colonne se trouve un TextBox:

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

IMPORTANT: N'oubliez pas d'enregistrer l'en-tête, car l'auto-complétion est désactivée pour nous. Et aussi pour DataGridTemplateColumn, il est nécessaire d'enregistrer SortMemberPath, afin qu'il sache par quel champ trier les données.

Passons à la liaison. Il s'agit de la liaison de données elle-même. Nous le spécifions en utilisant Binding Path = PhoneNumber. La principale chose à considérer ici est qu'il s'agit du nom de la méthode de classe qui renvoie la valeur du champ (pas phoneNumber, mais PhoneNumber, voir la description de la classe).
Et encore une chose. Il est possible d'entrer différents types de modèles (DataTemplate) pour les cellules à l'état normal (CellTemplate) et à l'état d'édition (CellEditingTemplate). Dans la quatrième colonne de la cellule à l'état normal, il s'agit d'un TextBox, et à l'état d'édition 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> 

Il convient également de noter que lorsque vous travaillez avec des dates, le champ Texte a une propriété StringFormat qui peut être formatée. Il est important que pour l'affichage correct du mois "MM" soit grand.

Maintenant, pour lier des données spécifiques à la table, revenons au code en C #.
Après avoir rempli le tableau d'éléments, il doit être spécifié en tant que source de données:

 dataGrid.ItemsSource = elements; 

Ainsi, toutes les modifications apportées aux éléments seront affichées dans le tableau et, inversement, toutes les modifications apportées au tableau entraîneront des modifications des éléments. Mais lorsque vous modifiez des éléments, vous devez appeler la méthode
 dataGrid.Items.Refresh(); 
.
Et comme un autre bon exemple d'un bundle C # - XML, je vais donner un exemple de vérification du remplissage des cellules du numéro de téléphone avec uniquement des chiffres. Pour ce faire, modifiez légèrement le morceau de code dans la troisième colonne:

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

On peut voir que dans la balise TextBox, j'ai affecté un gestionnaire pour l'événement de modification de texte. Maintenant, il ne reste plus qu'à enregistrer ce gestionnaire dans le code:

  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; } } } 

La vérification des nombres peut également être effectuée via des expressions régulières.

Bonne sortie à tous!

Source: https://habr.com/ru/post/fr484968/


All Articles