Vista previa xaml para Xamarin.Forms

  • Artículo
  • Tiempo de lectura: 4 minutos

Xamarin.Forms Ver los diseños representados a medida que escribe

Advertencia

El previewer de XAML ha quedado en desuso en Visual Studio 2019, versión 16.8 y Visual Studio para Mac versión 8.8, y se ha reemplazado por la característica de Recarga activa XAML en Visual Studio versión 16.9 y Visual Studio para Mac 8.9. Obtenga más información sobre los Recarga activa XAML en la documentación.

Información general

El previewer xaml muestra cómo se verá la Xamarin.Forms página XAML en iOS y Android. Cuando realices cambios en el CÓDIGO XAML, verás que se previsualizarán inmediatamente junto con el código. El previewer de XAML está disponible en Visual Studio y Visual Studio para Mac.

Introducción

Visual Studio 2019

Puedes abrir el controlador de vista previa xaml haciendo clic en las flechas del panel de vista dividida. Si quieres cambiar el comportamiento predeterminado de la vista dividida, usa el > cuadro de diálogo Opciones de > herramientas del controlador de vista previa xaml de Xamarin>Xamarin.Forms. En este cuadro de diálogo, puede seleccionar la vista de documento predeterminada y la orientación dividida.

Xamarin.Forms Previewer options in Visual Studio

Al abrir un archivo XAML, el editor se abrirá de tamaño completo o junto al controlador de vista previa, en función de la configuración seleccionada en el > cuadro de diálogo Opciones > de herramientas Xamarin >Xamarin.Forms XAML Previewer. Sin embargo, la división se puede cambiar para cada archivo de la ventana del editor.

Controles de vista previa xaml

Elige si quieres ver el código, el previewer xaml o ambos seleccionando estos botones en el panel de vista dividida. El botón central intercambia en qué lado se encuentra el previewer y el código:

Xamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Puede cambiar si la pantalla se divide vertical u horizontalmente, o contraer un panel por completo:

Xamarin.Forms Previewer pane orientation controls in Visual Studio

Habilitar o deshabilitar el controlador de vista previa xaml

Puedes desactivar la vista previa xaml en el cuadro de diálogo Opciones de > herramientas > Xamarin >Xamarin.Forms XAML Previewer seleccionando Editor XML predeterminado como editor XAML predeterminado. Esto también desactiva el esquema del documento, el panel de propiedades y el cuadro de herramientas XAML. Para volver a activar el previewer de XAML y esas herramientas, cambia el Editor XAML predeterminado a Xamarin.Forms Previewer.

Visual Studio para Mac

El botón Vista previa se muestra en el editor al abrir una página XAML. Muestre u oculte el vista previa presionando los botones Vista previa o División en la parte inferior izquierda de cualquier ventana de documento XAML:

Xamarin.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.

Habilitar o deshabilitar el controlador de vista previa xaml

Puedes desactivar la vista previa xaml en el cuadro de diálogo > XAML editor de texto > de preferencias > de Visual Studio seleccionando Editor XML predeterminado como editor XAML predeterminado. Esto también desactiva el esquema del documento, el panel de propiedades y el cuadro de herramientas XAML. Para volver a activar el previewer de XAML y esas herramientas, cambia el Editor XAML predeterminado a Xamarin.Forms Previewer.

Opciones del previsualizador XAML

Las opciones de la parte superior del panel de vista previa son:

  • Android : muestra la versión de Android de la pantalla
  • iOS: muestre la versión de iOS de la pantalla (Nota: Si usa Visual Studio en Windows, debe emparejarse con un Equipo Mac para usar este modo).
  • Dispositivo : lista desplegable de dispositivos Android o iOS, incluida la resolución y el tamaño de pantalla
  • Vertical (icono): usa la orientación vertical para la vista previa.
  • Horizontal (icono): usa la orientación horizontal para la versión preliminar.

Detección del modo de diseño

La propiedad estática DesignMode.IsDesignModeEnabled indica si la aplicación se está ejecutando en el previsualizador. Con él, puede especificar código que solo se ejecutará cuando la aplicación se ejecute o no se ejecute en el 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ágina que no se puede ejecutar en tiempo de diseño.

Solucionar problemas

Compruebe los problemas siguientes y los foros de Xamarin, si el previewer no funciona.

El previewer de XAML no muestra o muestra un error

  • El previewer puede tardar algún tiempo en iniciarse; verá "Inicializar representación" hasta que esté listo.
  • Intente cerrar y volver a abrir el archivo XAML.
  • Asegúrese de que la App clase tiene un constructor sin parámetros.
  • Compruebe la Xamarin.Forms versión: debe ser al menos Xamarin.Forms la 3.6. Puede actualizar a la versión más reciente Xamarin.Forms a través de NuGet.
  • Compruebe la instalación de JDK: la versión preliminar de Android requiere al menos JDK 8.
  • Pruebe a encapsular cualquier clase inicializada en el código de C# de la página subyacente en if (!DesignMode.IsDesignModeEnabled).

Los controles personalizados no se están representando

Pruebe a compilar el proyecto. El previsualizador muestra la clase base del control si no se puede representar el control, o si el creador del control optó por no participar en la representación en tiempo de diseño. Para obtener más información, consulta Render Custom Controls in the XAML Previewer.