Faire défiler les composants Data Grid

Lorsque vous créez une grille de données avec plus de 12 composants Champ de texte à l'intérieur, la grille de données devient trop étroite pour afficher le contenu. Ce tutoriel montre comment faire défiler la grille de données.

Tutoriel

Pour faire défiler un composant Data Grid :

1. Créez un fichier CSS contenant deux classes pour faire défiler la grille de données et pour élargir les composants du champ de texte . La propriété overflow-x: scroll vous permet de faire défiler la Grille de données. La propriété min-width: 300px agrandit les champs de texte pour en afficher le contenu.

   Copiez et collez le code suivant dans votre fichier CSS :

   .my-data-grid
   {
      overflow-x: scroll;
   }
    
    
   .my-data-grid input 
   {
      min-width: 300px;
   }

2. Accédez à la propriété LocalCSSFilePath dans l'activité Créer un formulaire ( Create Form) et saisissez le chemin d'accès au fichier CSS créé (par exemple, "/file://C:/User/theCssFile.css").

Vous pouvez également stocker le chemin d'accès au fichier CSS local en tant que variable et saisir le nom de la variable dans le champ LocalCSSFilePath .

3. Accédez à l'onglet Affichage (Display) du composant Grille de données (Data Grid ). 4. Dans le champ Classe CSS personnalisée , écrivez le nom de la classe CSS personnalisée configurée dans le fichier comme ceci : my-data-grid. Cela lie les données du fichier CSS à votre formulaire.

5. Enregistrez le composant et la fiche.

Exemple de workflow

Pour vérifier le workflow complet ou pour avoir une future référence, téléchargez l' exemple XAML