Como criar uma tela do Silverlight usando o Designer de Tela

Você pode alterar a aparência de uma tela utilizando o designer de tela.Você pode usar o designer de tela para realizar as seguintes tarefas de design.

Tarefas de Design de Comando e Campo

• Adicionar um grupo de informações em uma tela.

• Modificar o layout de um grupo.

• Adicionar botões.

• Adicionar itens.

• Remover itens.

• Mover Itens.

• Alterar o nome de exibição de um item.

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

• Alterar o tamanho de um item.

• Mostrar ou esconder um item.

• Mudar o tipo de controle de um item .

• Adicionar um controle personalizado a uma tela.

• Desfazer alterações.

Tarefas de Design de Coleção de Dados

• Escolher se uma coleção exibe dados quando a tela carregar pela primeira vez.

• Ativar ou desativar paginação.

• Ativar ou desativar ordenação.

• Ativar ou desativar pesquisa.

Para obter mais informações sobre como realizar tarefas de design enquanto o aplicativo é executado, consulte Como personalizar uma tela do Silverlight em um aplicativo em execução.

Adicionar um Grupo de Informações em uma Tela.

1. Na Árvore de Conteúdo da Tela, selecione um grupo para o qual você deseja adicionar um grupo de informações.

2. Na parte superior do Designer de Tela, clique em Adicionar Item de Layout, e clique em Grupo.

   Um novo grupo aparece.

3. Arraste itens para o grupo.Você pode arrastar itens da Lista de membros de tela do designer ou de outras áreas da árvore de conteúdo da tela.

Modificar o Layout de um Grupo.

1. Na Árvore de Conteúdo da Tela, clique na seta para baixo próximo a um grupo que você deseja modificar.

   Uma lista suspensa aparece.A lista suspensa mostra todos os tipos de controle que estão disponíveis para o grupo.

2. Na lista suspensa de controles, clique em um tipo de controle.

   O tipo de controle que você selecionar afeta o layout de grupo.Para obter mais informações sobre cada tipo de controle, consulte Referência: Propriedades de Designer de tela.

Adicionar Botões

1. Na Árvore de Conteúdo da Tela, selecione qualquer nó Barra de Comandos.

2. Na parte superior do Designer de Tela, clique em Adicionar Item de Layout, e clique em Botão.

   Um botão aparece abaixo do nó Barra de Comandos.

3. Adicione o código que será executado quando o usuário clicar no botão.Para obter mais informações, consulte Como adicionar um comando personalizado a uma tela do Silverlight.

Adicionar Itens

• Da Lista de membros de tela do Designer de tela, arraste um item (por exemplo, um campo ou um comando) para o local desejado na Árvore de Conteúdo da Tela.

  Dica
  A árvore de conteúdo da tela é a hierarquia dos objetos de tela que são mostrados no meio do designer.

  A medida que você arrasta o item, o cursor do mouse muda para indicar se o item pode ser colocado em um dado ponto.Se o cursor do mouse muda para um círculo com um corte atravéz dele, você não pode soltar o item naquele local.

  Você também pode adicionar campos personalizados a uma tela.Para obter mais informações, consulte Como adicionar uma propriedade local a uma tela do Silverlight.

Remover Itens

1. Na Árvore de Conteúdo da Tela, selecione o item (por exemplo, um campo ou um comando) que você deseja remover da tela.

2. Na parte superior da Árvore de Conteúdo da Tela, clique no botão Excluir.

Mover Itens

• Na Árvore de Conteúdo da Tela, arraste o item (por exemplo, um campo ou um comando) para o local desejado na lista de itens.

  Por exemplo, arraste o campo PostalCode para colocá-lo abaixo do campo Country, ou arraste o botão Editar para colocá-lo acima do botão Excluir.

  Observação
  A medida que você arrasta um campo, o cursor do mouse muda para indicar se o item pode ser colocado em um determinado ponto.Se o cursor do mouse muda para um círculo com um corte atravéz dele, você não pode soltar o item naquele local.

Alterar o Nome de Exibição de um Item

1. Na Árvore de Conteúdo da Tela, selecione o item (por exemplo, um campo ou um comando).

2. Na janela de Propriedades, selecione a caixa de texto em baixo de Nome para exibição e digite o nome desejado para o item.

   Alterar o nome de exibição não altera o nome do item.Altera apenas o nome com o qual o item é exibido na tela.

Alterar a Posição do Rótulo de um Item.

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

2. Na janela de Propriedades, clique na lista suspensa em baixo de Posição do Rótulo e selecione 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 à esquerda do controle.
   Alinhado à direita	O rótulo aparece à direita do controle.
   Superior	O rótulo aparece acima do controle.
   Parte Inferior	O rótulo aparece abaixo do controle.
   Nenhum	Nenhum rótulo aparece para o campo de dados selecionado.
   Recolhido	O campo é colocado no espaço que seria de outra maneira reservado para o rótulo.

Alterar o Tamanho de um Item

1. Na Árvore de Conteúdo da Tela, selecione o item (por exemplo, um campo ou um comando).

2. Na janela de Propriedades, em baixo de Dimensionamento, selecione o tamanho desejado para a largura e altura do controle.

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

Mostrar ou Esconder um Item

1. Na Árvore de Conteúdo da Tela, selecione o item (por exemplo, um campo ou um comando).

2. Na janela Propriedades, marque ou desmarque a propriedade É Visível.

   Se você selecionar É Visível, o item aparecerá na tela quando o aplicativo for executado.Se você apagar É Visível, o item não será visível na tela quando o aplicativo for executado.

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

Mudar o Tipo de Controle de um Item

1. Na Árvore de Conteúdo da Tela, selecione a lista suspensa próxima ao item.

2. Da lista suspensa, selecione o tipo de controle desejado.

   A maioria dos tipos de controle são tipos de controle internos.Você também pode definir o tipo de controle como um controle personalizado que você cria usando outras ferramentas.Para obter mais informações sobre controles personalizados, consulte Como adicionar um controle personalizado a uma tela do Silverlight.

Adicionar um Controle Personalizado a uma Tela.

1. Na Árvore de Conteúdo da Tela, selecione qualquer grupo.

2. Na parte superior do Designer de Tela, clique em Adicionar Item de Layout, e então clique em Controle Personalizado.

   Para obter mais informações, consulte Como adicionar um controle personalizado a uma tela do Silverlight.

Desfazer Alterações

• No menu Editar, clique em Desfazer.

  Dica
  Se você desfizer acidentalmente uma edição no Designer de Tela, clique em Refazer, no menu de Editar.

Escolher Se uma Coleção Exibe Dados Quando a Tela Carregar pela Primeira Vez.

1. Na Lista de membros de tela do Designer de tela, selecione o título de uma coleção (por exemplo, o título OrderCollection).

2. Na janela de Propriedades, desmarque a caixa de seleção Consulta Automaticamente Executada se você não deseja que a coleção mostre algum dado quando a tela aparecer.Selecione a caixa de seleção Consulta Automaticamente Executada se você deseja que a coleção mostre dados quando a tela aparecer.

Ativar ou Desativar Paginação

1. Na Lista de membros de tela do Designer de tela, selecione o título de uma coleção (por exemplo, o título OrderCollection).

2. Na janela de Propriedades, desmarque a caixa de seleção Paginação de suporte se você deseja que os usuários vejam todas as linhas retornadas por uma consulta mesmo que a coleção de linhas seja grande.Selecione a caixa de seleção Paginação de suporte se você desejar limitar o número de registros que aparecem ao usuário quando uma consulta retorna um grande número de registros.

3. Se você selecionar Paginação de suporte, em baixo de Número de itens a serem exibidos por página, especifique o número de linhas que você deseja que apareça para o usuário.

   Observação
   Os usuários podem avançar através de conjuntos de linhas clicando em um link na tela.

Ativar ou Desativar Ordenação

1. Na Lista de membros de tela do Designer de tela, selecione o título de uma coleção (por exemplo, o título OrderCollection).

2. Na janela de Propriedades, desmarque a caixa de seleção Ordenação de suporte se você não deseja que os usuários ordenem os dados que aparecem para a coleção.Selecione a caixa de seleção Paginação de suporte se você deseja permitir que os usuários classifiquem os dados que aparecem para a coleção.

Ativar ou Desativar Pesquisa

1. Na Lista de membros de tela do Designer de tela, selecione o título de uma coleção (por exemplo, o título OrderCollection).

2. Na janela de Propriedades, desmarque a caixa de seleção Pesquisa de suporte se você não deseja que uma caixa de pesquisa apareça acima da coleção.Selecione a caixa de seleção Pesquisa de suporte se você deseja que uma caixa de pesquisa apareça acima da coleção.Para obter mais informações sobre como habilitar usuários para pesquisar dados, consulte How to: Enable the User to Search Data.

Consulte também

Tarefas

Como personalizar uma tela do Silverlight em um aplicativo em execução

Como adicionar uma propriedade local a uma tela do Silverlight

Como adicionar um comando personalizado a uma tela do Silverlight

Como: adicionar dados a uma tela

Outros recursos

Telas: A Interface do usuário do seu aplicativo.