Средство предварительного просмотра XAML для Xamarin.Forms

  • Статья

Xamarin.Forms Просмотр макетов, отображаемых при вводе

Предупреждение

Средство предварительного просмотра XAML устарело в Visual Studio 2019 версии 16.8 и Visual Studio для Mac версии 8.8 и заменено функцией XAML Горячая перезагрузка в Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9. Дополнительные сведения о XAML Горячая перезагрузка см. в документации.

Обзор

Средство предварительного просмотра XAML показывает, как будет выглядеть страница Xamarin.Forms XAML на iOS и Android. При внесении изменений в XAML вы увидите их сразу же рядом с кодом. Средство предварительного просмотра XAML доступно в Visual Studio и Visual Studio для Mac.

Начало работы

Visual Studio 2019

Чтобы открыть средство предварительного просмотра XAML, щелкните стрелки в области разделенного представления. Если вы хотите изменить поведение разбиения по умолчанию, используйте диалоговое окно "Параметры > инструментов > Xamarin >Xamarin.Forms XAML Previewer". В этом диалоговом окне можно выбрать представление документов по умолчанию и ориентацию разделения.

Xamarin.Forms Previewer options in Visual Studio

При открытии XAML-файла редактор откроет полный размер или рядом с предварительным просмотром на основе параметров, выбранных в > диалоговом окне "Параметры > инструментов Xamarin >Xamarin.Forms XAML Previewer". Однако разделение можно изменить для каждого файла в окне редактора.

Элементы управления предварительной версии 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

Вы можете отключить средство предварительного просмотра XAML в > диалоговом окне "Параметры > Xamarin >Xamarin.Forms XAML Previewer", выбрав редактор XML по умолчанию в качестве редактора XAML по умолчанию. Это также отключает структуру документа, панель свойств и панель элементов XAML. Чтобы включить средство предварительного просмотра XAML и эти средства, измените редактор XAML по умолчанию на Xamarin.Forms средство предварительного просмотра.

Visual Studio для Mac

Кнопка предварительного просмотра отображается в редакторе при открытии страницы XAML. Отображение или скрытие средства предварительного просмотра, нажав кнопки предварительного просмотра или разделения в нижнем левом углу любого окна документа XAML:

Xamarin.Forms Previewer enabled with the preview or split button

Примечание.

В более ранних версиях Visual Studio для Mac кнопка предварительного просмотра расположена в правом верхнем углу окна.

Включение или отключение средства предварительного просмотра XAML

Вы можете отключить средство предварительного просмотра XAML в диалоговом окне "Текстовый редактор > параметров > Visual Studio>", выбрав редактор XML по умолчанию в качестве редактора XAML по умолчанию. Это также отключает структуру документа, панель свойств и панель элементов XAML. Чтобы включить средство предварительного просмотра XAML и эти средства, измените редактор XAML по умолчанию на Xamarin.Forms средство предварительного просмотра.

Параметры средства предварительного просмотра XAML

Параметры в верхней части области предварительного просмотра:

  • Android — отображение версии Android на экране
  • iOS — отображение версии экрана iOS (Примечание. Если вы используете Visual Studio в Windows, необходимо связать с 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. Вы можете обновить до последней Xamarin.Forms версии с помощью NuGet.
  • Проверьте установку JDK — предварительная версия Android требует по крайней мере JDK 8.
  • Попробуйте упаковать все инициализированные классы в коде if (!DesignMode.IsDesignModeEnabled)C# страницы.

Пользовательские элементы управления не отображаются

Попробуйте построить проект. Средство предварительного просмотра показывает базовый класс элемента управления, если не удается отобразить элемент управления, или если создатель элемента управления отказался от отрисовки времени разработки. Дополнительные сведения см. в разделе "Отрисовка пользовательских элементов управления" в средстве предварительного просмотра XAML.