Xamarin forms previewer как включить в visual studio
One of the most time-consuming parts of development is the the build and run cycle, or the time between writing a line of code and seeing it execute. Real-time feedback makes development faster, easier, and more fun for developers. The Xamarin.Forms Previewer renders a live preview of a page side-by-side with the XAML markup, allowing you to see your user interface come to life as you type.
We’re happy to announce the Xamarin.Forms Previewer for Visual Studio and Visual Studio for Mac as part of our Microsoft Connect(); 2016 release. Today, we’re delivering the same core set of features that we previewed at Xamarin Evolve earlier this year, now available on both Mac and Windows.
Installing the Xamarin.Forms Previewer
The Xamarin Forms Previewer is available by default with Visual Studio 2015 and 2017 RC with Xamarin installed. On the Mac, it’s available by default in Xamarin Studio and the Visual Studio for Mac preview, with the latest Xamarin.iOS and Xamarin.Android installed. Latest-and-greatest Xamarin.Forms NuGet is recommended; at least 2.3.2 is required. The Previewer is available for free with a Community license.
Using the Previewer
The Previewer works on any ContentPage , ContentView , or ViewCell in a Xamarin.Forms application. You can create a new Xamarin.Forms app from template or open an existing application. Make sure your app uses XAML for user interface files. Do an initial build of your app before opening the Previewer – an initial compilation is required for the Android preview to work. It’s also required during development for the Previewer to pick up any UI changes and resources outside of the XAML.
Double-click on a XAML file to launch the Previewer in Xamarin Studio or Visual Studio for Mac. You should see a split view with your XAML on the left and a preview on the right:
If you don’t see the design surface on the right, press the Preview button at the top right of the text editor to toggle the Previewer.
To launch the Previewer in Visual Studio, select View -> Other Windows -> Xamarin.Forms Previewer, or search for “previewer” in the search bar. This will open a tool window for the Previewer. The tool window can then be docked next to the editor:
The Design Surface
The Previewer has tools that help ensure your UI looks good for your users. The design surface allows you to switch between:
- iOS and Android
- Phone and Tablet
- Landscape or Portrait
Zoom controls are also available on the design surface to help you fine tune your design. On a Mac, the Xamarin.Forms Previewer also supports trackpad zoom gestures.
More Resources
For more information on getting the most out of the previewer, check out these guides from our team and community:
-
on the Xamarin developer portal.
- James Montemagno’s guide to using design time data in the previewer with MVVM. from Adam Pedley, MVP.
The Previewer is a valuable tool to speed up Xamarin.Forms development, and we hope you use it as part of your everyday development workflow, as well as continue to reach out to us with feedback and ideas!
средство предварительного просмотра 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, щелкнув стрелки на панели разделенное представление. Если необходимо изменить поведение представления с разделением по умолчанию, используйте Параметры > инструменты диалогового окна Предварительный просмотр XAML Xamarin >Xamarin.Forms . В этом диалоговом окне можно выбрать представление документа по умолчанию и ориентацию разбиения.
При открытии XAML-файла редактор открывает полный размер или рядом с предварительным просмотром в зависимости от параметров, выбранных в диалоговом окне Параметры > средств средства предварительного просмотра XAML Xamarin >Xamarin.Forms . Однако разбиение можно изменить для каждого файла в окне редактора.
Элементы управления предварительным просмотром XAML
Выберите, следует ли просматривать код, предварительный просмотр XAML или оба эти кнопки на панели разделенное представление. С помощью средней кнопки можно поменять местами, на которых располагается предварительный просмотр и ваш код:
Можно изменить, разбивается ли экран по вертикали или по горизонтали, или полностью свернуть одну панель:
Включение или отключение предварительного просмотра XAML
Вы можете отключить средство предварительного просмотра XAML в диалоговом окне инструменты параметры >>Xamarin.Forms средства предварительного просмотра XAML , выбрав > умолчанию в качестве >. Это также выключает структуру документа, панель свойств и панель элементов XAML. Чтобы включить средство предварительного просмотра XAML и эти средства снова, измените редактор XAML по умолчанию на "предварительный просмотр".
Visual Studio для Mac
Кнопка Предварительный просмотр отображается в редакторе при открытии страницы XAML. Показать или скрыть предварительный просмотр, нажав кнопки предварительного просмотра или разбиения в левом нижнем углу окна документа XAML:
в более ранних версиях Visual Studio для Mac кнопка предварительный просмотр находится в правом верхнем углу окна.
Включение или отключение предварительного просмотра XAML
вы можете отключить предварительный просмотр xaml в диалоговом окне Visual Studio предпочтениях > редактора > текста xaml , выбрав редактор > умолчанию в качестве >. Это также выключает структуру документа, панель свойств и панель элементов XAML. Чтобы включить средство предварительного просмотра XAML и эти средства снова, измените редактор XAML по умолчанию на "предварительный просмотр".
Параметры средства предварительного просмотра XAML
Ниже перечислены параметры, доступные в верхней части области просмотра.
- Android — отображение версии экрана Android
- ios — показывать версию ios на экране (примечание. если вы используете Visual Studio на Windows, для использования этого режима необходимо связать с компьютером Mac)
- Устройство -раскрывающийся список устройств Android или iOS, включая разрешение и размер экрана
- Книжная (значок) — использует книжную ориентацию для предварительного просмотра.
- Альбомная (значок) — использует альбомную ориентацию для предварительного просмотра
Обнаружить режим конструктора
Статическое DesignMode.IsDesignModeEnabled свойство сообщает, выполняется ли приложение в предварительном просмотре. С его помощью можно указать код, который будет выполняться только в том случае, если приложение не выполняется в предварительном просмотре:
Это свойство полезно при инициализации библиотеки в конструкторе страницы, которая не запускается во время разработки.
Диагностика
Если предварительный просмотр не работает, проверьте указанные ниже проблемы и форумы Xamarin.
В средстве предварительного просмотра XAML не отображается или отображается ошибка
Пользовательские элементы управления не подготовится к просмотру
Попробуйте выполнить сборку проекта. Предварительный просмотр показывает базовый класс элемента управления, если он не может обработать элемент управления, или если создатель элемента управления выдаст представление о времени разработки. Дополнительные сведения см. в разделе Отрисовка пользовательских элементов управления в средстве предварительного просмотра XAML.
The XAML Previewer has been deprecated in Visual Studio 2019 version 16.8 and Visual Studio for Mac version 8.8, and replaced by the XAML Hot Reload feature in Visual Studio 2019 version 16.9 and Visual Studio for Mac version 8.9. Learn more about XAML Hot Reload in the documentation.
Overview
The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. When you make changes to your XAML, you'll see them previewed immediately alongside your code. The XAML Previewer is available in Visual Studio and Visual Studio for Mac.
Getting started
Visual Studio 2019
You can open the XAML Previewer by clicking the arrows on the split view pane. If you want to change the default split view behavior, use the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. In this dialog, you can select the default document view and the split orientation.
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 > Xamarin.Forms XAML Previewer dialog. However, the split can be changed for each file in the editor window.
XAML preview controls
Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. The middle button swaps what side the Previewer and your code are on:
You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:
Enable or disable the XAML Previewer
You can turn the XAML Previewer off in the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog by selecting Default XML Editor as your Default XAML Editor. This also turns off the Document Outline, Property Panel, and XAML Toolbox. To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.
Visual Studio for Mac
The Preview button is displayed on the editor when you open a XAML page. Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:
In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.
Enable or Disable the XAML Previewer
You can turn the XAML Previewer off in the Visual Studio > Preferences > Text Editor > XAML dialog by selecting Default XML Editor as your Default XAML Editor. This also turns off the Document Outline, Property Panel, and XAML Toolbox. To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.
XAML previewer options
- Android – show the Android version of the screen
- 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)
- Device - Drop-down list of Android or iOS devices including resolution and screen size
- Portrait (icon) – uses portrait orientation for the preview
- Landscape (icon) – uses landscape orientation for the preview
Detect design mode
The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. Using it, you can specify code that will only execute when the application is or isn't running in the previewer:
This property is useful if you initialize a library in your page constructor that fails to run at design time.
Troubleshooting
Check the issues below and the Xamarin Forums, if the Previewer isn't working.
XAML Previewer isn't showing or shows an error
Custom controls aren't rendering
Try building your project. 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. For more information, see Render Custom Controls in the XAML Previewer.
Есть ли способ просмотреть страницу форм Xamarin без предварительного развертывания на устройстве / эмуляторе?
Или есть способ редактировать страницу в реальном времени и где-нибудь видеть изменения (немного как Snoopy для WPF). Я пробовал Xamarin Studio + Visual Studio и не вижу дизайнера.
Обновление от 30 сентября 2016 г .:
Используя последнюю версию Xamarin, вы можете выполнить следующие действия:
Используйте меню Просмотр > Другие Windows > Xamarin.Forms Previewer в Visual Studio, чтобы открыть окно предварительного просмотра. Используйте Окно > Меню новой вертикальной группы вкладок , чтобы расположить их рядом, как показано на рисунке ниже:
Обратите внимание, что:
Средство предварительного просмотра требует, чтобы проект был построен до рендеринга страницы. Если в верхней части панели предварительного просмотра появляется ошибка «Недопустимый XAML», заново соберите приложение и повторите попытку.
Старый ответ для ссылки на другие решения:
Предварительный просмотр Xamarin.Forms в настоящее время доступен только в Xamarin Studio в альфа-канале. Следуйте этим инструкциям, чтобы изменить канал обновления.
В настоящее время не существует официального средства предварительного просмотра пользовательского интерфейса Xamarin Forms для Visual Studio. Однако в последнем Xamarin Evolve 2016 Xamarin объявили, что они работают над конструктором, который будет выпущен. Об этом будет объявлено .
Xamarin недавно выпустил Xamarin Previewer только для Xamarin Studio (Visual Studio появится позже), который позволяет предварительно просматривать XAML на iOS и Android. В настоящее время предварительная версия доступна через альфа-канал (29 апреля 2016 г.). Я постараюсь не забыть обновить его, когда он выйдет для Visual Studio.
В качестве неофициальной альтернативы вы можете попробовать:
Предварительный просмотр Xamarin.Forms доступен на стабильном канале в качестве предварительного просмотра.
Проектам требуется последняя версия пакета NuGet Xamarin.Forms для работы средства предварительного просмотра XAML.
Откройте Android SDK Manager и обновите SDK Tools и Platform-Tools.
Перестройте решение и создайте новую страницу xaml.
В Visual Studio: используйте меню «Просмотр»> «Другие окна»> «Xamarin.Forms Previewer», чтобы открыть окно предварительного просмотра. И вуаля
Я оставил здесь свои впечатления после собственное исследование по теме, попробовав:
- Xamarin Previewer
- Xamarin Forms Player
- Горилла игрок
Итог :
Я решил пойти с Gorilla Player. Единственный, который действительно работал со мной - хотя у него есть ограничение на работу только с XAML - это означает, что вы вынуждены кодировать свой пользовательский интерфейс с помощью XAML.
В Xamarin Studio есть средство предварительного просмотра XAML, я уже давно им пользуюсь.
Xamarin.Forms Previewer теперь доступен в VS. Все, что вам нужно сделать, это обновить версию Xamarin: Инструменты > Параметры > Xamarin > Другое > Проверьте сейчас , чтобы обновить Xamarin до последней версии.
Затем откройте его через Просмотр > Другие Windows > Xamarin.Forms Previewer .
Я использую формы xamarin v2. 3.2.127 стабильная версия Visual Studio 2015 Community Edition в операционной системе Windows 10. Каждый раз, когда я пытаюсь открыть xaml, средство просмотра Xamarin Forms Previewer ничего не показывает, только синее поле, как на скриншоте ниже. Я также пытался создать новый проект даже на последнем пререлизном канале, но он все тот же.
Как сказал @jgoldberger, средство предварительного просмотра XAML все еще находится на ранней стадии разработки. Однако, если вы используете канал обновления Xamarin Stable, возможно, стоит переключиться на канал обновления бета-версии.
В следующем выпуске, который в настоящее время находится на 6-й итерации RC (то есть очень близок к стабильному), были внесены значительные улучшения в средство предварительного просмотра XAML. Таким образом, вы, по крайней мере, сможете увидеть, исправят ли улучшения в программе предварительного просмотра вашу проблему. Вы всегда можете вернуться к каналу стабильных обновлений, если захотите.
Вот несколько шагов по устранению неполадок:
Попробуйте закрыть и снова открыть файл XAML.
Недопустимый XAML: проект Android необходимо построить до создания предварительного просмотра. Средство предварительного просмотра требует, чтобы проект был построен до рендеринга страницы. Если указанная ниже ошибка появляется в верхней части панели предварительного просмотра, перестройте приложение и повторите попытку.
У Xamarin есть дополнительная документация на своем веб-сайте для устранение неполадок в программе предварительного просмотра Xamarin.Forms
Убедитесь, что вы установили пакет Xamarin.Forms NuGet> = v2.3 для своих проектов Android iOS и PCL.
Когда вы получаете XFPageRendererView в качестве содержимого средства предварительного просмотра, попробуйте установить последнюю версию Java Development Kit (64-разрядная версия подойдет, даже если Visual Studio работает на 32-разрядной версии). Затем перейдите к: Visual Studio> Инструменты> Параметры> Xamarin> Настройки Android> Изменить расположение Java Development Kit на только что установленный.
В последнем обновлении Xamarin это исправлено автоматически. Убедитесь, что у вас установлена 64-разрядная версия Java SDK. И вам также необходимо построить / перестроить проект перед открытием файла XAML. Для получения дополнительной информации вы можете проверить мою запись здесь. Спасибо.
Если вы загружаете последнюю версию Java SDK, в настоящее время это 9.x, а затем Xamarin Forms не поддерживает эту версию.
Мы пошли в Xamarin Forms Live. Это сработало из коробки.
Как уже говорилось во многих других ответах, Xamarin Forms сейчас находится в предварительной версии.
В качестве альтернативы я использую LiveXAML. Это не средство предварительного просмотра форм, а другой, во многих случаях более совершенный подход. Инструмент позволяет вам вносить изменения в файлы XAML во время работы вашего приложения, и вы видите, что изменения почти сразу отражаются в приложении. Так что вы видите не предварительный просмотр, а реальную картину.
Это позволяет вам взаимодействовать с вашим приложением, как обычно, и вносить изменения на лету.
Его легко настроить, и есть бесплатная пробная версия.
- Не связан с LiveXAML, просто довольный клиент.
Мой предварительный просмотр не работал, что бы я ни пробовал. Но это начинает работать, когда я создаю новую страницу содержимого в xaml.
Средство предварительного просмотра XAML форм все еще находится в стадии разработки и выпущено как предварительная версия. Вот список текущих отчетов об ошибках, включая тот, который я только что отправил, пытаясь проверить это сам .
Многие из них являются частными внутренними ошибками, но, с моей стороны, iOS отлично работала для простого XAML-решения с шаблонами Forms, просто Android не отображал, но я получил баннер с ошибкой вверху, как описано в ошибке № 44603
Читайте также: