Trabalhar com elementos no Designer XAML

Você pode adicionar elementos — controles, layouts e formas — ao seu aplicativo em XAML, em código ou usando o Designer XAML. Este tópico descreve como trabalhar com elementos no Designer XAML no Visual Studio ou no Blend for 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 de layout. A Panel tem uma propriedade subordinada que é uma coleção de tipos FrameworkElement. Você pode usar vários Panel elementos filho, como Canvas, StackPanel e Grid, para atuar como contentores de layout e para dispor e organizar os elementos numa página.

Por padrão, um Grid painel é usado como o contêiner de layout de nível superior dentro de uma página ou formulário. Você pode adicionar painéis de layout, controles ou outros elementos dentro do 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 superfície de trabalho.

• 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 das camadas dos 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, encontra-se o elemento que está à frente (exceto quando a propriedade ZIndex de um elemento está definida). Quando você insere um elemento em uma página, formulário ou contêiner de layout, o elemento é automaticamente colocado 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 das 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 rato no elemento na janela Estrutura de Tópicos do Documento ou na prancheta para a qual pretende alterar a ordem das camadas, aponte para Ordem e, em seguida, clique numa das seguintes opções:

  • Levar para a frente para posicionar o elemento no início da ordem.

  • Avançar para mover o elemento um nível à frente na ordem.

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

  • Enviar para o Fundo para enviar o elemento para a posição mais baixa na 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 mais alto 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 ajuste.

Um snapline é uma sugestão visual que ajuda 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 deseja alinhar. Você pode selecionar mais de um elemento pressionando e mantendo pressionada a tecla Ctrl enquanto seleciona os elementos.

2. Selecione uma das seguintes propriedades em HorizontalAlignment na seção Layout da janela Properties: Left, Center, Right ou Stretch.

3. Selecione uma das seguintes propriedades em VerticalAlignment na seção Layout da janela Properties: Top, Center, Bottom ou Stretch.

Para alinhar dois ou mais elementos usando linhas de ajuste, no Designer XAML, em um layout que contenha pelo menos dois elementos, arraste ou redimensione um dos elementos para que a borda fique alinhada com outro elemento.

Quando as bordas estão alinhadas, um limite de alinhamento parece indicar alinhamento. O limite de alinhamento é uma linha tracejada vermelha. Os limites de alinhamento aparecem apenas quando o ajuste às linhas de ajuste está ativado. 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 ao redor 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 StackPanelarquivo .

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 de Margem (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 decoradores de margem, consulte Criar uma interface de utilizador com o Designer XAML.

Se um ornamento de margem estiver aberto, verticalmente ou horizontalmente, essa margem não é ajustada. Se um adorno de margem for fechado, essa margem é estabelecida.

Quando se abre um adorno de margem e a margem oposta não está definida, a margem oposta é ajustada para o valor correto de acordo com a localização do elemento na tela de desenho. Para margens opostas, como as margens Esquerda e Direita , pelo menos uma propriedade é sempre definida.

Agrupar e desagrupar elementos

O agrupamento de 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 desse grupo fossem um elemento. O agrupamento também é útil para identificar elementos que estão relacionados entre si 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 deseja agrupar. (Para selecionar vários elementos, pressione e mantenha pressionada a tecla Ctrl enquanto clica neles.)

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

   Sugestão

   Se você selecionar Viewbox, Border ou ScrollViewer para agrupar seus elementos, os elementos serão colocados em um novo painel Grid dentro da Viewbox, Border ou ScrollViewer. Se você desagrupar elementos em um desses contêineres de layout, somente o Viewbox, Border ou ScrollViewer será excluído e o painel Grid 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 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 em 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 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 rato no elemento na janela Estrutura de Tópicos do Documento ou na prancheta e escolha Layout>RedefinirPropertyName, onde PropertyName é a propriedade que deseja redefinir (ou escolha Layout>Redefinir Tudo para redefinir todas as propriedades de layout do elemento).

Conteúdo relacionado

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