开发者工具

“创建表单”活动中的“开发工具”属性允许用户调试其表单并试验 CSS 样式。 启用后，Dev Tools 开发者工具将在运行时打开。

本教程介绍如何在开发工具中试验 CSS 样式。

重要提示：

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.

教程

要使用开发工具，请执行以下操作：

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

   1. 开发者工具
   2. 禁用“清理”功能。此属性提高了表单的性能。

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. 在“HTML 元素”组件的“显示”选项卡中，转到“内容”部分。

   2. 输入可更改其他组件外观的 CSS <style>类。 写入 <style> 标签，然后输入类的名称。

      记住 CSS 类的名称，因为您将使用它来将 CSS 样式应用于其他表单组件。

   3. 向与您的用例匹配的 CSS 类添加属性。对于本示例，添加background-color属性并将其设置为green 。请参阅下面的 CSS 代码：

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

   4. 保存组件。

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

   1. 在“显示”选项卡中，转到“自定义 CSS 类”字段，然后输入 在“HTML 元素”中创建的 CSS 类的名称。在此示例中，请键入customclass 。
   2. 保存组件和表单。

4. 运行该文件。 “开发工具” 窗口随即打开。

   1. 单击以下图标然后在“表单呈现器”中选择“文本字段”组件。创建的 CSS 类将显示在开发者工具的“样式”选项卡中。在此示例中，系统将显示customclass 。

      

   2. 转到在开发工具中创建的 CSS 类，并开始实时试验 CSS 样式。 在本例中，在 customclass 中添加一个 border-style 属性，并将其设置为 solid。

   3. 添加另一个 border-color 属性并将其设置为 deeppink。

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.

   对于此示例，请在 customclass中添加 border-style 和 border-color 属性：

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

6. 保存组件和表单。

示例工作流

要查看完整的工作流或供日后参考，请下载XAML 示例