Visualizzatore anteprima XAML per Xamarin.FormsXAML Previewer for Xamarin.Forms

Visualizzare il Xamarin.Forms rendering dei layout durante la digitazioneSee your Xamarin.Forms layouts rendered as you type

Avviso

Xaml Previewer è stato deprecato in Visual Studio 2019 versione 16.8 e Visual Studio per Mac versione 8.8 e sostituito dalla funzionalità Ricaricamento rapido XAML in Visual Studio 2019 versione 16.9 e Visual Studio per Mac versione 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. Altre informazioni sulle Ricaricamento rapido XAML nella documentazione.Learn more about XAML Hot Reload in the documentation.

PanoramicaOverview

Il visualizzatore di anteprima XAML mostra l'aspetto della pagina Xamarin.Forms XAML in iOS e Android.The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. Quando si apportano modifiche al codice XAML, queste verranno visualizzate in anteprima immediatamente insieme al codice.When you make changes to your XAML, you'll see them previewed immediately alongside your code. Il visualizzatore di anteprima XAML è disponibile in Visual Studio e Visual Studio per Mac.The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

Guida introduttivaGetting started

Visual Studio 2019Visual Studio 2019

È possibile aprire il visualizzatore anteprima XAML facendo clic sulle frecce nel riquadro di visualizzazione divisa.You can open the XAML Previewer by clicking the arrows on the split view pane. Se si vuole modificare il comportamento predefinito della visualizzazione suddivisa, usare la finestra di dialogo Strumenti > opzioni > Xamarin > Xamarin.Forms visualizzatore anteprima XAML.If you want to change the default split view behavior, use the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. In questa finestra di dialogo è possibile selezionare la visualizzazione documento predefinita e l'orientamento di divisione.In this dialog, you can select the default document view and the split orientation.

! [ Xamarin.Forms Opzioni del visualizzatore di anteprima in Visual Studio](xaml-previewer-images/xamlp-options-vs-sm.png Xamarin.Forms "Opzioni del visualizzatore di anteprima in Visual Studio".![Xamarin.Forms Previewer options in Visual Studio](xaml-previewer-images/xamlp-options-vs-sm.png "Xamarin.Forms Previewer options in Visual Studio."

Quando si apre un file XAML, l'editor si aprirà a dimensioni complete o accanto al visualizzatore di anteprima, in base alle impostazioni selezionate nella finestra di dialogo Strumenti > Opzioni > Xamarin > Xamarin.Forms Visualizzatore anteprima XAML.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. Tuttavia, la divisione può essere modificata per ogni file nella finestra dell'editor.However, the split can be changed for each file in the editor window.

Controlli di anteprima XAMLXAML preview controls

Scegliere se visualizzare il codice, il visualizzatore anteprima XAML o entrambi selezionando questi pulsanti nel riquadro di visualizzazione divisa.Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. Il pulsante centrale scambia il lato del visualizzatore di anteprima e del codice:The middle button swaps what side the Previewer and your code are on:

! [ Controlli del visualizzatore di anteprima per passare dalla visualizzazione di progettazione, di origine alla visualizzazione suddivisa Xamarin.Forms in Visual Studio](xaml-previewer-images/xamlp-controls-splitview-vs-sm.png "Controlli del visualizzatore di anteprima per passare dalla visualizzazione di progettazione, di origine alla visualizzazione suddivisa in Xamarin.Forms Visual Studio".![Xamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio](xaml-previewer-images/xamlp-controls-splitview-vs-sm.png "Xamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio."

È possibile scegliere se lo schermo è suddiviso verticalmente o orizzontalmente oppure comprimere completamente un riquadro:You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

! [ Controlli di orientamento del riquadro di anteprima Xamarin.Forms in Visual Studio](xaml-previewer-images/xamlp-controls-orientation-vs-sm.png "Controlli di orientamento del riquadro del visualizzatore di anteprima Xamarin.Forms Visual Studio".![Xamarin.Forms Previewer pane orientation controls in Visual Studio](xaml-previewer-images/xamlp-controls-orientation-vs-sm.png "Xamarin.Forms Previewer pane orientation controls in Visual Studio."

Abilitare o disabilitare il visualizzatore di anteprima XAMLEnable or disable the XAML Previewer

È possibile disattivare il visualizzatore di anteprima XAML nella finestra di dialogo Opzioni > strumenti > Xamarin > Xamarin.Forms Anteprima XAML selezionando Editor XML predefinito come editor XAML predefinito.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. In questo modo vengono disattivati anche Struttura documento, Pannello delle proprietà e Casella degli strumenti XAML.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Per riattivare il visualizzatore di anteprima XAML e questi strumenti, modificare l'editor XAML predefinito in Xamarin.Forms Visualizzatore anteprima.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

Visual Studio per MacVisual Studio for Mac

Il pulsante Anteprima viene visualizzato nell'editor quando si apre una pagina XAML.The Preview button is displayed on the editor when you open a XAML page. Mostrare o nascondere il visualizzatore di anteprima premendo i pulsanti Anteprima o Dividi in basso a sinistra in qualsiasi finestra del documento XAML:Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

Xamarin.Forms Visualizzatore anteprima abilitato con il pulsante di anteprima o di divisione.Xamarin.Forms Previewer enabled with the preview or split button.

Nota

Nelle versioni precedenti di Visual Studio per Mac, il pulsante Anteprima si trova in alto a destra nella finestra.In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

Abilitare o disabilitare il visualizzatore di anteprima XAMLEnable or Disable the XAML Previewer

È possibile disattivare il visualizzatore di anteprima XAML nella finestra Visual Studio > Preferenze > editor di testo > XAML selezionando Editor XML predefinito come editor XAML predefinito.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. In questo modo vengono disattivati anche Struttura documento, Pannello delle proprietà e Casella degli strumenti XAML.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Per riattivare il visualizzatore di anteprima XAML e questi strumenti, modificare l'editor XAML predefinito in Xamarin.Forms Visualizzatore anteprima.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

Opzioni del visualizzatore di anteprima XAMLXAML previewer options

Le opzioni nella parte superiore del riquadro di anteprima sono:The options along the top of the preview pane are:

  • Android: mostra la versione android dello schermoAndroid – show the Android version of the screen
  • iOS: mostra la versione iOS dello schermo ( Nota: se usi Visual Studio in Windows, devi essere associato a un Mac per usare questa modalità )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: elenco a discesa dei dispositivi Android o iOS, incluse la risoluzione e le dimensioni dello schermoDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • Verticale (icona): usa l'orientamento verticale per l'anteprimaPortrait (icon) – uses portrait orientation for the preview
  • Orizzontale (icona): usa l'orientamento orizzontale per l'anteprimaLandscape (icon) – uses landscape orientation for the preview

Rilevare la modalità progettazioneDetect design mode

La proprietà DesignMode.IsDesignModeEnabled statica indica se l'applicazione è in esecuzione nel visualizzatore di anteprima.The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. In questo modo è possibile specificare il codice che verrà eseguito solo quando l'applicazione è o non è in esecuzione nel visualizzatore di anteprima: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  
}

Questa proprietà è utile se si inizializza una libreria nel costruttore della pagina che non viene eseguita in fase di progettazione.This property is useful if you initialize a library in your page constructor that fails to run at design time.

Risoluzione dei problemiTroubleshooting

Controllare i problemi seguenti e i forum Xamarin, se il visualizzatore anteprima non funziona.Check the issues below and the Xamarin Forums, if the Previewer isn't working.

Il visualizzatore anteprima XAML non viene visualizzato o visualizza un erroreXAML Previewer isn't showing or shows an error

  • L'avvio del visualizzatore anteprima può richiedere del tempo. Verrà visualizzato "Inizializzazione del rendering" fino a quando non è pronto.It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • Provare a chiudere e riaprire il file XAML.Try closing and reopening the XAML file.
  • Assicurarsi che la App classe abbia un costruttore senza parametri.Ensure that your App class has a parameterless constructor.
  • Controllare la Xamarin.Forms versione: deve essere almeno Xamarin.Forms 3.6.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. È possibile eseguire l'aggiornamento alla Xamarin.Forms versione più recente tramite NuGet.You can update to the latest Xamarin.Forms version through NuGet.
  • Controllare l'installazione di JDK: l'anteprima di Android richiede almeno JDK 8.Check your JDK installation - previewing Android requires at least JDK 8.
  • Provare a eseguire il wrapping di tutte le classi inizializzate nel code-behind C# della pagina in if (!DesignMode.IsDesignModeEnabled) .Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

Il rendering dei controlli personalizzati non viene ese-Custom controls aren't rendering

Provare a compilare il progetto.Try building your project. Il visualizzatore di anteprima mostra la classe di base del controllo se non riesce a eseguire il rendering del controllo o se il creatore del controllo ha scelto esplicitamente di disattivare il rendering in fase di progettazione.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. Per altre informazioni, vedere Eseguire il rendering di controlli personalizzati nel visualizzatore di anteprima XAML.For more information, see Render Custom Controls in the XAML Previewer.