Instruções passo a passo: criando uma tela do Silverlight no LightSwitch
Esta instrução passo a passo mostra como usar o designer de tela do LightSwitch para criar uma tela que exiba dados de cliente com base no banco de dados de exemplo Northwind. O designer de tela é uma tela de design visual que você pode usar para modificar a aparência de uma tela.
Esta instrução passo a passo mostra como realizar as seguintes tarefas:
Criar uma tela
Alterar o layout de uma tela
Remover campos de uma tela
Alterar a ordem de itens
Alterar o nome para exibição de um item
Alterar o tipo de controle de um item
Personalizar uma tela em um aplicativo em execução
Pré-requisitos
Esta explicação passo a passo presume que você tenha adicionado o serviço OData Northwind como uma fonte de dados em seu projeto.
Para obter informações sobre como adicionar o serviço OData Northwind como uma fonte de dados em seu projeto, consulte Conectando a dados em um aplicativo LightSwitch.
Criando uma tela
Esta seção mostra como criar uma tela para exibir os dados de cliente com base no banco de dados Northwind. Esta tela é dividida em duas partes. A primeira parte exibe uma lista resumida de todos os clientes; a outra parte exibe detalhes sobre o cliente selecionado.
Para criar uma tela
No Gerenciador de Soluções, abra o menu de atalho do nó Telas e escolha Abrir.
Na barra de menus, escolha Projeto, Adicionar Tela.
A caixa de diálogo Adicionar Nova Tela é aberta.
Na lista Selecionar um modelo de tela, escolha Tela de Lista e Detalhes.
Na caixa de texto Nome da Tela, insira Clientes.
Na lista Dados da Tela, escolha DataSourceName.Clientes.
Na seção Dados Adicionais para Inclusão, marque as caixas de seleção Detalhes do Cliente e Pedidos do Cliente.
Ela adiciona os campos da entidade Cliente à parte de detalhes da tela, com uma lista dos pedidos feitos pelo cliente.
A ilustração a seguir mostra como a caixa de diálogo aparece depois de realizar as tarefas desta seção.
.png "Adicionar caixa de diálogo nova tela")
Escolha o botão OK para criar a tela.
O Designer de Tela aparece.
Alterando o layout da tela
A tela Lista e Detalhes possui duas colunas. A coluna à esquerda é uma lista dos clientes. A coluna à direita contém duas linhas. A linha superior contém os detalhes do cliente selecionado e a linha inferior contém os pedidos relacionados ao cliente selecionado. A árvore de conteúdo da tela do designer de tela mostra como essa lista é composta.
Esta seção mostra como modificar o layout da tela de modo que a tela contenha duas linhas em vez de duas colunas. A primeira superior conterá a lista de clientes. A linha inferior conterá duas colunas. A coluna à esquerda conterá os detalhes do cliente selecionado e a coluna à direita conterá os pedidos relacionados ao cliente selecionado.
Para alterar o layout da lista
Na Árvore de Conteúdo da Tela do Designer de Tela, escolha a seta para baixo que aparece ao lado do nó Clientes e Layout das Linhas.
O layout do nó Clientes é alterado de Layout das Colunas para Layout das Linhas.
Escolha a seta para baixo exibida ao lado do nó Coluna de Detalhes e Layout das Colunas.
O layout da Coluna de Detalhes é alterado de Layout das Linhas para Layout das Colunas.
Removendo campos de uma tela
Por padrão, a área da tela que exibe os detalhes de um cliente, chamada de Coluna de Detalhes, mostra todos os campos da fonte de dados. Se não quiser que todos os campos apareçam, você poderá remover aqueles que não deseja. Por exemplo, as etapas a seguir mostram como remover o campo País.
Para remover campos de uma tela
Na Árvore de Conteúdo da Tela, expanda o nó Detalhes do Cliente se ele ainda não estiver expandido.
Escolha o campo País e, na barra de comandos do Designer de Tela, escolha o comando Excluir.
Alterando a ordem dos campos
As etapas a seguir mostram como alterar a ordem dos campos, por exemplo, o campo CustomerID e o campo Postal Code.
Para alterar a ordem de campos
Na Árvore de Conteúdo da Tela, expanda o nó Detalhes do Cliente se ele ainda não estiver expandido.
Para mover o campo CustomerID para a parte inferior da coluna de detalhes, arraste o campo abaixo do campo Fax.
Dica
Você também pode abrir o menu de atalho do campo CustomerID, escolher Recortar, abrir o menu de atalho do campo Fax e escolher Colar.
Para mover o campo CEP para que ele apareça logo acima do campo ID do Cliente, arraste-o para entre os campos Fax e CustomerID.
Alterando o tipo de controle de um campo
Você pode personalizar como um campo é exibido para o usuário. Por exemplo, você pode definir um campo de texto para aparecer como TextBox ou como Label. As etapas a seguir mostram como alterar um campo de exibição para um campo Label de modo que o usuário não possa alterar seu valor.
Para alterar o tipo de controle de um campo
Na Árvore de Conteúdo da Tela, expanda o nó Detalhes do Cliente se ele ainda não estiver expandido.
Abra a lista do campo ID do Cliente e escolha Rótulo.
Você pode repetir esta etapa para alterar outros campos.
Para testar as alterações, escolha a tecla F5 para executar o aplicativo.
Personalizando uma tela em um aplicativo em execução
Você também pode personalizar uma tela enquanto o aplicativo está sendo executado. Por exemplo, você pode remover campos, alterar a ordem dos campos e alterar propriedades como o tipo de controle ou o alinhamento de rótulos.
Para personalizar uma tela em um aplicativo em execução
Se seu aplicativo já não estiver em execução, selecione a tecla F5 para iniciá-lo.
Na barra de comandos da tela, escolha o link Criar Tela.
Na tela Modo de Personalização, remova o campo ID do Cliente da coluna de detalhes escolhendo-o no nó Detalhes do Cliente e, na barra de ferramentas, escolhendo o botão Excluir (
.png "Exclui o item selecionado.")
).No nó Detalhes do Cliente, escolha o campo Fax e, na barra de ferramentas, escolha o botão Mover para Baixo (
.png "Move um item para uma posição inferior na lista.")
).O campo Fax aparece no campo CEP.
No nó Detalhes do Cliente, escolha o campo Telefone e, na janela Propriedades, defina a propriedade Nome para Exibição como Número de Telefone.
No nó Detalhes do Cliente, escolha o campo Número de Telefone e, na janela Propriedades, defina a propriedade Tipo de Controle como Rótulo.
No nó Detalhes do Cliente, escolha o campo Nome da Companhia e, nas janelas Propriedades, defina a propriedade Posição do Rótulo como Alinhado à direita.
Repita essa etapa para todos os campos no nó Detalhes do Cliente e escolha o botão Salvar.
Seu aplicativo agora exibe as alterações que você fez.
Próximas etapas
Por padrão, quando você escolhe uma fonte de dados para uma tela, todos os dados da fonte aparecem. Se quiser apenas exibir um subconjunto dos dados, você poderá criar uma consulta para definir os dados para exibição. Consulte Como criar uma consulta usando o Designer de Consulta.