Personalizando a aparência da tela

Artigo
02/25/2013

Nessa lição você aprenderá como mudar o layout e a aparência da tela em LightSwitch

Personalize a Tela

Usando o Designer de Tela, você pode personalizar uma tela de várias maneiras.Por exemplo, você pode alterar a ordem de exibição de campos, alterar o tipo de controle que é usado para apresentar um campo, e restringir a possibilidade de modificar um campo.

Para exibir uma tela

No Gerenciador de Soluções, clique duas vezes na tela OrdersByCustomers.
Pressione F5 para executar o aplicativo e, em seguida, no menu de navegação, clique Pedidos Por Clientes para exibir o formulário.

Quando você seleciona um cliente na lista Clientes à esquerda, detalhes sobre esse cliente e uma lista de pedidos relacionados são exibidos à direita.
Clique no botão Fechar no canto superior direito da janela do aplicativo para fechá-lo.

Para alterar nomes de exibição

No painel central do Designer de Tela, selecione o nó mais alto Layout das Colunas | Pedidos Por Clientes.
Na janela Propriedades, selecione o campo Descrição e digite Selecione um cliente para consultar seus pedidos.

Esta mensagem será exibida como uma dica de ferramenta para a tela quando você executa o aplicativo.
Pressione F5 para executar o aplicativo e, no menu de navegação, clique Pedidos por Clientes para exibir a tela.Para exibir a dica de ferramenta, mova o ponteiro sobre “Pedidos Por Cliente” na guia da tela e pause.
Clique no botão Fechar no canto superior direito da janela do aplicativo para fechá-lo.

Para alterar os controles e a ordem de exibição

Sob o nó Layout das Linhas | Coluna de Detalhes, selecione o nó Empresa.
Na lista suspensa, selecione Rótulo

Isso impede que o campo Company seja editado no aplicativo em execução.
Selecione o nó Telefone.
Arraste-o sob o nó Empresa.

Isso altera a ordem de exibição na tela.
Pressione F5 para executar o aplicativo e, no menu de navegação, clique em Pedidos por Clientes para exibir a tela e verificar as alterações.
Clique no botão Fechar no canto superior direito da janela do aplicativo para fechá-lo.

Para desativar comandos para uma grade de dados

Expanda o nó GradedeDados | Pedidos.
Expanda o nó Barra de Comandos se ele ainda não estiver expandido.
Selecione o nó Editar....Na janela Propriedades, desmarque a caixa de seleção IsVisible.

Isso desativa o comando Editar para a grade de dados Pedidos.
Repita o processo para o nó Excluir.
Pressione F5 para executar o aplicativo e, no menu de navegação, clique em Pedidos por Clientes para exibir a tela e verificar as alterações.

Observe que os botões Editar e Excluir agora estão faltando.
Clique no botão Fechar no canto superior direito da janela do aplicativo para fechá-lo.

Para tornar uma tela somente leitura

Expanda o nó GradedeDados | Pedidos.
Expanda o nó Barra de Comandos.
Selecione o nó Adicionar... e depois, em Fita da Barra de Ferramentas, clique no botão Excluir.
Selecione o nó GradedeDados | Pedidos e selecione Linha da Grade de Dados | Pedido.
Na janela Propriedades, selecione a caixa de seleção Usar Controles Somente Leitura.

Isso evita que usuários modifiquem dados na grade.
Pressione F5 para executar o aplicativo e, no menu de navegação, clique em Pedidos por Clientes para exibir a tela e verificar as alterações.

Observe que o botão Adicionar se foi, e que você não pode mais modificar dados na grade.
Clique no botão Fechar no canto superior direito da janela do aplicativo para fechá-lo.

Visão aprofundada

Esta lição mostrou como executar várias tarefas para alterar a aparência e o comportamento da tela PedidosPorClientes.A lição também demonstrou como a Árvore de Conteúdo da Tela no Designer de tela relaciona-se à interface do usuário na tela em execução.

Quando você alterou a Descrição para a tela, você forneceu ajuda para o usuário final.Você pode lembrar que você alterou a Descrição para o campo ContactName no Designer de Entidade em uma lição anterior.Quando você define a Descrição no Designer de Entidade, a alteração é propagada para todas as telas; quando você o define no Designer de Tela somente a tela que você está trabalhando é modificada.

Quando você alterou o tipo de controle para o campo Empresa de uma Caixa de Texto para um Rótulo, você talvez tenha notado que a lista de controles disponíveis para cada campo inclui somente os controles que são apropriados para o tipo de dados em vigor do campo.Por exemplo, para um campo Text, você pode escolher uma Caixa de Texto ou um Rótulo.Se você instalou uma extensão que inclui um controle para exibir Text, tal controle também apareceria na lista.Outra lição descreve as extensões.

Além de arrastar um campo para outro local na lista, nesse caso, a lista Clientes, você também pode arrastar campos do painel esquerdo do Designer de Tela para o painel central.Por exemplo, se você fosse acidentalmente excluir o campo Cidade, você poderia arrastá-lo de volta do nó Clientes no painel esquerdo.

Quando você desativou os comandos Editar e Excluir na grade Pedidos, você talvez tenha notado que ainda pode-se editar e excluir pedidos diretamente na grade.Para resolver isso, você tornou posteriormente a grade Pedidos somente leitura definindo a propriedade Usar Controles Somente Leitura.A propriedade Usar Controles Somente Leitura afeta todos os nós sob ele na árvore Selecione o Conteúdo.Por exemplo, se você definir a propriedade Usar Controles Somente Leitura para o nó de nível superior Grade | Pedidos por Clientes, a tela inteira se torna somente leitura.

Observação
Quando a propriedade Usar Controles Somente Leitura é definida, ela não desativa os comandos Adicionar, Editar, e Excluir.Os usuários ainda podem modificar dados quando esses comandos são ativados.