Entwicklungstools

Die Eigenschaft Dev Tools in der Aktivität Create Form ermöglicht es Benutzern, ihre Formulare zu debuggen und mit CSS-Stilen zu experimentieren. Wenn diese Option aktiviert ist, wird das Dev Tools-Entwicklertool zur Laufzeit geöffnet.

In diesem Tutorial wird gezeigt, wie Sie mit CSS-Stilen in Dev Tools experimentieren.

Wichtig: In den Entwicklungstools hinzugefügte Anpassungen sind temporär. Um die CSS-Stile dauerhaft auf das Formular anzuwenden, müssen Sie eine benutzerdefinierte CSS-Klasse in einer HTML-Element-Komponente erstellen, in die Sie den Code eingeben, mit dem Sie in Dev Tools experimentieren.

Tutorial

So verwenden Sie Entwicklungstools:

1. Überprüfen Sie im Panel Eigenschaften der Aktivität Formular erstellen :

   1. Entwicklungstools

   2. DisableSanitize. Diese Eigenschaft verbessert die Leistung des Formulars.

2. Fügen Sie Formularkomponenten im Formular-Designer hinzu. Ziehen Sie für dieses Beispiel eine HTML-Element -Komponente und legen Sie sie dort ab. Sie verwenden diese Komponente, um die Darstellung anderer Formularkomponenten anzupassen.

   1. Wechseln Sie auf der Registerkarte Anzeige der Komponente HTML-Element zum Abschnitt Inhalt .

   2. Geben Sie eine CSS-Klasse <style>ein, die das Erscheinungsbild anderer Komponenten ändert. Schreiben Sie das <style> -Tag und dann einen Namen für die Klasse.

      Merken Sie sich den Namen der CSS-Klasse, da Sie ihn verwenden, um CSS-Stile auf andere Formularkomponenten anzuwenden.

   3. 2.3. Fügen Sie der CSS-Klasse Eigenschaften hinzu, die Ihrem Anwendungsfall entsprechen. Fügen Sie in diesem Beispiel die Eigenschaft background-color hinzu und legen Sie sie als greenfest. Sehen Sie sich den folgenden CSS-Code an:

      <style> .customclass{background-color: green;} </style>

   4. 2.4. Speichern Sie die Komponente.

3. Ziehen Sie eine Textfeldkomponente in den Formular-Designerund legen Sie sie dort ab.

   1. Wechseln Sie auf der Registerkarte Anzeige zum Feld Benutzerdefinierte CSS-Klasse und geben Sie den Namen der CSS-Klasse ein, die im HTML-Elementerstellt wurde. Geben Sie für dieses Beispiel customclassein.

   2. Speichern Sie die Komponente und das Formular.

4. Führen Sie die Datei aus. Das Fenster Entwicklungstools wird geöffnet.

   1. Klicken Sie auf das folgende Symbol und wählen Sie dann die Textfeldkomponente im Form Rendereraus. Die erstellte CSS-Klasse wird auf der Registerkarte Stile der Entwicklungstools angezeigt. In diesem Beispiel wird customclass angezeigt.
      
      

      

      
      
   2. Wechseln Sie zur CSS-Klasse, die in Dev Tools erstellt wurde, und experimentieren Sie mit CSS-Stilen in Echtzeit. Fügen Sie für dieses Beispiel eine border-style -Eigenschaft innerhalb von customclass hinzu und legen Sie sie auf solidfest.
   3. Fügen Sie eine weitere border-color -Eigenschaft hinzu und legen Sie sie auf deeppinkfest.

5. Nachdem Sie mit CSS-Stilen experimentiert haben, können Sie diese dauerhaft auf Ihr Formular anwenden. Wechseln Sie zum Abschnitt Inhalt der Komponente HTML-Element und fügen Sie die Eigenschaften hinzu, mit denen Sie in der CSS-Klasse experimentiert haben.

   Für dieses Beispiel fügen Sie die Eigenschaften border-style und border-color in customclasshinzu:

   <style> .customclass{background-color: green;
     border-style: solid;
     border-color: deeppink;}
   </style>

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