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: las personalizaciones agregadas en las herramientas de desarrollo son temporales. Para aplicar permanentemente los estilos CSS al formulario, debes crear una clase CSS personalizada en un componente de Elemento HTML, donde introducir el código con el que experimentas en Dev Tools.

Tutorial

Para usar las herramientas de desarrollo:

1. En el panel de Propiedades de la actividad Crear formulario , marque:

   1. Herramientas de desarrollo

   2. DeshabilitarSanitizar. Esta propiedad mejora el rendimiento del formulario.

2. Agrega componentes de formulario en el Diseñadorde formularios. Para este ejemplo, arrastre y suelte un componente de Elemento HTML . Puede utilizar este componente para personalizar la apariencia de otros componentes del formulario

   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. 2.3. Añade propiedades a la clase CSS que coincidan con tu caso de uso En este ejemplo, añade la propiedad background-color y establécela como green. Consulta el código CSS a continuación:

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

   4. 2.4. Guarde el componente.

3. Arrastra y suelta un componente de Campo de texto en el Diseñador de formularios.

   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. Después de experimentar con estilos CSS, podrá aplicarlos a su formulario de forma permanente. Ve a la sección Contenido del componente Elemento HTML y añade las propiedades con las que has experimentado en la clase CSS.

   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 tener una referencia futura, descarga el ejemplo XAML