Como criar uma tela HTML usando o Designer de Tela

Artigo
06/10/2015

Usando o designer de tela, você pode modificar a aparência de telas em um cliente HTML para um aplicativo do Visual Studio LightSwitch. Por exemplo, você pode usar o designer para realizar as tarefas a seguir.

Adicione uma guia a uma tela.
Adicionar um grupo de informações a uma tela.
Modificar o layout de um grupo.
Adicione um botão.
Adicione um item.
Remova um item.
Mova um item.
Alterar o nome para exibição de um item.
Alterar a posição do rótulo de um item.
Alterar o tamanho de um item.
Mostrar ou ocultar um item.
Alterar o tipo de controle de um item .
Adicionar um controle personalizado a uma tela.
Desfazer alterações.
Habilitar ou desabilitar paginação.

Adicionar uma guia a uma tela

Na Árvore de Conteúdo da Tela, abra o menu de atalho do nó Guias e escolha Adicionar Guia.
Na janela Propriedades, escolha a propriedade Grupo e insira um nome para a guia.
Escolha a propriedade Nome para Exibição e insira o nome que será exibido na guia.
Na Árvore de Conteúdo da Tela, escolha a nova guia, abra a lista Adicionar e escolha os itens que você deseja exibir na guia.

Adicionar um grupo de informações a uma tela

Na Árvore de Conteúdo da Tela, escolha o nó ao qual você deseja adicionar um grupo de informações.
Na barra de ferramentas Designer de Tela, abra a lista Adicionar Item de Layout e escolha Grupo.

Um novo grupo aparece.
Na janela Propriedades, na caixa de texto Nome, insira um nome para o grupo.
Em Árvore de Conteúdo da Tela, escolha o novo grupo, abra a lista Adicionar e escolha os itens que você deseja exibir no grupo.

Modificar o layout de um grupo

Na Árvore de Conteúdo da Tela, abra a lista de um grupo que você deseja modificar.

A lista mostra todos os tipos de controle disponíveis para o grupo.
Na lista, escolha um tipo de controle.

O tipo de controle que você escolhe afeta o layout do grupo. Para obter mais informações sobre cada tipo de controle, consulte Referência: propriedades do Designer de Tela.

Adicionar um botão

Na Árvore de Conteúdo da Tela, escolha o nó onde você deseja que o botão apareça.
Na barra de ferramentas Designer de Tela, escolha Adicionar Item de Layout e Botão.

A caixa de diálogo Adicionar Botão aparece.

Adicionar um item

Na Lista de Membros da Tela do Designer de Tela, arraste um item (por exemplo, um campo ou um comando) para o local apropriado na Árvore de Conteúdo da Tela.

À medida que você arrasta o item, o ponteiro indica se é possível mover o item para um local especificado. Se o ponteiro mudar para um círculo com um corte, você não poderá soltar o item nesse local.

Para obter informações sobre como adicionar campos a uma tela, consulte Como adicionar uma propriedade local a uma tela HTML.

Remover um item

Na Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando) que você deseja remover.
Na barra de ferramentas Designer de Tela, escolha o botão Excluir.

Mover um item

Na Árvore de Conteúdo da Tela, arraste um item (por exemplo, um campo ou um comando) para um local diferente.

Por exemplo, arraste o campo PostalCode de modo que ele apareça no campo Country ou arraste o botão Editar de modo que ele apareça sobre o botão Excluir.

Dica

À medida que você arrasta um campo, o ponteiro indica se é possível mover o item para um local especificado.Se o ponteiro mudar para um círculo com um corte, você não poderá mover o item para esse local.

Alterar o nome para exibição de um item

Na Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).
Na janela Propriedades, na caixa de texto em Nome para Exibição, insira um nome diferente para o item.

Se alterar o nome para exibição de um item, você alterará somente o nome que aparece na tela. A propriedade Name do item permanece a mesma.

Alterar a posição do rótulo de um item

Na Árvore de Conteúdo da Tela, escolha o campo.

Na janela Propriedades, abra a lista em Posição do Rótulo e escolha a posição desejada.

A tabela a seguir descreve cada opção.

Posição do rótulo	Descrição
Alinhado à esquerda	O rótulo aparece próximo ao lado esquerdo do controle.
Alinhado à direita	O rótulo aparece próximo ao lado direito do controle.
Superior	O rótulo aparece acima do controle.
Hidden	Nenhum rótulo aparece para o controle.
Nenhum	Nenhum rótulo aparece para o controle, e ele permanece alinhado onde o rótulo estaria.

Alterar o tamanho de um item

Na Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).
Na janela Propriedades, em Redimensionamento, escolha um tamanho diferente para a largura e a altura do controle.

Dica

Alguns tipos de controles não dão suporte a propriedades de altura.

Para obter informações sobre cada configuração, consulte Referência: propriedades do Designer de Tela.

Mostrar ou ocultar um item

Na Árvore de Conteúdo da Tela, escolha o item (por exemplo, um campo ou um comando).
Na janela Propriedades, marque ou desmarque a caixa de seleção da propriedade É Visível.

Dica

O rótulo (Não visível) aparece no designer ao lado dos itens que não estão visíveis na tela quando o aplicativo é executado.

Alterar o tipo de controle de um item

Em Árvore de Conteúdo da Tela, abra a lista ao lado do item e escolha o tipo de controle que você deseja.

A maioria dos tipos de controle é interna. Você também pode definir o tipo de controle como um controle personalizado que cria usando outras ferramentas. Para obter mais informações, consulte Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch.

Adicionar um controle personalizado a uma tela

Na Árvore de Conteúdo da Tela, escolha qualquer grupo.
Na barra de ferramentas Designer de Tela, abra a lista Adicionar Item de Layout e escolha Controle Personalizado.

Para obter mais informações, consulte Como adicionar um controle personalizado a uma tela HTML para um aplicativo do LightSwitch.

Desfazer alterações

Na barra de menus, escolha Editar, Desfazer.

Dica

Se você desfizer acidentalmente uma edição no Designer de Tela, na barra de menus, escolha Editar, Refazer.

Habilitar ou desabilitar paginação

Na Lista de Membros da Tela do Designer de Tela, escolha o nó pai de uma coleção (por exemplo, o título OrderCollection).
Na janela Propriedades, desmarque a caixa de seleção Dar suporte à paginação se você quiser exibir todas as linhas que uma consulta retorna, mesmo que a coleção das linhas seja grande. Marque a caixa de seleção se você quiser limitar o número de registros exibidos e especifique o número de itens a serem exibidos em cada página.

Dica

Os usuários podem exibir cada página de resultados escolhendo um link na tela.

Consulte também

Partilhar via