Visualizar XAML para Xamarin.FormsXAML Previewer for Xamarin.Forms

Consulte os Xamarin.Forms layouts renderizados conforme você digitaSee your Xamarin.Forms layouts rendered as you type

Aviso

O previsor XAML foi preterido no Visual Studio 2019 versão 16,8 e Visual Studio para Mac versão 8,8, e substituído pelo recurso de recarregamento ativo de XAML no Visual Studio 2019 versão 16,9 e Visual Studio para Mac versão 8,9.The XAML Previewer has been deprecated in Visual Studio 2019 version 16.8 and Visual Studio for Mac version 8.8, and replaced by the XAML Hot Reload feature in Visual Studio 2019 version 16.9 and Visual Studio for Mac version 8.9. Saiba mais sobre o Hot recarregamento de XAML na documentação.Learn more about XAML Hot Reload in the documentation.

Visão geralOverview

A visualização XAML mostra como a sua Xamarin.Forms página XAML será exibida no Ios e no Android.The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. Quando você fizer alterações no XAML, verá-as visualizadas imediatamente junto com seu código.When you make changes to your XAML, you'll see them previewed immediately alongside your code. O modo de visualização de XAML está disponível no Visual Studio e Visual Studio para Mac.The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

IntroduçãoGetting started

Visual Studio 2019Visual Studio 2019

Você pode abrir o visualizador XAML clicando nas setas no painel exibição de divisão.You can open the XAML Previewer by clicking the arrows on the split view pane. Se você quiser alterar o comportamento padrão de exibição de divisão, use as ferramentas > opções > caixa Xamarin.Forms de diálogo prévia de XAML do Xamarin >.If you want to change the default split view behavior, use the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. Nesta caixa de diálogo, você pode selecionar a exibição de documento padrão e a orientação de divisão.In this dialog, you can select the default document view and the split orientation.

::: no-Loc (Xamarin. Forms)::: opções de visualização no Visual StudioXamarin.Forms Previewer options in Visual Studio

Quando você abrir um arquivo XAML, o editor será aberto de tamanho completo ou ao lado do previsor, com base nas configurações selecionadas na caixa de diálogo ferramentas > > o Xamarin > Xamarin.Forms XAML de visualização .When you open a XAML file, the editor will open either full-sized or next to the previewer, based on the settings selected in the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. No entanto, a divisão pode ser alterada para cada arquivo na janela do editor.However, the split can be changed for each file in the editor window.

Controles de visualização XAMLXAML preview controls

Escolha se você deseja ver seu código, o visualizador XAML ou ambos selecionando esses botões no painel exibição de divisão.Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. O botão do meio troca o que o lado do visualizador e seu código estão:The middle button swaps what side the Previewer and your code are on:

::: no-Loc (Xamarin. Forms)::: controles de visualização para alternar entre o modo de exibição de design, origem e divisão no Visual StudioXamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Você pode alterar se a tela é dividida vertical ou horizontalmente ou recolher um painel completamente:You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

::: no-Loc (Xamarin. Forms)::: painel de visualização de controles de orientação no Visual StudioXamarin.Forms Previewer pane orientation controls in Visual Studio

Habilitar ou desabilitar o previsor XAMLEnable or disable the XAML Previewer

Você pode desativar a visualização de XAML na caixa de diálogo ferramentas > > Xamarin > Xamarin.Forms XAML de visualização , selecionando editor XML padrão como seu editor XAML padrão.You can turn the XAML Previewer off in the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog by selecting Default XML Editor as your Default XAML Editor. Isso também desativa a estrutura de tópicos do documento, o painel de propriedades e a caixa de ferramentas XAML.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Para ativar o Visualizar XAML e essas ferramentas novamente, altere o editor XAML padrão para o Xamarin.Forms previsor.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

Visual Studio para MacVisual Studio for Mac

O botão Visualizar é exibido no editor quando você abre uma página XAML.The Preview button is displayed on the editor when you open a XAML page. Mostre ou oculte o visualizador pressionando os botões Visualizar ou dividir na parte inferior esquerda de qualquer janela de documento XAML:Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

::: no-Loc (Xamarin. Forms)::: pré-visor habilitado com o botão Visualizar ou dividirXamarin.Forms Previewer enabled with the preview or split button

Observação

Em versões mais antigas do Visual Studio para Mac, o botão Visualizar estava localizado no canto superior direito da janela.In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

Habilitar ou desabilitar o previsor XAMLEnable or Disable the XAML Previewer

Você pode desativar o Visualizar XAML no Visual Studio > preferências > editor de texto > caixa de diálogo XAML selecionando o editor XML padrão como seu editor XAML padrão.You can turn the XAML Previewer off in the Visual Studio > Preferences > Text Editor > XAML dialog by selecting Default XML Editor as your Default XAML Editor. Isso também desativa a estrutura de tópicos do documento, o painel de propriedades e a caixa de ferramentas XAML.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Para ativar o Visualizar XAML e essas ferramentas novamente, altere o editor XAML padrão para o Xamarin.Forms previsor.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

Opções de visualização do XAMLXAML previewer options

As opções na parte superior do painel de visualização são:The options along the top of the preview pane are:

  • Android – mostrar a versão do Android da telaAndroid – show the Android version of the screen
  • Ios – mostrar a versão do IOS da tela (Observação: se você estiver usando o Visual Studio no Windows, deverá ser emparelhado com um Mac para usar esse modo)iOS – show the iOS version of the screen (Note: If you're using Visual Studio on Windows, you must be paired to a Mac to use this mode)
  • Dispositivo -lista suspensa de dispositivos Android ou Ios, incluindo resolução e tamanho da telaDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • Retrato (ícone) – usa a orientação retrato para a visualizaçãoPortrait (icon) – uses portrait orientation for the preview
  • Paisagem (ícone) – usa a orientação paisagem para a versão préviaLandscape (icon) – uses landscape orientation for the preview

Detectar modo de designDetect design mode

A DesignMode.IsDesignModeEnabled propriedade estática informa se o aplicativo está em execução no visualizador.The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. Usando-o, você pode especificar o código que será executado somente quando o aplicativo estiver ou não estiver em execução no visualizador:Using it, you can specify code that will only execute when the application is or isn't running in the previewer:

if (DesignMode.IsDesignModeEnabled)
{
  // Previewer only code  
}

if (!DesignMode.IsDesignModeEnabled)
{
  // Don't run in the Previewer  
}

Essa propriedade será útil se você inicializar uma biblioteca em seu construtor de página que não seja executada em tempo de design.This property is useful if you initialize a library in your page constructor that fails to run at design time.

Solução de problemasTroubleshooting

Verifique os problemas abaixo e os fóruns do Xamarin, se o previsor não estiver funcionando.Check the issues below and the Xamarin Forums, if the Previewer isn't working.

O Visualizar XAML não está sendo exibido ou mostra um erroXAML Previewer isn't showing or shows an error

  • Pode levar algum tempo para que o visualizador seja iniciado – você verá "Inicializando o processamento" até que ele esteja pronto.It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • Tente fechar e reabrir o arquivo XAML.Try closing and reopening the XAML file.
  • Verifique se sua App classe tem um construtor sem parâmetros.Ensure that your App class has a parameterless constructor.
  • Verifique sua Xamarin.Forms versão-deve ser pelo menos Xamarin.Forms 3,6.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. Você pode atualizar para a versão mais recente Xamarin.Forms por meio do NuGet.You can update to the latest Xamarin.Forms version through NuGet.
  • Verifique a instalação do JDK-a visualização do Android requer pelo menos o JDK 8.Check your JDK installation - previewing Android requires at least JDK 8.
  • Tente encapsular todas as classes inicializadas no código C# da página em if (!DesignMode.IsDesignModeEnabled) .Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

Os controles personalizados não são renderizadosCustom controls aren't rendering

Tente compilar seu projeto.Try building your project. O previsor mostra a classe base do controle se ele falhar ao renderizar o controle ou se o criador do controle aceitou-out do processamento do tempo de design.The previewer shows the control's base class if it fails to render the control, or if the control's creator opted-out of design time rendering. Para obter mais informações, consulte renderizar controles personalizados no previsor XAML.For more information, see Render Custom Controls in the XAML Previewer.