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: as personalizações adicionadas no Dev Tools são temporárias. Para aplicar permanentemente os estilos CSS ao formulário, você deve criar uma classe CSS personalizada em um componente HTML Element, onde você insere o código que você experimenta em Dev Tools.

Tutorial

Para usar as ferramentas de desenvolvimento:

1. No painel Propriedades da atividade Criar formulário , verifique:

   1. Ferramentas de Desenvolvedor

   2. Desativar Sanitize. Esta propriedade melhora o desempenho do formulário.

2. Adicione componentes de formulário no Form Designer. Para este exemplo, arraste e solte um componente Elemento HTML . Você usa este componente para personalizar a aparência de outros componentes de formulário

   1. Na guia Exibir do componente Elemento HTML, vá para 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. 2.3. Adicione propriedades à classe CSS que correspondam 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. 2.4. Salve o componente.

3. Arraste e solte um componente Campo de texto no Designer de formulário.

   1. Na aba Display , vá até o campo Custom CSS Class e insira o nome da classe CSS criada no HTML Element. 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 a seguir e, em seguida, selecione o componente Campo de texto no Renderizador do formulário. A classe CSS criada é mostrada na guia Estilos das Ferramentas de Desenvolvimento. Para este 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. Depois de experimentar estilos CSS, você pode aplicá-los ao seu formulário permanentemente. Vá para a seção Content do componente HTML Element e adicione as propriedades que você experimentou na classe CSS.

   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 para ter uma referência futura, baixe o exemplo do XAML