Trabalhar com elementos no Designer XAML

Você pode adicionar elementos — controles, layouts e formas — ao seu aplicativo em XAML, no código ou usando o Designer XAML. Este tópico descreve como trabalhar com elementos no Designer XAML no Visual Studio ou no Blend para Visual Studio.

Adicionar um elemento a um layout

Layout é o processo de dimensionamento e posicionamento de elementos em uma interface do usuário. Para posicionar elementos visuais, você deve colocá-los em um Painel. Um Panel tem uma propriedade filha que é uma coleção de tipos FrameworkElement. Você pode usar vários Panel elementos filho, como Canvas, StackPanel e Grid, para servir como contêineres de layout e posicionar e organizar os elementos em uma página.

Por padrão, um Grid painel é usado como o contêiner de layout de nível superior em uma página ou formulário. Você pode adicionar painéis de layout, controles ou outros elementos no layout de página de nível superior.

Para adicionar um elemento a um layout no Designer XAML, siga um destes procedimentos:

• Clique duas vezes em um elemento na Caixa de Ferramentas (ou selecione um elemento na Caixa de Ferramentas e pressione Enter).

• Arraste um elemento da Caixa de Ferramentas para a prancheta.

• Na Caixa de Ferramentas, selecione uma das ferramentas de desenho (por exemplo, Elipse ou Retângulo) e desenhe um elemento no painel ativo.

Alterar a ordem de camadas de elementos

Quando houver dois elementos na prancheta no Designer XAML, um elemento aparecerá na frente do outro na ordem de camadas. Na parte inferior da lista de elementos, na janela Estrutura de Tópicos do Documento, está o elemento mais à frente (exceto quando a propriedade ZIndex de um elemento é definida). Quando você insere um elemento em um contêiner de página, formulário ou layout, o elemento é colocado automaticamente na frente de outros elementos no elemento de contêiner ativo. Para alterar a ordem dos elementos, você pode usar os comandos Order ou arrastar os elementos na árvore de objetos na janela Estrutura de Tópicos do Documento.

Para alterar a ordem de camadas, siga um destes procedimentos:

• Na janela Estrutura de Tópicos do Documento , arraste os elementos para cima ou para baixo para criar a ordem de camadas desejada.

• Clique com o botão direito do mouse no elemento na janela Estrutura de Tópicos do Documento ou na prancheta para a qual você deseja alterar a ordem de camadas, aponte para Ordem e clique em um dos seguintes:

  • Trazer para Frente para levar o elemento até a frente da ordem.

  • Avance para levar o elemento adiante um nível na ordem.

  • Enviar para trás para enviar o elemento de volta um nível na ordem.

  • Envie para Voltar para enviar o elemento até a parte de trás da ordem.

• Altere a propriedade ZIndex na seção Layout na janela Propriedades. Para elementos sobrepostos, a propriedade ZIndex tem precedência sobre a ordem dos elementos mostrados na janela Estrutura de Tópicos do Documento. Um elemento que tem um valor ZIndex maior aparece na frente quando os elementos se sobrepõem.

Alterar o alinhamento de um elemento

Você pode alinhar elementos na prancheta usando comandos de menu ou arrastando elementos para linhas de alinhamento.

Um snapline é uma indicação visual que ajuda você a alinhar um elemento em relação a outros elementos no aplicativo.

Para alinhar dois ou mais elementos usando comandos de menu:

1. Selecione os elementos que você deseja alinhar. Você pode selecionar mais de um elemento pressionando e segurando a tecla Ctrl enquanto seleciona os elementos.

2. Selecione uma das seguintes propriedades em HorizontalAlignment na seção Layout da janela Propriedades: Esquerda, Centro, Direita ou Stretch.

3. Selecione uma das seguintes propriedades em VerticalAlignment na seção Layout da janela Propriedades: Superior, Central, Inferior ou Stretch.

Para alinhar dois ou mais elementos usando snaplines, no Designer XAML, em um layout que contém pelo menos dois elementos, arraste ou redimensione um dos elementos para que a borda seja alinhada com outro elemento.

Quando as bordas são alinhadas, um limite de alinhamento aparece para indicar o alinhamento. O limite de alinhamento é uma linha tracejada vermelha. Os limites de alinhamento aparecem somente quando o ajuste em snaplines está habilitado. Para obter uma ilustração da prancheta que mostra um limite de alinhamento, consulte Criando uma interface do usuário usando o Designer XAML.

Alterar as margens de um elemento

As margens no Designer XAML determinam a quantidade de espaço vazio em torno de um elemento na prancheta. Por exemplo, as margens especificam a quantidade de espaço entre as bordas externas de um elemento e os limites de um Grid painel que contém o elemento. As margens também especificam a quantidade de espaço entre os elementos contidos em um StackPanel.

Para alterar as margens de um elemento na janela Propriedades:

1. Selecione o elemento cujas margens você deseja alterar.

2. Em Layout na janela Propriedades, altere o valor (em pixels ou unidades independentes do dispositivo, que são aproximadamente 1/96 polegadas) para qualquer uma das propriedades Margin (Superior, Esquerda, Direita ou Inferior).

Na prancheta, para alterar as margens de um elemento em relação ao contêiner de layout do elemento, clique nos adornos de margem que aparecem ao redor do elemento quando o elemento é selecionado e está dentro de um contêiner de layout. Para obter uma ilustração que mostra os adornos de margem, consulte Criando uma interface do usuário usando o Designer XAML.

Se um adorno de margem estiver aberto, vertical ou horizontalmente, essa margem não será definida. Se um elemento decorativo de margem for fechado, essa margem será definida.

Quando você abre um adorno de margem e a margem oposta não é definida, a margem oposta será definida para o valor correto de acordo com a posição do elemento na prancheta. Para margens opostas, como as margens esquerda e direita , pelo menos uma propriedade é sempre definida.

Agrupar e desagrupar elementos

Agrupar dois ou mais elementos no Designer XAML cria um novo contêiner de layout e coloca esses elementos dentro desse contêiner. Colocar dois ou mais elementos juntos em um contêiner de layout permite que você selecione, mova e transforme facilmente o grupo como se os elementos nesse grupo fossem um elemento. O agrupamento também é útil para identificar elementos relacionados uns aos outros de alguma forma, como os botões que compõem um elemento de navegação. Ao desagrupar elementos, você está simplesmente excluindo o contêiner de layout que continha os elementos.

Para agrupar elementos em um novo contêiner de layout:

1. Selecione os elementos que você deseja agrupar. (Para selecionar vários elementos, pressione e segure a tecla Ctrl enquanto clica neles.)

2. Clique com o botão direito do mouse nos elementos selecionados, aponte para Agrupar e clique no tipo de contêiner de layout no qual você deseja que o grupo resida.

   Dica

   Se você selecionar Viewbox, Border ou ScrollViewer para agrupar seus elementos, os elementos serão colocados em um novo painel grade dentro da Caixa de Exibição, Borda ou ScrollViewer. Se você desagrupar elementos em um desses contêineres de layout, somente a Caixa de Exibição, Borda ou ScrollViewer será excluída e o painel Grade permanecerá. Para excluir o Grid painel, desagrupe os elementos novamente.

Para desagrupar elementos e excluir o layout, clique com o botão direito do mouse no grupo que você deseja desagrupar e clique em Desagrupar. Você também pode agrupar ou desagrupar elementos clicando com o botão direito do mouse em itens selecionados na janela Estrutura de Tópicos do Documento e clicando em Agrupar ou Desagrupar.

Redefinir o layout do elemento

Você pode restaurar valores padrão para propriedades de layout específicas de um elemento usando os comandos de Redefinição de Layout. Usando esse comando, você pode redefinir a margem, o alinhamento, a largura, a altura e o tamanho de um elemento, individual ou coletivamente.

Para redefinir o layout do elemento, clique com o botão direito do mouse no elemento na janela Estrutura de Tópicos do Documento ou na prancheta e, em seguida, escolha Layout>ResetPropertyName, em que PropertyName é a propriedade que você deseja redefinir (ou escolha Layout>Redefinir Tudo para redefinir todas as propriedades de layout para o elemento).

Conteúdo relacionado

• Criar uma interface do usuário usando o Designer XAML