Tour do Designer de Tela

É possível criar uma tela usando o designer de tela. O designer de tela abre quando você cria uma tela ou quando clica duas vezes em qualquer nó da tela no Gerenciador de Soluções.

Este tópico contém as seções a seguir:

• Visão geral do Designer de Tela

• Lista de membros da tela

• Árvore de conteúdo da tela

• Barra de comandos do Designer de Tela

Visão geral do Designer de Tela

O designer de tela consiste na lista de membros da tela, na barra de comandos do designer de tela e na árvore de conteúdo da tela. A ilustração a seguir mostra o local de cada área no designer de tela.

Lista de membros da tela

A lista de membros de tela contém os itens disponíveis para a tela. Esses itens incluem dados, métodos e propriedades locais. É possível incorporar esses itens à tela, arrastando-os para a árvore de conteúdo da tela.

Por padrão, a lista de membros da tela contém os métodos associados aos comandos básicos de uma tela (por exemplo: o comando Salvar). A lista também contém coleções de dados que você seleciona no assistente de Adicionar Nova Tela. Também é possível adicionar itens à lista de membros da tela.

A ilustração a seguir mostra a lista de membros da tela.

Dados na lista de membros da tela

Na lista de membros da tela, os dados disponíveis para a tela aparecem como nós de coleção. É possível exibir os campos de uma coleção expandindo o nó da coleção. É possível adicionar uma coleção de dados à tela, arrastando o nó da coleção da lista de membros da tela para a árvore de conteúdo da tela. Também é possível arrastar campos individuais da lista de membros da tela para a árvore de conteúdo da tela.

É possível modificar a aparência e o comportamento de uma coleção usando a janela Propriedades. É possível especificar quais linhas de dados aparecerão em uma coleção clicando-se no link Editar Consulta perto do nome da coleção. Para obter mais informações, consulte Como filtrar dados em uma tela do Silverlight.

Propriedades locais na lista de membros da tela

É possível adicionar campos personalizados chamados de propriedades locais para coletar ou exibir informações. Como coleções e campos, você pode arrastar as propriedades locais da lista de membros da tela para a árvore de conteúdo da tela. Na árvore de conteúdo da tela, as propriedades locais aparecem como controles (por exemplo: uma caixa de texto). Para obter mais informações, consulte Como adicionar uma propriedade local a uma tela do Silverlight.

Métodos na lista de membros da tela

Um método é uma unidade de lógica de negócio que pode ser associada a um botão na tela. Arraste os métodos para qualquer nó da barra de comandos na árvore de conteúdo da tela. O designer de tela adiciona automaticamente um botão em que o usuário pode clicar para executar o método. Para obter mais informações, consulte Como adicionar um comando personalizado a uma tela do Silverlight.

Árvore de conteúdo da tela

A árvore de conteúdo da tela representa o conteúdo de uma tela como uma hierarquia de nós chamada grupos. É possível expandir ou recolher grupos para exibir os comandos, as propriedades locais e os campos de dados contidos no grupo.

A ilustração a seguir mostra a árvore de conteúdo da tela:

É possível especificar a maneira como você deseja que a informação seja organizada em um grupo, selecionando layouts de controle do grupo. Também é possível adicionar grupos a outros grupos e adicionar, remover e posicionar campos e comandos. Para obter mais informações sobre como executar qualquer uma dessas tarefas na árvore de conteúdo da tela, consulte Como criar uma tela do Silverlight usando o Designer de Tela.

Barra de comandos do Designer de Tela

A barra de comandos do designer de tela é exibida logo acima da árvore de conteúdo da tela. Essa barra de comandos contém os comandos que podem ser usados para editar a consulta de uma coleção, adicionar coleções, criar propriedades locais e métodos, remover informações de uma tela e gravar código personalizado executado quando ocorrem determinados eventos relacionados à tela. A tabela a seguir descreve cada botão na barra de comandos do designer de tela:

Comando	Descrição
Editar consulta	Use esse comando para modificar a consulta de uma coleção de dados. Esse comando só aparecerá se você selecionar o título de uma coleção na lista de membros da tela. Para obter mais informações, consulte Como filtrar dados em uma tela do Silverlight.
Adicionar item de dados	Use esse comando para adicionar um método, uma propriedade local ou uma coleção de dados à tela. Para obter mais informações, consulte qualquer um destes tópicos: Como adicionar um comando personalizado a uma tela do Silverlight. Como adicionar dados a uma tela. Como adicionar uma propriedade local a uma tela do Silverlight.
Adicionar item de layout	Use esse comando para adicionar um botão, um grupo ou um controle personalizado à tela. Para obter mais informações sobre como adicionar botões e grupos, consulte Como criar uma tela do Silverlight usando o Designer de Tela. Para obter mais informações sobre como adicionar um controle personalizado, consulte Como adicionar um controle personalizado a uma tela do Silverlight.
Excluir	Use esse comando para excluir itens que apareçam na lista de membros da tela ou na árvore de conteúdo da tela.
Redefinir	Use o comando para redefinir os controles segundo o tipo de controle padrão e adicionar os campos de adição que você tinha removido. Esse comando só é aplicado a determinados tipos de controles.
Gravar código	Use esse comando para abrir o arquivo de código da tela. No arquivo de código da tela, na lista suspensa Declarações, é possível selecionar os métodos que você deseja estender. Na barra de comandos do Designer de Tela, é possível clicar na seta suspensa perto do botão Gravar Código para revelar uma lista de métodos que se aplicam ao item selecionado no momento, na árvore de conteúdo da tela ou na lista de membros da tela. Nessa lista, você pode selecionar os métodos que deseja estender. Para obter mais informações, consulte Como tratar eventos de telas do Silverlight.

Consulte também

Tarefas

Como criar uma tela do Silverlight

Como criar uma tela do Silverlight usando o Designer de Tela

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

Como criar uma tela do cliente HTML

Como criar uma tela HTML usando o Designer de Tela

Conceitos

Referência: propriedades do Designer de Tela

Outros recursos

Telas: a interface de usuário do aplicativo LightSwitch