Criando uma interface de usuário usando o Designer XAML

O XAML Designer no Visual Studio 2012 fornece uma interface visual para ajudar a criar aplicativos do Windows Store compilados usando XAML, WPF e aplicativos do Silverlight. Você pode criar interfaces do usuário para seus aplicativos arrastando controles da Caixa de Ferramentas e configurando propriedades na janela Propriedades. Você também pode editar XAML diretamente no modo de exibição XAML.

Espaço de trabalho do Designer XAML

O espaço de trabalho no Designer XAML no Visual Studio consiste em vários elementos da interface visual. Esses elementos incluem o artboard, a Caixa de Ferramentas, a janela Dispositivo, a janela Estrutura de Tópicos de Documento, o Gerenciador de Soluções, a janela Propriedades e o editor XAML. Para abrir o Designer XAML, clique com o botão direito do mouse em uma página do XAML no Gerenciador de Soluções e selecione Exibir Designer.

Criando modos de exibição

O Designer XAML fornece um modo de exibição XAML e um modo Design sincronizado de marcação XAML renderizada de seu aplicativo. Com um documento XAML aberto no Visual Studio, você pode alternar entre o modo Design e modo de exibição XAML usando as guias Design e XAML. No modo Design, a janela que contém o artboard é a janela ativa. Você pode usá-la como superfície de trabalho primária. Você pode usá-la para criar visualmente uma página em seu aplicativo adicionando ou desenhando elementos e depois modificando-os. Para saber mais, veja Trabalhando com elementos no Designer XAML. Esta ilustração mostra o artboard no modo Design.

Você pode usar o botão Alternar Painéis para alternar qual janela é exibida no topo: o artboard ou o Editor XAML.

Estes recursos estão disponíveis no artboard:

• Guias de alinhamento
  As guias de alinhamento são limites de alinhamento que são exibidos como linhas vermelho-tracejadas para mostrar quando as bordas dos controles estão alinhadas ou quando as linhas de base de texto estão alinhadas. Os limites de alinhamento só são exibidos quando a opção de ajuste a guias de alinhamento está habilitada.

• Rails de grade
  Os rails de Grid são usados para gerenciar linhas e colunas em um painel Grade. Você pode criar e excluir linhas e colunas, bem como ajustar suas larguras e alturas relativas. O rail Grade vertical, exibido à esquerda do arboard, é usado para linhas, e a linha horizontal, exibida na parte superior, é usada para colunas.

• Adornos de grade
  Um adorno Grid é exibido como um triângulo que tem uma linha vertical ou horizontal anexada a ele no rail Grid. Quando você arrasta um adorno Grid, as larguras ou alturas das linhas ou colunas adjacentes são atualizadas enquanto o mouse é movimentado.

  Os adornos Grid são usados para controlar a largura e altura das linhas e colunas de uma Grid. Você pode adicionar uma nova coluna ou linha clicando nos rails de Grid. Quando você adiciona uma nova linha ou linha de coluna a um painel Grid que possui duas ou mais colunas ou linhas, uma minibarra de ferramentas exibida fora do rail permite definir explicitamente a largura e a altura. A minibarra de ferramentas permite que você defina opções de dimensionamento fixo, estrela ou automático para linhas e colunas de Grid.

• Alças de redimensionamento
  As alças de redimensionamento são exibidas em controles selecionados e permitem redimensionar o controle. Quando você redimensiona um controle, os valores de largura e altura geralmente são exibidos para ajudar a dimensionar o controle. Para saber mais sobre a manipulação de controles no modo Design, veja Trabalhando com elementos no Designer XAML.

• Margens
  As margens representam o espaço fixo entre a borda de um controle e a borda do respectivo contêiner. Você pode definir as margens de um controle usando as propriedades Margem em Layout na janela Propriedades.

• Adornos de margem
  Você pode usar adornos de margem para alterar as margens de um elemento relativo ao respectivo contêiner de layout. Quando um adorno de margem está aberto, uma margem não está definida, e o adorno de margem exibe uma cadeia quebrada. Quando a margem não está definida, os elementos permanecem no lugar quando o contêiner de layout é redimensionado em tempo de execução. Quando um adorno de margem está fechado, um adorno de margem exibe uma cadeia ininterrupta, e os elementos são movidos com a margem enquanto o contêiner de layout é redimensionado em tempo de execução (a margem permanece fixa).

• Alças do elemento
  Você pode modificar um elemento usando as alças do elemento que são exibidas no artboard ao mover o ponteiro sobre os cantos da caixa azul que circunda um elemento. Essas alças permitem girar, redimensionar, inverter, mover ou adicionar um radiano do canto ao elemento. O símbolo da alça do elemento varia por função e altera dependendo do local exato do ponteiro. Se você não vir as alças do elemento, verifique se o elemento está selecionado.

No modo Design, os comandos adicionais do artboard estão disponíveis na área esquerda inferior da tela, como mostrado aqui:

Estes comandos estão disponíveis na barra de ferramentas:

• Zoom
  O zoom permite dimensionar a superfície de design. Você pode aplicar zoom de 12,5% a 800% ou selecionar opções, como Ajustar à Seleção e Ajustar a Tudo.

• Grade de ajuste Mostrar/Ocultar
  Exibe ou oculta a grade de ajuste que mostra as linhas de grade. As linhas de grade são usadas quando a opção de ajuste a linhas de grade ou de ajuste a guias de alinhamento está habilitada.

• Ativar/desativar ajuste às linhas de grade
  Se a opção de ajuste às linhas de grade estiver habilitada quando você arrastar um elemento no artboard, a tendência será o elemento alinhar-se às linhas de grade horizontais e verticais mais próximas.

• Ativar/desativar ajuste às guias de alinhamento
  As guias de alinhamento ajudam a alinhar os controles relativos uns aos outros. Se a opção de ajuste às guias de alinhamento estiver habilitada, quando você arrastar um controle relativo a outros controles, os limites de alinhamento serão exibidos quando as margens e o texto de alguns controles estiverem alinhados horizontal ou verticalmente. Um limite de alinhamento é exibido como uma linha vermelho-tracejada.

No modo de exibição XAML, a janela que contém o editor XAML é a janela ativa, e o editor XAML é a ferramenta de criação primária. A linguagem XAML fornece um vocabulário declarativo, com base em XML, para especificar a interface do usuário de um aplicativo. O modo de exibição XAML inclui o IntelliSense, formatação automática, realce de sintaxe e navegação de marca. Esta ilustração mostra o modo de exibição XAML:

• Barra do modo divisão
  A barra do modo divisão é exibida na parte superior do modo de exibição XAML quando o editor XAML está na janela inferior. A barra do modo divisão permite controlar os tamanhos relativos do modo Design e do modo de exibição XAML. Você também pode trocar os locais dos modos de exibição (usando o botão Alternar Painéis), especificar se os modos de exibição são organizados horizontal ou verticalmente e recolher o modo de exibição.

• Zoom de marcação
  O zoom de marcação permite dimensionar o modo de exibição XAML. Você pode aplicar zoom de 20% a 400%.

Janela Dispositivo

A janela Dispositivo no Designer XAML para Visual Studio permite simular em tempo de design vários modos de exibição, vídeos e opções de exibição para seu aplicativo. Veja como ela se parece:

Estas são as opções disponíveis na janela Dispositivo:

• Modo de Exibição
  Especifica a orientação e o layout do aplicativo. Os modelos de projeto de aplicativos do Windows Store compilados com XAML (Grade, Divisão e Em Branco) podem detectar e retransmitir os modos de exibição mencionados acima. Cada página dos modelos fornece estes modos de exibição:

  • Paisagem. Modo de exibição de tela inteira (L x A). Este é o modo de exibição padrão.

  • Ajustado. Exibido quando o aplicativo é ajustado em um lado pelo usuário. O aplicativo se estende verticalmente em todas as páginas. Nesse modo de exibição, o aplicativo tem 320 pixels de largura.

  • Preenchido. Exibido quando o usuário ajusta dois aplicativos para o lado. Nesse modo de exibição, o aplicativo é estreitado em 322 pixels.

  • Retrato. Modo de exibição de tela inteira (A x L). Neste modo de exibição, os valores de largura e altura do aplicativo são trocados.

  Dependendo do modo de exibição definido pelo usuário, alguns modos de exibição podem ser desabilitados. Por exemplo, se você definir a resolução de vídeo para 1.280 x 800, os modos preenchido e ajustado serão desabilitados. Para contratos, alguns estados visuais, descritos na próxima seção, podem não estar disponíveis.

• Estado visual
  Especifica o estado atual no grupo de estado visual ApplicationViewState que deve ser exibido para editar o modo de exibição atual. Esta opção será desabilitada se esses estados não forem encontrados no documento atual. (Os estados são incluídos e definidos por padrão no modelo de item Página Básica no Visual Studio.)

• Vídeo
  Especifica a resolução de vídeo do dispositivo para o qual você está criando seu aplicativo.

• Tema
  Especifica o tema do aplicativo.

• Mostrar cromado
  Ativa ou desativa o quadro de tablet simulado em torno do aplicativo no modo Design. Marque a caixa de seleção para mostrar o quadro.

• Substituir colocação em escala
  Ativa e desativa a emulação da colocação de documento em escala na superfície de design. Isso permite aumentar o percentual de colocação em escala por um fator. Marque a caixa de seleção para ativar a emulação. Por exemplo, se o percentual de colocação em escala for de 100%, o documento na superfície de design será dimensionado em até 140%. Essa opção será desabilitada se o percentual de colocação em escala atual for de 180.

• Recortar para exibir
  Especifica o modo de exibição. Marque a caixa de seleção para recortar o tamanho do documento de acordo com o tamanho do vídeo.

Janela Estrutura de Tópicos de Documento

A janela Estrutura de Tópicos de Documento no Designer XAML ajuda a executar estas tarefas:

• Exibir a estrutura hierárquica de todos os elementos no artboard.

• Selecionar elementos para que você possa modificá-los (movê-los na hierarquia, modificá-los no artboard, definir suas propriedades na janela Propriedades e assim por diante). Para saber mais, veja Trabalhando com elementos no Designer XAML.

• Criar e modificar modelos para elementos que são controles.

• Usar o menu de contexto para elementos selecionados. O mesmo menu também está disponível para os elementos selecionados no artboard.

As opções disponíveis na janela Estrutura de Tópicos de Documento incluem:

• Estrutura de Tópicos de Documento
  O modo de exibição principal na janela Estrutura de Tópicos de Documento exibe a hierarquia de um documento em uma estrutura de árvore. Você pode usar a natureza hierárquica da estrutura de tópicos de documento para examinar o documento em vários níveis de detalhes, bem como para bloquear e ocultar os elementos individualmente ou em grupos.

• Mostrar/ocultar
  Exibe ou oculta os elementos do artboard que correspondem aos itens na Estrutura de Tópicos de Documento. Use os botões Mostrar/Ocultar, que exibem um símbolo de olho quando mostrados, ou pressione CTRL+H para ocultar elementos e SHIFT+CTRL+H para exibi-los.

• Bloquear/desbloquear
  Bloqueia ou desbloqueia os elementos do artboard que correspondem aos itens na Estrutura de Tópicos de Documento. Os elementos bloqueados não podem ser modificados. Use os botões Bloquear/desbloquear, que exibem um símbolo de cadeado quando bloqueados, ou pressione CTRL+L para bloquear elementos e SHIFT+CTRL+L para desbloqueá-los.

• Retornar escopo a
  A opção na parte superior da janela Estrutura de Tópicos de Documento, que mostra um símbolo de seta para cima, retorna a estrutura de tópicos de documento ao escopo anterior. O controle de escopo só é aplicável quando você está no escopo de um estilo ou modelo.

Janela Propriedades

A janela Propriedades permite definir valores de propriedade em controles. Veja como ela se parece:

Há várias opções na parte superior da janela Propriedades. Você pode alterar o nome do elemento atualmente selecionado usando a caixa Nome. No canto esquerdo superior, há um ícone que representa o elemento atualmente selecionado. Para organizar as propriedades por categoria ou em ordem alfabética, clique em Categoria, Nome ou Fonte na lista Organizar por. Para ver a lista de eventos de um controle, clique no botão Eventos, que exibe um símbolo de relâmpago. Para procurar uma propriedade, comece a digitar o nome da propriedade na caixa Pesquisar. A janela Propriedades exibe as propriedades que correspondem à pesquisa à medida que você digita. Algumas propriedades permitem que você defina propriedades avançadas selecionando um botão de seta para baixo. Para saber mais sobre como usar propriedades e manipular eventos, veja o artigo sobre adição de controles e manipulação de eventos

À direita de cada valor de propriedade está um marcador de propriedade que é exibido como símbolo de caixa. A aparência do marcador da propriedade indica se existe uma associação de dados ou um recurso aplicado à propriedade. Por exemplo, um símbolo de caixa branca indica um valor padrão, um símbolo de caixa preta normalmente indica que um recurso local foi aplicado, e uma caixa laranja geralmente indica que uma associação de dados foi aplicada. Quando você clica no marcador da propriedade, pode navegar para a definição de um estilo, abrir o construtor da associação de dados ou abrir o selecionador de recurso.

Consulte também

Tarefas

Como criar e aplicar um recurso

Como associar dados no Designer XAML

Conceitos

Trabalhando com elementos no Designer XAML

Outros recursos

How to set a gradient brush on a control

Resource dictionaries

Referência de interface de usuário do Designer XAML