Créer votre première grille de données

Ce tutoriel est un exemple de grille de données qui affiche des données sur les générations et l'âge de certains animaux. La Grille de données affiche les données via un Champ de texte et un composant Nombre .

Tutoriel

Pour travailler avec le composant Grille de données :

1. Drag and drop a Sequence activity into your workflow.

2. Drag and drop a Build Data Table activity into the Sequence.

   1. Accédez à la propriété TableDonnées et appuyez sur la touche ctrl + K de votre clavier. Lorsque Set var: apparaît dans le champ TableDonnées , saisissez un nom pour la table de données. Pour cet exemple, saisissez dogBreedDataTable Cela crée une variable TableDonnées dans laquelle vous stockez la table de données.
   2. Cliquer . La fenêtre Créer une table de données s'ouvre.
   3. Renommer Column1 en Breed. 2.4. Renommez Column2 en Age.

   N'oubliez pas les noms de la table et des colonnes, car vous les utiliserez comme noms de propriété pour les composants à l'intérieur de votre formulaire.

3. Drag and drop a Create Form activity into the Sequence.

   1. Dans le panneau Propriétés , décochez GenerateInputFields. Si une case est cochée, un composant sera automatiquement ajouté dans le concepteur de formulaires, en fonction du type d'argument.
   2. Pour la propriété CollecteChampsFormulaire, cliquez sur l'ellipse . La fenêtre CollecteChampsFormulaire s'ouvre.
   3. Créez un argument nommé dogBreedTable. Définissez la Direction sur Entrée/Sortie, choisissez le type System.data.DataTable et définissez la valeur de la table de données que vous avez créée, nommée dogBreedDataTable.

4. In the Create Form activity, click Open Form Designer.

5. Drag and drop a Data Grid component in the form.

   1. Dans l'onglet Affichage , renommez le libellé du composant Dogs Data Grid.
   2. Dans l'onglet Clé de champ , saisissez le nom de l'argument de table de données créé dans la propriété CollecteChampsFormulaire . Cela va lier les données au formulaire. Pour cet exemple, saisissez dogBreedTable dans le champ Nom de la propriété .

6. Drag and drop a Text Field component inside the Data Grid.

   1. Dans l'onglet Affichage , renommez le libellé du composant Dog Breed.
   2. Dans l'onglet Clé de champ , saisissez le nom de la colonne String dans la table de données. Pour cet exemple, saisissez Breed dans le champ Nom de la propriété .

7. Drag and drop a Number component.

   1. Dans l'onglet Affichage , renommez le libellé du composant Dog Age.
   2. Dans l'onglet Clé de champ , saisissez le nom de la colonne Int32 dans la table de données. Pour cet exemple, saisissez Age dans le champ Nom de la propriété .

8. Save the form and run the workflow to test the capabilities of the Data Grid.

   

Exemple de workflow

Pour vérifier les workflows complets ou pour avoir une référence future, téléchargez l' exemple XAML