适用于 Xamarin.Forms 的 XAML 预览器

  • 项目

在键入时查看呈现的 Xamarin.Forms 布局

警告

XAML 预览器已在 Visual Studio 2019 版本 16.8 和 Visual Studio for Mac 版本 8.8 中弃用，并替换为 Visual Studio 2019 版本 16.9 和 Visual Studio for Mac 版本 8.9 中的 XAML 热重载功能。 在文档中详细了解 XAML 热重载。

概述

XAML 预览器会显示你的 Xamarin.Forms XAML 页面在 iOS 和 Android 上的外观。 对 XAML 进行更改时，你将立即随代码一起预览它们。 XAML 预览器在 Visual Studio 和 Visual Studio for Mac 中可用。

使用入门

Visual Studio 2019

可以通过单击拆分视图窗格上的箭头打开 XAML 预览器。 如果要更改默认拆分视图行为，请使用“工具 > 选项 > Xamarin >Xamarin.Forms XAML 预览器”对话框。 在此对话框中，可以选择默认文档视图和拆分方向。

Xamarin.Forms Previewer options in Visual Studio

打开 XAML 文件时，编辑器将根据“工具 > 选项 > Xamarin >Xamarin.Forms XAML 预览器”对话框中选择的设置按完全大小打开或在预览器旁边打开。 但是，可以针对编辑器窗口中的每个文件更改拆分。

XAML 预览控件

通过选择拆分视图窗格上的这些按钮，选择是要查看代码、XAML 预览器还是同时查看这两者。 中间的按钮会交换预览器和代码所在的一侧：

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

可以更改屏幕是垂直拆分还是水平拆分，或完全折叠一个窗格：

Xamarin.Forms Previewer pane orientation controls in Visual Studio

启用或禁用 XAML 预览器

可以在“工具 > 选项 > Xamarin >Xamarin.Forms XAML 预览器”对话框中关闭 XAML 预览器，方法是选择“默认 XML 编辑器”作为你的“默认 XAML 编辑器”。 这还会关闭文档大纲、属性面板和 XAML 工具箱。 若要重新打开 XAML 预览器和这些工具，请将“默认 XAML 编辑器”更改为“Xamarin.Forms 预览器”。

Visual Studio for Mac

打开 XAML 页面时，编辑器上会显示“预览”按钮。 通过按下任何 XAML 文档窗口左下角的“预览”或“拆分”按钮显示或隐藏预览器：

Xamarin.Forms Previewer enabled with the preview or split button

注意

在旧版 Visual Studio for Mac 中，“预览”按钮位于窗口右上角。

启用或禁用 XAML 预览器

可以在“Visual Studio > 首选项 > 文本编辑器 > XAML”对话框中关闭 XAML 预览器，方法是选择“默认 XML 编辑器”作为你的“默认 XAML 编辑器”。 这还会关闭文档大纲、属性面板和 XAML 工具箱。 若要重新打开 XAML 预览器和这些工具，请将“默认 XAML 编辑器”更改为“Xamarin.Forms 预览器”。

XAML 预览器选项

预览窗格顶部的选项包括：

  • Android - 显示屏幕的 Android 版本
  • iOS - 显示屏幕的 iOS 版本（注意：如果你在 Windows 上使用 Visual Studio，则必须配对到 Mac 才能使用此模式）
  • 设备 - Android 或 iOS 设备的下拉列表，包括分辨率和屏幕大小
  • 纵向（图标） - 预览使用纵向
  • 横向（图标） - 预览使用横向

检测设计模式

静态 DesignMode.IsDesignModeEnabled 属性指示应用程序是否在预览器中运行。 使用它时，可以指定仅当应用程序在预览器中运行或未运行时执行的代码：

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

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

如果在页面构造函数中初始化无法在设计时运行的库，则此属性很有用。

疑难解答

如果预览器无法工作，请查看以下问题和 Xamarin 论坛。

XAML 预览器未显示或显示错误

  • 预览器启动可能需要一些时间 - 你将看到“正在初始化呈现”，直到它准备就绪。
  • 请尝试关闭并重新打开 XAML 文件。
  • 确保 App 类具有无参数构造函数。
  • 检查 Xamarin.Forms 版本 - 它必须至少为 Xamarin.Forms 3.6。 可以通过 NuGet 更新到最新的 Xamarin.Forms 版本。
  • 检查 JDK 安装 - 预览 Android 要求至少具有 JDK 8。
  • 请尝试将页面的 C# 代码中的任何初始化类包装在 if (!DesignMode.IsDesignModeEnabled) 中。

自定义控件未呈现

请尝试生成项目。 如果预览器无法呈现控件，或者控件的创建者选择退出设计时呈现，则预览器会显示控件的基类。 有关详细信息，请参阅在 XAML 预览器中呈现自定义控件。