Previewer de XAML para Xamarin.Forms

  • Artículo
  • 4 minutos para leer

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 Recarga activa de XAML de Visual Studio 2019 versión 16.9 y Visual Studio para Mac versión 8.9. Obtenga más información sobre Recarga activa de XAML en la documentación de.

Información general

El previewer de XAML muestra el aspecto de la página Xamarin.Forms XAML en iOS y Android. Cuando realice cambios en el XAML, verá que se vista previamente inmediatamente junto con el código. El previewer xaml está disponible en Visual Studio y Visual Studio para Mac.

Introducción

Visual Studio 2019

Para abrir el previewer de XAML, haga clic en las flechas del panel de vista dividida. Si desea cambiar el comportamiento predeterminado de la vista dividida, use el cuadro de diálogo Opciones de herramientas Vista previa XAML >>Xamarin.Forms de Xamarin. En este cuadro de diálogo, puede seleccionar la vista de documento predeterminada y la orientación de división.

<span class= Opciones del controlador de vista previa de Xamarin.Forms en Visual Studio" title=" Opciones del controlador de vista previa <span class= en Visual Studio" data-linktype="relative-path"/>

Al abrir un archivo XAML, el editor se abrirá a 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 Vista previa xaml >>Xamarin.Forms de Xamarin. Sin embargo, la división se puede cambiar para cada archivo de la ventana del editor.

Controles de vista previa xaml

Elija si desea ver el código, el previewer de XAML o ambos seleccionando estos botones en el panel de vista dividida. El botón central intercambia en qué lado se encuentran el previewer y el código:

<span class= Controles del controlador de vista previa de Xamarin.Forms para cambiar entre el diseño, el origen y la vista dividida en Visual Studio" title=" Controles del controlador de vista previa para cambiar entre el diseño, el origen y la vista dividida en <span class= Visual Studio" data-linktype="relative-path"/>

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

<span class= Controles de orientación del panel del controlador de vista previa de Xamarin.Forms en Visual Studio" title=" Controles de orientación del panel del controlador de vista previa en <span class= Visual Studio" data-linktype="relative-path"/>

Habilitación o deshabilitación del previewer de XAML

Puede desactivar el controlador de vista previa xaml en el cuadro de diálogo Opciones de herramientas Vista previa >>Xamarin.Forms xaml de Xamarin seleccionando > predeterminado como editor > 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, cambie el Editor XAML predeterminado a Previewer.

Visual Studio para Mac

El botón Vista previa se muestra en el editor al abrir una página XAML. Para mostrar u ocultar el previewer, presione los botones Vista previa o Dividir en la parte inferior izquierda de cualquier ventana de documento XAML:

<span class= Controlador de vista previa de Xamarin.Forms habilitado con el botón de vista previa o de <span class= división" data-linktype="relative-path"/>

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 previewer de XAML

Puede desactivar el previewer xaml en el cuadro de diálogo XAML del Editor de texto Visual Studio preferencias seleccionando > Editor >> predeterminado como > 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, cambie el Editor XAML predeterminado a Previewer.

Opciones del previewer de XAML

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

Detección del modo de diseño

La propiedad static Xamarin_Forms _DesignMode_IsDesignModeEnabled" data-linktype="absolute-path">indica si la aplicación se ejecuta en el DesignMode.IsDesignModeEnabled previewer. Con él, puede especificar código que solo se ejecutará cuando la aplicación se esté ejecutando o no 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 Xamarinsi el controlador de vista previa no funciona.

El previewer de XAML no muestra o muestra un error

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

Los controles personalizados no se están representando

Pruebe a compilar el proyecto. El vista previa muestra la clase base del control si no se puede representar el control o si el creador del control no ha optado por no representar el tiempo de diseño. Para obtener más información, vea Representar controles personalizados en el previewer de XAML.