Procédure pas à pas : affichage de données dans un contrôle DataRepeater (Visual Studio)

Article
08/21/2008

Mise à jour : Juillet 2008

Cette procédure pas à pas propose un scénario de base complet pour l'affichage des données dépendantes dans un contrôle DataRepeater.

Condition préalable

Cette procédure pas à pas requiert l'exemple de base de données Northwind.

Si vous ne disposez pas de cette base de données sur votre ordinateur de développement, vous pouvez la télécharger sur le site Web du Centre de téléchargement Microsoft. Pour obtenir des instructions, consultez Téléchargement d'exemples de bases de données (LINQ to SQL).

Vue d'ensemble

La première partie de cette procédure pas à pas comporte quatre tâches principales :

Création d'une solution.
Ajout d'un contrôle DataRepeater.
Ajout d'une source de données.
Ajout de contrôles liés aux données.

Remarque :
Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains des éléments d'interface utilisateur Visual Studio dans les instructions suivantes. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d'informations, consultez Paramètres Visual Studio.

Création d'une solution DataRepeater

La première étape consiste à créer un projet et une solution.

Pour créer une solution DataRepeater

Dans le menu Fichier de Visual Studio, cliquez sur Nouveau projet.
Dans le volet Types de projets dans la boîte de dialogue Nouveau projet, développez Visual Basic, puis cliquez sur Windows.
Dans le volet Modèles, cliquez sur Application Windows Forms.
Dans la zone Nom, tapez DataRepeaterApp.
Cliquez sur OK.

Le Concepteur Windows Forms s'ouvre.
Sélectionnez le formulaire dans le Concepteur Windows Forms. Dans la fenêtre Propriétés, affectez la valeur 800 à la propriété Size.

Ajout d'un contrôle DataRepeater

Cette étape ajoute un contrôle DataRepeater au formulaire.

Pour ajouter un contrôle DataRepeater

Dans le menu Affichage, cliquez sur Boîte à outils.

La Boîte à outils s'ouvre.
Sélectionnez l'onglet Visual Basic PowerPacks.
Faites glisser un contrôle DataRepeater sur Form1.
Dans la fenêtre Propriétés, affectez à la propriété la valeur 0, 25 à la propriété Location.
Attribuez la valeur 460, 600 à la propriété Size.

Ajout d'une source de données

Au cours de cette étape, vous ajoutez une source de données pour le contrôle DataRepeater.

Pour ajouter une source de données

Dans le menu Données, cliquez sur Afficher les sources de données.
Dans la fenêtre Sources de données, cliquez sur Ajouter une nouvelle source de données.
Sélectionnez Base de données dans la page Choisir un type de source de données, puis cliquez sur Suivant.
Sur la page Choisir votre connexion de données, effectuez l'une des opérations suivantes :
- Si une connexion de données à l'exemple de base de données Northwind est disponible dans la liste déroulante, cliquez dessus.
  
  - ou -
- Cliquez sur Nouvelle connexion pour configurer une nouvelle connexion de données. Pour plus d'informations, consultez Comment : créer des connexions à des bases de données SQL Server.
Si un mot de passe est requis pour la base de données, sélectionnez l'option pour inclure les données sensibles, puis cliquez sur Suivant.

Remarque :

Si une boîte de dialogue s'affiche, cliquez sur Oui pour enregistrer le fichier dans votre projet.
Cliquez sur Suivant dans la page Enregistrer la chaîne de connexion dans le fichier de configuration de l'application.
Développez le nœud Tables dans la page Choisir vos objets de base de données.
Activez les cases à cocher en regard des tables Customers et Orders, puis cliquez sur Terminer.

NorthwindDataSet est ajouté à votre projet et les tables Customers et Orders apparaissent dans la fenêtre Sources de données.

Remarque :
Si une boîte de dialogue s'affiche, cliquez sur Oui pour enregistrer le fichier dans votre projet.

Ajout de contrôles liés aux données

Cette étape ajoute des contrôles liés aux données à DataRepeater.

Pour ajouter des contrôles liés aux données

Dans la fenêtre Sources de données, sélectionnez le nœud de niveau supérieur de la table Customers.
Configurez le type de déplacement de la table sur Détails en cliquant sur Détails dans la liste déroulante du nœud table.
Sélectionnez le nœud table Customers et faites-le glisser sur la région de modèle d'élément (région supérieure) du contrôle DataRepeater.

Un contrôle BindingNavigator est ajouté au formulaire et les composants NorthwindDataSet, CustomersBindingSource, CustomersTableAdapter, TableAdapterManager et CustomersBindingNavigator sont ajoutés à la barre d'état des composants.
Sélectionnez tous les champs et les étiquettes associées et positionnez-les près du bord gauche de la région de modèle d'élément.
Sélectionnez les cinq derniers champs (Région, Code postal, Pays, Téléphone et Télécopie) et les étiquettes associées et déplacez-les en haut à droite des six premiers champs.
Sélectionnez le modèle d'élément (région supérieure du contrôle).
Dans la fenêtre Propriétés, affectez la valeur 427, 170 à la propriété Size.

Vous disposez désormais d'une application opérationnelle qui affiche une liste récurrente de clients. Vous pouvez appuyer sur F5 pour exécuter l'application, modifier les données et ajouter ou supprimer des enregistrements de client.

Au cours des étapes suivantes, vous allez à apprendre à personnaliser le contrôle DataRepeater.

Étapes suivantes (facultatives)

Cette partie de la procédure pas à pas comporte quatre tâches facultatives :

Modification de l'apparence du contrôle DataRepeater.
Protection des enregistrements contre tout ajout ou suppression.
Ajout de la fonction de recherche au contrôle DataRepeater.
Ajout d'une table principale et d'une table secondaire au contrôle DataRepeater.

Modification de l'apparence du contrôle DataRepeater

Au cours de cette étape facultative, vous modifiez la BackColor du contrôle DataRepeater au moment du design. Vous ajoutez également du code pour afficher des lignes dans des couleurs alternées et modifier conditionnellement la ForeColor d'une étiquette.

Pour modifier l'apparence du contrôle

Dans le Concepteur Windows Forms, sélectionnez la région principale (inférieure) du contrôle DataRepeater.
Dans la fenêtre Propriétés, attribuez la couleur blanche à la propriété BackColor.
Double-cliquez sur DataRepeater pour ouvrir l'Éditeur de code.
Dans l'Éditeur de code, sous la liste déroulante Événement, cliquez sur DrawItem.

Dans le gestionnaire d'événements DrawItem, ajoutez le code suivant pour alterner la BackColor :

' Alternate the back color.
If (e.DataRepeaterItem.ItemIndex Mod 2) <> 0 Then
    ' Apply the secondary back color.
    e.DataRepeaterItem.BackColor = Color.AliceBlue
Else
    ' Apply the default back color.
    e.DataRepeaterItem.BackColor = DataRepeater1.BackColor
End If

// Alternate the back color.
if ((e.DataRepeaterItem.ItemIndex % 2) != 0)
// Apply the secondary back color.
{
    e.DataRepeaterItem.BackColor = Color.AliceBlue;
}
else
{
    // Apply the default back color.
    e.DataRepeaterItem.BackColor = dataRepeater1.BackColor;
}

Dans le gestionnaire d'événements DrawItem, ajoutez le code suivant pour modifier la ForeColor d'une étiquette en fonction d'une condition :

If e.DataRepeaterItem.Controls(RegionTextBox.Name).Text _
 = "" Then
    e.DataRepeaterItem.Controls("RegionLabel"). _
     ForeColor = Color.Red
Else
    e.DataRepeaterItem.Controls("RegionLabel"). _
     ForeColor = Color.Black
End If

if (e.DataRepeaterItem.Controls[regionTextBox.Name].Text == "")
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Red;
}
else
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Black;
}

Appuyez sur F5 pour exécuter l'application et afficher les personnalisations.

Protection des enregistrements contre tout ajout ou suppression

Cette étape facultative vous apprend à ajouter du code qui empêche les utilisateurs d'ajouter ou de supprimer des enregistrements dans le contrôle DataRepeater.

Pour empêcher des utilisateurs d'ajouter et de supprimer des enregistrements

Dans le Concepteur Windows Forms, double-cliquez sur le formulaire pour ouvrir l'Éditeur de code.

Ajoutez le code suivant à l'événement Form_Load :

DataRepeater1.AllowUserToAddItems = False
DataRepeater1.AllowUserToDeleteItems = False
BindingNavigatorAddNewItem.Enabled = False
CustomersBindingSource.AllowNew = False
BindingNavigatorDeleteItem.Enabled = False

dataRepeater1.AllowUserToAddItems = false;
dataRepeater1.AllowUserToDeleteItems = false;
bindingNavigatorAddNewItem.Enabled = false;
customersBindingSource.AllowNew = false;
bindingNavigatorDeleteItem.Enabled = false;

Dans la liste déroulante Nom de la classe, cliquez sur BindingNavigatorDeleteItem. Dans la liste déroulante Nom de la méthode, cliquez sur EnabledChanged.
Ajoutez le code suivant au gestionnaire d'événements BindingNavigatorDeleteItem_EnabledChanged :
```
If BindingNavigatorDeleteItem.Enabled = True Then
    BindingNavigatorDeleteItem.Enabled = False
End If
```
```
if (bindingNavigatorDeleteItem.Enabled == true)
{
    bindingNavigatorDeleteItem.Enabled = false;
}
```
Remarque :

Cette étape est nécessaire dans la mesure où BindingSource active le bouton DeleteItem chaque fois que l'enregistrement actuel est modifié.
Appuyez sur F5 pour exécuter l'application. Remarquez que le bouton DeleteItem est désactivé et que vous ne pouvez pas supprimer des éléments en appuyant sur la touche SUPPR.

Remarque :
Cette étape est nécessaire dans la mesure où BindingSource active le bouton DeleteItem chaque fois que l'enregistrement actuel est modifié.

Ajout de la fonction de recherche au contrôle DataRepeater

Au cours de cette étape facultative, vous implémentez la fonction de recherche d'une valeur dans le contrôle DataRepeater. Si la chaîne de recherche est trouvée, le contrôle sélectionne l'élément qui contient la valeur et le fait défiler dans l'affichage.

Pour ajouter la fonction de recherche

Faites glisser un contrôle TextBox depuis la Boîte à outils vers le formulaire qui contient le contrôle DataRepeater.

Positionnez-le sous le contrôle DataRepeater.
Dans la fenêtre Propriétés, remplacez la valeur de la propriété Nom par SearchTextBox.
Faites glisser un contrôle Button depuis la Boîte à outils vers le formulaire qui contient le contrôle DataRepeater. Positionnez-le sous le contrôle DataRepeater.
Dans la fenêtre Propriétés, remplacez la valeur de la propriété Nom par SearchButton. Affectez la valeur Search à la propriété Text.

Double-cliquez sur le contrôle Button pour ouvrir l'Éditeur de code et ajoutez le code suivant au gestionnaire d'événements SearchButton_Click.

Dim foundIndex As Integer
Dim searchString As String
searchString = SearchTextBox.Text
' Search for the string in the CustomerID field.
foundIndex = CustomersBindingSource.Find("CustomerID", _
 searchString)
If foundIndex > -1 Then
    DataRepeater1.CurrentItemIndex = foundIndex
Else
    MsgBox("Item " & searchString & " not found.")
End If

int foundIndex;
string searchString;
searchString = searchTextBox.Text;
// Search for the string in the CustomerID field.
foundIndex = customersBindingSource.Find("CustomerID", searchString);
if (foundIndex > -1)
{
    dataRepeater1.CurrentItemIndex = foundIndex;
}
else
{
    MessageBox.Show("Item " + searchString + " not found.");
}

Appuyez sur F5 pour exécuter l'application. Tapez un ID client dans SearchTextBox et cliquez sur le bouton Rechercher.

Ajout d'une table principale et d'une table secondaire au contrôle DataRepeater

Au cours de cette étape facultative, vous ajoutez un deuxième contrôle DataRepeater afin d'afficher les commandes connexes pour chaque client.

Pour ajouter une table principale et une table secondaire

Faites glisser un deuxième contrôle DataRepeater depuis l'onglet Visual Basic PowerPacks de la Boîte à outils vers le formulaire.
Dans la fenêtre Propriétés, affectez à la propriété la valeur 465, 25 à la propriété Location.
Attribuez la valeur 315, 600 à la propriété Size.
Dans la fenêtre Sources de données, développez le nœud table Customers et sélectionnez le nœud secondaire de la table Orders.
Remplacez le type de déplacement de la table Orders par Détails en cliquant sur Détails dans la liste déroulante du nœud table.
Faites glisser le nœud table Orders sur la région de modèle d'élément (région supérieure) du deuxième contrôle DataRepeater.

Des composants OrdersBindingSource et OrdersTableAdapter sont ajoutés à la barre d'état des composants.
Appuyez sur F5 pour exécuter l'application. Lorsque vous sélectionnez chacun des clients dans le premier contrôle DataRepeater, les commandes de ce client s'affichent dans le deuxième contrôle DataRepeater.