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:

Customizations added in Dev Tools are temporary. To permanently apply the CSS styles to the form, you have to create a custom CSS class in an HTML Element component, where you input the code that you experiment with in Dev Tools.

Tutorial

So verwenden Sie Entwicklungstools:

1. In the Properties panel of the Create Form activity, check:

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

2. Add form components in the Form Designer. For this example, drag and drop a HTML Element component. You use this component to customize the appearance of other form components

   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. Fügen Sie Eigenschaften zur CSS-Klasse hinzu, die Ihrem Anwendungsfall entsprechen. Fügen Sie in diesem Beispiel die Eigenschaft background-color hinzu und legen Sie sie als green fest. Siehe CSS-Code unten:

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

   4. Speichern Sie die Komponente.

3. Drag and drop a Text Field component in the Form Designer.

   1. Wechseln Sie auf der Registerkarte Anzeige zum Feld Benutzerdefinierte CSS-Klasse und geben Sie den Namen der im HTML-Element erstellten CSS-Klasse ein. Geben Sie in diesem Beispiel customclass ein.
   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 Komponente Textfeld im Formularrenderer aus. Die erstellte CSS-Klasse wird auf der Registerkarte Stile von Dev Tools angezeigt. In diesem Beispiel ist 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. After experimenting with CSS styles, you can apply them to your form permanently. Go to the Content section of the HTML Element component and add the properties you experimented with in the CSS class.

   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

Laden Sie das XAML-Beispielherunter, um den vollständigen Workflow zu überprüfen oder später darauf zurückgreifen zu können