Trabalhando com elementos no Designer XAML
Você pode adicionar elementos - controles, layouts e formas - ao seu aplicativo no XAML, no código ou usando o XAML Designer. Este tópico descreve como trabalhar com elementos no Designer XAML.
Adicionando um elemento a um layout
Layout é o processo de redimensionar e posicionar elementos em uma interface de usuário. Para posicionar elementos visuais, você deve colocá-los em um layout Painel. Um Panel tem uma propriedade filho que é uma coleção de tipos FrameworkElement. Você pode usar diversos elementos filho de Panel, como Tela, StackPanel e Grade, para servir como contêineres de layout e permitir que você posicione e organize os elementos em uma página.
Por padrão, um painel Grid é usado como o contêiner de layout de nível superior em um documento de página em um Aplicativo da Windows Store em JavaScript para Windows. 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
Em um projeto do Visual Studio, na janela Estrutura de Tópicos de Documento, siga um destes procedimentos:
Dê um clique duplo 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 or Retângulo) e desenhe um elemento no painel ativo.
.gif "Hh965587.collapse_all(pt-br,VS.110).gif")
Alterando a ordem das camadas de elementos
Quando houver dois elementos na prancheta do XAML Designer, um dos elementos será exibido na frente do outro na ordem de camadas. No final da lista de elementos da janela Estrutura de Tópicos de Documento se encontra o elemento mais à frente (exceto quando a propriedade ZIndex estiver definida para um elemento). Quando você inserir um elemento em um documento ou contêiner de layout, o elemento será automaticamente colocado na frente de outros elementos no elemento de contêiner ativo. Para alterar a ordem dos elementos, você pode usar os comandos Ordem ou arrastar os elementos na árvore de objetos na janela Estrutura de Tópicos de Documento.
Para alterar a ordem das camadas
Siga um destes procedimentos:
Na janela Estrutura de Tópicos de Documento, arraste os elementos para cima ou para baixo para criar a ordem das camadas desejada.
Na janela Estrutura de Tópicos de Documento ou na prancheta, clique com o botão direito do mouse no elemento cuja ordem de camadas você deseja alterar, selecione Ordem e clique em uma destas opções:
Trazer para a Frente para colocar o elemento na parte da frente da ordem.
Avançar para avançar o elemento um nível na ordem.
Recuar para recuar o elemento um nível na ordem.
Enviar para Trás para enviar o elemento para a parte posterior da ordem.
Altere a propriedade ZIndex na seção Layout na Janela de propriedades. Para sobrepor elementos, a propriedade ZIndex tem precedência sobre a ordem de elementos mostrada na janela Estrutura de Tópicos de Documento. Um elemento com um valor ZIndex inferior será exibido na frente quando houver sobreposição de elementos.
Alterando o alinhamento de um elemento
Você pode alinhar elementos na prancheta usando comandos de menu ou arrastando os elementos para guias de alinhamento.
Guia de alinhamento é uma indicaçã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
Selecione os elementos que deseja alinhar. Você pode selecionar mais de um elemento mantendo pressionada a tecla CTRL ao selecionar os elementos.
Selecione uma das seguintes propriedades em HorizontalAlignment na seção Layout da Janela de propriedades: Esquerda, Centralizar, Direita ou Alongar.
Selecione uma das seguintes propriedades em VerticalAlignment na seção Layout da Janela de propriedades: Superior, Centralizar, Inferior ou Alongar.
Para alinhar dois ou mais elementos usando guias de alinhamento
No XAML Designer, em um layout que contenha, pelo menos, dois elementos, arraste ou redimensione um dos elementos de forma que a borda seja alinhada a outro elemento.
Quando as bordas estão alinhadas, um limite de alinhamento é exibido para indicar o alinhamento. O limite de alinhamento é exibido como uma linha vermelha tracejada. Os limites de alinhamento só são exibidos quando a opção de ajuste a guias de alinhamento está habilitada. Para ver uma ilustração do artboard que mostra um limite de alinhamento, consulte Criando uma interface de usuário usando o Designer XAML.
Alterando as margens de um elemento
As margens no XAML Designer determinam o espaço vazio ao redor de um elemento na prancheta. Por exemplo, as margens especificam o espaço entre as bordas externas de um elemento e os limites de um painel Grid que contém o elemento. As margens também especificam o espaço entre os elementos que estão contidos em um StackPanel.
Para alterar as margens de um elemento
Selecione o elemento cujas margens você deseja alterar.
Em Layout, na janela Propriedades, altere o valor (em pixels ou em unidades independentes de dispositivos, de aproximadamente 1/96 polegada) de qualquer propriedade Margem (Superior, Esquerda, Direita ou Inferior).
Para alterar as margens de um elemento na prancheta
Para alterar as margens de um elemento relativo ao respectivo contêiner de layout, clique nos adornos de margem exibidos ao redor do elemento na prancheta quando o elemento for selecionado e estiver em um contêiner de layout. Para ver uma ilustração que mostra os adornos de margem, consulte Criando uma interface de usuário usando o Designer XAML.
Se um adorno de margem estiver aberto, vertical ou horizontalmente, essa margem não estará definida. Se um adorno de margem está fechado, essa margem está definida.
Quando você abre um adorno de margem, e a margem oposta não está definida, a margem oposta é definida como o valor correto de acordo com o local do elemento na prancheta. Para margens opostas, como a margem Esquerda e Direita, pelo menos uma propriedade sempre será definida.
Importante
Elementos colocados dentro de alguns contêineres de layout, como Canvas, não têm adornos de margem. Elementos colocados dentro de um StackPanel têm adornos para as margens esquerda e direita ou para as margens superior e inferior, dependendo da orientação do StackPanel.
Agrupando e desagrupando elementos
O agrupamento de dois ou mais elementos no XAML Designer cria um novo contêiner de layout e coloca esses elementos dentro do contêiner. A colocação de 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 único elemento. O agrupamento também é útil para identificar elementos relacionados entre si de alguma forma, como os botões que compõem um elemento de navegação. Ao desagrupar elementos, você simplesmente exclui o contêiner de layout que continha os elementos.
Para agrupar elementos em um novo contêiner de layout
Selecione os elementos que você deseja agrupar. (Para selecionar diversos elementos, mantenha pressionada a tecla CTRL ao clicar neles.)
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 deseja que o grupo resida.
Dica
Se você selecionar Viewbox, T:Windows.UI.Xaml.Controls.Border ou ScrollViewer para agrupar seus elementos, os elementos serão colocados em um novo painel Grid dentro de Viewbox, Border ou ScrollViewer. Se você desagrupar elementos em um desses contêineres de layout, apenas Viewbox, Border ou ScrollViewer será excluído, e o painel Grid permanecerá. Para excluir o painel Grid, 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 de Documento e clicando em Agrupar em ou Desagrupar.
Redefinindo o layout do elemento
Você pode restaurar valores padrão de propriedades de layout específicas de um elemento usando o comando Redefinir Layout. Ao usar 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
- Na janela Estrutura de Tópicos de Documento ou na prancheta, clique com o botão direito do mouse no elemento, selecione Redefinir Layout e, em seguida, clique na propriedade que você deseja redefinir (ou clique em Tudo para redefinir todas as propriedades de layout para o elemento).