Compartilhar via

Configurar opções do Designer XAML no Visual Studio

O Designer XAML no Visual Studio permite editar visualmente documentos XAML para projetos WPF e UWP. Ao habilitar e personalizar as opções do Designer, você pode simplificar seu fluxo de trabalho e adaptar a experiência de edição às suas necessidades. Este artigo orienta você sobre como habilitar o Designer e configurar suas principais opções.

Pré-requisitos

  • Visual Studio instalado
  • Um projeto baseado em XAML (como WPF ou UWP)

Habilitar o Designer XAML

Habilite o Designer XAML para acessar recursos de edição visual e intelliSense avançado para documentos XAML.

  1. Inicie o Visual Studio e selecione Opções de Ferramentas > no menu principal.

  1. No painel Opções, expanda a seção Todas as Configurações>Designer XAML>Geral.

  2. Marque a caixa de seleção Habilitar Designer XAML .

  3. Reinicie o Visual Studio para que as alterações entrem em vigor.

  1. Na caixa de diálogo Opções, expanda a seção XAML Designer>Geral.

  1. Marque a caixa de seleção Habilitar Designer XAML e selecione OK.

  2. Reinicie o Visual Studio para que as alterações entrem em vigor.

Definir a exibição de documento padrão

Escolha como os documentos XAML aparecem quando abertos, incluindo o código-fonte XAML, a exibição de design visual do código ou ambos.

  1. Abra o painel Ferramentas>Opções e expanda a seção Todas as Configurações>Designer XAML>Geral.
  1. Abra a caixa de diálogoOpções de > e expanda a seçãoGeral do > XAML.

  1. Use a lista suspensa e defina o valor da configuração de visualização padrão do documento:

    • Exibição do Código-Fonte: mostrar apenas o código-fonte XAML.
    • Modo de Exibição de Design: mostrar somente o designer visual.
    • Exibição dividida: mostrar o designer visual e o código-fonte lado a lado.
  1. Selecione OK.

Alterar orientação de divisão

Ajuste o layout do Modo de Exibição Dividida para atender ao fluxo de trabalho.

  1. Abra o painel Ferramentas>Opções e expanda a seção Todas as Configurações>Designer XAML>Geral.
  1. Abra a caixa de diálogoOpções de > e expanda a seçãoGeral do > XAML.

  1. Use a lista suspensa e defina o valor da configuração da orientação da divisão:

    • Vertical: mostrar o código-fonte no painel esquerdo e o designer visual no painel direito.
    • Horizontal: mostrar o designer visual no painel superior e o código-fonte no painel inferior.
    • Padrão: Use a orientação recomendada pela plataforma.
  1. Selecione OK.

Configurar o comportamento de zoom

Defina como ampliar o Designer XAML para facilitar a navegação.

  1. Abra o painel Ferramentas>Opções e expanda a seção Todas as Configurações>Designer XAML>Geral.
  1. Abra a caixa de diálogoOpções de > e expanda a seçãoGeral do > XAML.

  1. Use a lista suspensa e defina o valor do Zoom usando a configuração:

    • Roda do mouse
    • Ctrl + roda do mouse
    • Alt + roda do mouse
  1. Selecione OK.

Para obter mais informações sobre como redefinir as configurações do Visual Studio, consulte Redefinir configurações.

Configuração de Zoom Padrão

Use essa configuração para determinar o valor de zoom padrão para exibir o documento XAML.

  1. Abra o painel Ferramentas>Opções e expanda a seção Todas as Configurações>Designer XAML>Geral.
  1. Abra a caixa de diálogoOpções de > e expanda a seçãoGeral do > XAML.

  1. Use a lista suspensa e defina o valor da opção Configuração de Zoom Padrão:

    • Último usado: use o último valor de zoom usado para todos os documentos XAML por padrão. Quando um documento XAML é aberto pela primeira vez, a configuração "Ajustar tudo" é usada apenas pela primeira vez.
    • Ajustar tudo: use essa opção para definir o valor de zoom como "Ajustar tudo" para o designer XAML. Quando um documento XAML é fechado e reaberto, o último valor definido persiste para essa sessão, mas para sessões diferentes, "Ajustar tudo" é usado por padrão.
  1. Selecione OK.

Configurações do Editor

Essas configurações determinam o comportamento do designer visual quando você edita um documento XAML.

Nome Description
Nomear automaticamente elementos interativos na criação Especifica se um nome padrão é fornecido para um novo elemento interativo quando você adiciona um ao designer.
Inserir automaticamente propriedades de layout na criação do elemento Especifica se as propriedades de layout são fornecidas para um novo elemento quando você adiciona um ao designer. As propriedades de layout são aquelas que afetam o layout de um controle, por exemplo, Margin e VerticalAlignment. O XAML a seguir mostra como um Botão é criado com e sem essa opção selecionada:
<Button Content="Button" HorizontalAlignment="Left" Margin="245,56,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
<Button Content="Button" Grid.Row="1"/>
Usar layout baseado em quadrante Especifica se o controle atualmente selecionado se alinha às bordas mais próximas do contêiner pai. Se essa caixa de seleção estiver desmarcada, os alinhamentos de controle não serão alterados durante uma operação de movimentação ou criação.
Preencher automaticamente itens da caixa de ferramentas Especifica se controles de usuário e controles personalizados na solução atual são mostrados na Caixa de Ferramentas automaticamente.
Adicionar dados de exemplo automaticamente na criação de elementos Especifica se os dados de exemplo devem ser adicionados automaticamente ao novo elemento interativo quando você o adiciona ao designer.
Habilitar ações rápidas do designer Permite que você use ações rápidas de teclado para acessar recursos na Caixa de Ferramentas.

Configurações (somente mesclagem)

Use essas opções para acessar configurações exclusivas ao editar arquivos XAML usando o Blend.

No Blend, abra o painelFerramentas>Opções e expanda a seçãoTodas as Configurações>Designer XAML>Geral.

No Blend, abra a caixa de diálogo Ferramentas>Opções e expanda a seção Designer XAML>Geral.

Há uma propriedade específica do Blend:

  • Unidades de tipo: especifica se as medidas no designer são baseadas em pontos ou pixels. Como os Aplicativos Universais do Windows não dão suporte a pontos, as unidades são convertidas automaticamente em pixels quando você seleciona Pontos.

Prancheta (somente mesclagem)

Use essas configurações para determinar o comportamento do Designer XAML ao editar documentos XAML no Blend.

No Blend, abra o painel Opções de Ferramentas> e expanda a seção All Settings>>.

No Blend, abra a caixa de diálogo Ferramentas>Opções e expanda a seção Designer XAML>Prancheta.

As seções a seguir descrevem as propriedades do Artboard disponíveis.

Ajuste automático

Nome Description
Mostrar grade de encaixe Especifique se as linhas de grade serão exibidas no designer para ajudar a alinhar os controles. Ao selecionar a opção Ajustar às linhas de grade, os controles adicionados ao designer se alinham a essas linhas de grade.
Ajustar às linhas de grade Quando os controles são adicionados ou movidos ao redor do designer, eles se ajustam às linhas de grade.
Espaçamento de linha de grade Especifica o espaçamento entre as linhas de grade em pixels ou pontos (conforme determinado pela configuração Type units).
Ajustar às linhas de ajuste Especifica se os controles se ajustam às linhas de ajuste (snaplines).
Margem padrão Quando Snap to snaplines está habilitado, especifica o espaçamento entre o controle e os snaplines em pixels ou pontos (conforme determinado pela configuração de unidades de tipo).
Preenchimento padrão Quando Snap to snaplines está habilitado, especifica o espaçamento extra entre o controle e os snaplines em pixels ou pontos (conforme determinado pela configuração de unidades de tipo).

Animação

Use a configuração de animação para determinar se um aviso aparece quando animações dependentes (não aceleradas) estão habilitadas no Blend.

Efeitos

Use as configurações efeitos para determinar se os efeitos são renderizados ao editar arquivos XAML no Designer XAML quando você trabalha no Blend.

Nome Description
Efeitos de renderização Especifica se os efeitos são renderizados ao editar arquivos XAML no Designer XAML usando o Blend.
Limite de zoom Especifica a porcentagem de zoom em que os efeitos são renderizados quando a caixa de seleção Efeitos de renderização é selecionada. Se você ampliar além dessa configuração, os efeitos não serão mais renderizados no Designer XAML.

Consulte também

  • Last updated on