Scrollen durch Datenrasterkomponenten

Wenn Sie ein Datenraster mit mehr als 12 Textfeldkomponenten darin erstellen, wird das Datenraster zu eng, um den Inhalt anzuzeigen. In diesem Tutorial wird gezeigt, wie Sie durch das Datenraster scrollen.

Tutorial

So scrollen Sie durch eine Data Grid- Komponente:

1. Erstellen Sie eine CSS-Datei, die zwei Klassen zum Scrollen durch das Datenraster und zum Vergrößern der Textfeldkomponenten enthält. Mit der Eigenschaft overflow-x: scroll können Sie durch das Data Gridscrollen. Die Eigenschaft min-width: 300px vergrößert die Textfelder , um den darin enthaltenen Inhalt anzuzeigen.

   Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre CSS-Datei ein:

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

2. Wechseln Sie zur Eigenschaft LocalCSSFilePath in der Aktivität Create Form und geben Sie den Pfad zur erstellten CSS-Datei ein (z. B. "/file://C:/User/theCssFile.css").

Sie können auch den Pfad zur lokalen CSS-Datei als Variable speichern und den Variablennamen in das Feld LocalCSSFilePath eingeben .

3. Navigieren Sie zur Registerkarte Anzeige der Komponente Data Grid . 4. Geben Sie in das Feld Benutzerdefinierte CSS- Klasse den Namen der benutzerdefinierten CSS-Klasse ein, die in der Datei konfiguriert ist: my-data-grid. Dadurch werden die Daten in der CSS-Datei an Ihr Formular gebunden.

5. Speichern Sie die Komponente und das Formular.

Beispielworkflow

Um den vollständigen Workflow zu überprüfen oder eine zukünftige Referenz zu haben, laden Sie das XAML-Beispielherunter