Ferramentas de Desenvolvedor

A propriedade Dev Tools na atividade Create Form permite que os usuários depurem seus formulários e experimentem estilos CSS. Quando habilitada, a ferramenta do desenvolvedor Dev Tools é aberta em tempo de execução.

Este tutorial mostra como experimentar estilos CSS no Dev Tools.

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 as ferramentas de desenvolvimento:

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

   1. Ferramentas de Desenvolvedor
   2. DesabilitarLimpar. Essa propriedade melhora o desempenho do formulário.

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. Na guia Exibição do componente do Elemento HTML, acesse a seção Conteúdo .

   2. Insira uma classe CSS <style>que altera a aparência de outros componentes. Escreva a tag <style> e um nome para a classe.

      Lembre-se do nome da classe CSS porque você a usará para aplicar estilos CSS a outros componentes de formulário.

   3. Adicione propriedades à classe CSS que corresponda ao seu caso de uso Para este exemplo, adicione a propriedade background-color e defina-a como green. Veja o código CSS abaixo:

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

   4. Salve o componente.

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

   1. Na guia Exibir , vá para o campo Classe CSS personalizada e insira o nome da classe CSS criada no Elemento HTML. Para este exemplo, digite customclass.
   2. Salve o componente e o formulário.

4. Execute o arquivo. A janela Ferramentas de desenvolvimento é aberta.

   1. Clique no ícone seguinte e, em seguida, selecione o componente Campo de texto no Renderizador de formulário. A classe CSS criada será mostrada na guia Estilos das Ferramentas de desenvolvimento. Para esse exemplo, o customclass é exibido.

      

   2. Acesse a classe CSS criada no Dev Tools e comece a experimentar estilos CSS em tempo real. Para este exemplo, adicione uma propriedade border-style dentro de customclass e defina-a como solid.

   3. Adicione outra propriedade border-color e defina-a como 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 exemplo, adicione as propriedades border-style e border-color em customclass:

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

6. Salve o componente e o formulário.

Fluxo de trabalho amostral

Para verificar o fluxo de trabalho completo ou ter uma referência futura, baixe o exemplo XAML