Herramientas de desarrollo

La propiedad Herramientas de desarrollo de la actividad Crear formulario permite a los usuarios depurar sus formularios y experimentar con estilos CSS. Cuando está habilitada, la herramienta de desarrollador Herramientas de desarrollo se abre en tiempo de ejecución.

Este tutorial muestra cómo experimentar con estilos CSS en las herramientas de desarrollo.

Importante:

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

Para usar las herramientas de desarrollo:

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

   1. Herramientas de desarrollo
   2. DisableSanitize. Esta propiedad mejora el rendimiento del formulario.

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. En la pestaña Visualización del componente Elemento HTML, ve a la sección Contenido .

   2. Introduzca una clase <style>de CSS que cambie la apariencia de otros componentes. Escribe la etiqueta <style> y luego un nombre para la clase.

      Recuerde el nombre de la clase CSS porque la usará para aplicar estilos CSS a otros componentes del formulario.

   3. Añade propiedades a la clase CSS que coincidan con tu caso de uso Para este ejemplo, añade la propiedad background-color y establécela como green. Consulta el siguiente código CSS:

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

   4. Guarde el componente.

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

   1. En la pestaña Visualización , ve al campo Clase CSS personalizada e introduce el nombre de la clase CSS creada en el Elemento HTML. Para este ejemplo, escribe customclass.
   2. Guarda el componente y el formulario.

4. Ejecuta el archivo. Se abrirá la ventana Herramientas de desarrollo.

   1. Haz clic en el siguiente icono y luego selecciona el componente Campo de texto en el Representador de formularios. La clase CSS creada se muestra en la pestaña Estilos de Herramientas de desarrollo. Para este ejemplo, se muestra customclass .

      

   2. Ve a la clase de CSS creada en Herramientas de desarrollo y empieza a experimentar con estilos CSS en tiempo real. Para este ejemplo, añade una propiedad border-style dentro customclass y establécela en solid.

   3. Añade otra propiedad border-color y establézcala en 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.

   Para este ejemplo, añade las propiedades border-style y border-color en customclass:

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

6. Guarda el componente y el formulario.

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o para tener una referencia futura, descarga el ejemplo XAML