Vista previa de XAML para Xamarin. FormsXAML Previewer for Xamarin.Forms

Vea los diseños de Xamarin. Forms que se representan a medida que escribe.See your Xamarin.Forms layouts rendered as you type

Información generalOverview

El previsor de XAML muestra cómo se verá la página XAML de Xamarin. Forms en iOS y Android.The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. Cuando realice cambios en el código XAML, verá que se muestra una vista previa de inmediato junto con el código.When you make changes to your XAML, you'll see them previewed immediately alongside your code. El previsor de XAML está disponible en Visual Studio y Visual Studio para Mac.The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

IntroducciónGetting started

Visual Studio 2019Visual Studio 2019

Para abrir el cuadro de vista previa de XAML, haga clic en las flechas del panel vista en dos paneles.You can open the XAML Previewer by clicking the arrows on the split view pane. Si desea cambiar el comportamiento predeterminado de la vista en dos paneles, use las opciones de herramientas > > cuadro de diálogo de vista previa de formularios de Xamarin > .If you want to change the default split view behavior, use the Tools > Options > Xamarin > Forms Previewer dialog. En este cuadro de diálogo, puede seleccionar la vista de documento predeterminada y la orientación de división.In this dialog, you can select the default document view and the split orientation.

Opciones de vista previa de Xamarin. Forms en Visual StudioXamarin.Forms Previewer options in Visual Studio

Al abrir un archivo XAML, el editor abrirá el tamaño completo o junto al previsualizador, en función de la configuración seleccionada en las opciones de herramientas > > cuadro de diálogo de vista previa de formularios de Xamarin > .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 > Forms Previewer dialog. Sin embargo, se puede cambiar la división de cada archivo en la ventana del editor.However, the split can be changed for each file in the editor window.

Controles de vista previa de XAMLXAML preview controls

Elija si desea ver el código, el previsor de XAML o ambos; para ello, seleccione estos botones en el panel vista en dos paneles.Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. El botón central intercambia el lado del código que está en la vista previa y el código:The middle button swaps what side the Previewer and your code are on:

Controles de vista previa de Xamarin. Forms para cambiar entre el diseño, el origen y la vista en dos paneles en Visual StudioXamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Puede cambiar si la pantalla está dividida vertical u horizontalmente o contraer un panel por completo:You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

Controles de orientación del panel de vista previa de Xamarin. Forms en Visual StudioXamarin.Forms Previewer pane orientation controls in Visual Studio

Visual Studio para MacVisual Studio for Mac

El botón vista previa se muestra en el editor cuando se abre una página XAML.The Preview button is displayed on the editor when you open a XAML page. Para mostrar u ocultar el previsor, presione los botones vista previa o dividir en la parte inferior izquierda de cualquier ventana de documento XAML:Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

Vista previa de Xamarin. Forms habilitada con el botón de vista previa o de divisiónXamarin.Forms Previewer enabled with the preview or split button

Nota

En versiones anteriores de Visual Studio para Mac, el botón vista previa se encontraba en la parte superior derecha de la ventana.In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

Opciones de vista previa de XAMLXAML previewer options

Las opciones que aparecen a lo largo de la parte superior del panel de vista previa son:The options along the top of the preview pane are:

  • Android : Mostrar la versión de Android de la pantallaAndroid – show the Android version of the screen
  • iOS : Mostrar la versión de iOS de la pantalla (tenga en cuenta lo siguiente: Si usa Visual Studio en Windows, debe emparejarse con un equipo Mac para usar este 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)
  • Lista desplegable de dispositivos de dispositivos Android o iOS, incluida la resolución y el tamaño de pantallaDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • Vertical (icono) : usa la orientación vertical para la vista previaPortrait (icon) – uses portrait orientation for the preview
  • Horizontal (icono) : usa la orientación horizontal para la vista previaLandscape (icon) – uses landscape orientation for the preview

Detectar el modo de diseñoDetect design mode

La propiedad DesignMode.IsDesignModeEnabled estática indica si la aplicación se está ejecutando en el visor de vista previa.The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. Si lo usa, puede especificar código que solo se ejecutará cuando la aplicación se esté ejecutando en el visor de vista previa: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  
}

Esta propiedad es útil si Inicializa una biblioteca en el constructor de páginas que no se puede ejecutar en tiempo de diseño.This property is useful if you initialize a library in your page constructor that fails to run at design time.

solución de problemasTroubleshooting

Compruebe los problemas siguientes y los foros de Xamarin, si el visor de vista previa no funciona.Check the issues below and the Xamarin Forums, if the Previewer isn't working.

El previsor XAML no se muestra o muestra un errorXAML Previewer isn't showing or shows an error

  • Puede tardar algún tiempo en iniciarse el previsor; verá "inicializando representación" hasta que esté listo.It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • Intente cerrar y volver a abrir el archivo XAML.Try closing and reopening the XAML file.
  • Asegúrese de que App la clase tiene un constructor sin parámetros.Ensure that your App class has a parameterless constructor.
  • Compruebe la versión de Xamarin. Forms: debe ser al menos Xamarin. Forms 3,6.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. Puede actualizar a la versión más reciente de Xamarin. Forms a través de NuGet.You can update to the latest Xamarin.Forms version through NuGet.
  • Comprobar la instalación de JDK: la vista previa de Android requiere al menos JDK 8.Check your JDK installation - previewing Android requires at least JDK 8.
  • Intente envolver cualquier clase inicializada en el C# código de la página que if (!DesignMode.IsDesignModeEnabled)se encuentra en.Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

Los controles personalizados no se representanCustom controls aren't rendering

Intente compilar el proyecto.Try building your project. El controlador de vista previa muestra la clase base del control si no puede representar el control o si el creador del control optó por la representación en tiempo de diseño.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 obtener más información, vea representar controles personalizados en la vista previa de XAML.For more information, see Render Custom Controls in the XAML Previewer.