Перейти к содержимому

Xamarin forms previewer как включить в visual studio

  • автор:

Xamarin.Forms с помощью Visual Basic.NET

Xamarin не поддерживает Visual Basic напрямую. Следуйте инструкциям на этой странице, чтобы создать решение Xamarin.Forms на C# и заменить проект .NET Standard C# на Visual Basic.

Создание решения Xamarin.Forms и замена проекта .NET Standard на Visual Basic

Для программирования с помощью Visual Basic необходимо использовать Visual Studio в Windows.

Пошаговое руководство по Xamarin.Forms с Visual Basic

Выполните следующие действия, чтобы создать простой проект Xamarin.Forms, использующий Visual Basic:

  1. В Visual Studio 2019 выберите Создать проект.
  2. В окне Создание проекта введите Xamarin.Forms , чтобы отфильтровать список, и выберите Мобильное приложение (Xamarin.Forms), а затем нажмите кнопку Далее. Фильтр для приложений Xamarin.Forms
  3. На следующем экране введите имя проекта и нажмите кнопку Создать.
  4. Выберите пустой шаблон и нажмите кнопку ОК: Пустой шаблон Xamarin.Forms При этом будет создано решение Xamarin.Forms в Visual Studio с помощью C#. На следующих шагах измените решение для использования Visual Basic.
  5. Щелкните решение правой кнопкой мыши и выберите команду Добавить > новый проект.
  6. Введите библиотека Visual Basic , чтобы отфильтровать параметры проекта, и выберите параметр Библиотека классов (.NET Standard) со значком Visual Basic: Фильтр для библиотеки Visual Basic
  7. На следующем экране введите имя проекта и нажмите кнопку Создать.
  8. Щелкните правой кнопкой мыши проект Visual Basic и выберите Свойства, а затем измените пространство имен По умолчанию в соответствии с существующими проектами C#: Убедитесь, что корневое пространство имен Visual Basic соответствует приложению Xamarin.Forms
  9. Щелкните правой кнопкой мыши новый проект Visual Basic и выберите Управление пакетами NuGet, установите Xamarin.Forms и закройте окно диспетчера пакетов. Форма и закрытие окна диспетчера пакетов
  10. Переименуйте файл Class1.vb по умолчанию в App.vb: Переименуйте файл и класс Class1 по умолчанию в App
  11. Вставьте следующий код в файл App.vb , который станет отправной точкой приложения Xamarin.Forms:

Imports Xamarin.Forms Public Class App Inherits Application Public Sub New() Dim label = New Label With Dim stack = New StackLayout With < .VerticalOptions = LayoutOptions.Center >stack.Children.Add(label) Dim page = New ContentPage page.Content = stack MainPage = page End Sub End Class 

Удаление старой ссылки на проект, добавление ссылки на Visual Basic

  • Обновите проекты Android и iOS, чтобы они ссылались на новый проект Visual Basic (а не на проект C#, созданный шаблоном). Щелкните правой кнопкой мыши узел Ссылки в проектах Android и iOS, чтобы открыть диспетчер ссылок. Снимите флажок с библиотеки C# и установите флажок в библиотеке Visual Basic (не забудьте сделать это для проектов Android и iOS).
  • Удалите проект C#. Добавьте новые VB-файлы для сборки приложения Xamarin.Forms. Шаблон для новых ContentPage файлов в Visual Basic показан ниже.

    Imports Xamarin.Forms Public Class Page2 Inherits ContentPage Public Sub New() Dim label = New Label With Dim stack = New StackLayout With < .VerticalOptions = LayoutOptions.Center >stack.Children.Add(label) Content = stack End Sub End Class 

    Ограничения Visual Basic в Xamarin.Forms

    Как указано на странице переносимого визуального Basic.NET, Xamarin не поддерживает язык Visual Basic. Это означает, что существуют некоторые ограничения на то, где можно использовать Visual Basic:

    • Страницы XAML не могут быть включены в проект Visual Basic — генератор кода программной части может создавать только C#. Можно включить XAML в отдельную библиотеку классов C#, на который ссылается ссылка, и использовать привязку данных для заполнения файлов XAML с помощью моделей Visual Basic (пример приведен в примере).
    • Пользовательские отрисовщики не могут быть написаны на Visual Basic, они должны быть написаны на C# в проектах собственной платформы.
    • Реализации службы зависимостей не могут быть написаны на Visual Basic, они должны быть написаны на C# в проектах собственной платформы.

    Связанные ссылки

    • XamarinFormsVB (пример)
    • Межплатформенная разработка с помощью .NET Framework

    Использование данных времени разработки с помощью средства предварительного просмотра XAML

    Некоторые макеты трудно визуализировать без данных. Используйте эти советы, чтобы максимально эффективно использовать предварительный просмотр страниц с большим объемом данных в средстве предварительного просмотра XAML.

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

    Основы данных времени разработки

    Данные времени разработки — это поддельные данные, заданные для упрощения визуализации элементов управления в средстве предварительного просмотра XAML. Чтобы приступить к работе, добавьте следующие строки кода в заголовок страницы XAML:

    xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" 

    После добавления пространств имен можно поместить d: перед любым атрибутом или элементом управления, чтобы отобразить их в средстве предварительного просмотра XAML. Элементы с d: не отображаются во время выполнения.

    Например, можно добавить текст в метку, к которому обычно привязаны данные.

    " d:Text="Name!" /> 

    Данные времени разработки с текстом в метке

    В этом примере без d:Text средства предварительного просмотра XAML не будет отображаться ничего для метки. Вместо этого отображается «Name!», где метка будет содержать реальные данные во время выполнения.

    Вы можете использовать d: с любым атрибутом Xamarin.Forms для элемента управления, например цветами, размерами шрифтов и интервалами. Его можно даже добавить в сам элемент управления:

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

    В этом примере кнопка отображается только во время разработки. Используйте этот метод, чтобы поместить заполнитель для пользовательского элемента управления, не поддерживаемого в средстве предварительного просмотра XAML.

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

    Вы можете задать источник времени разработки для изображений, привязанных к странице или загруженных динамически. В проекте Android добавьте изображение, которое вы хотите отобразить в средстве предварительного просмотра XAML, в папку Resources > Drawable . В проекте iOS добавьте изображение в папку Resources . Затем это изображение можно отобразить в средстве предварительного просмотра XAML во время разработки:

     d:Source="DesignTimePicture.jpg" /> 

    Данные времени разработки с

    Данные времени разработки для ListViews

    ListViews — это популярный способ отображения данных в мобильном приложении. Однако их трудно визуализировать без реальных данных. Чтобы использовать с ними данные времени разработки, необходимо создать массив времени разработки, который будет использоваться в качестве ItemsSource. Средство предварительного просмотра XAML отображает содержимое этого массива в ListView во время разработки.

       Item One Item Two Item Three    " d:Text="" />    

    Данные времени разработки с помощью данных времени

    В этом примере в средстве предварительного просмотра XAML показано представление ListView из трех объектов TextCell. Вы можете изменить x:String существующую модель данных в проекте.

    Можно также создать массив объектов данных. Например, открытые свойства Monkey объекта данных можно создать как данные времени разработки:

    namespace Monkeys.Models < public class Monkey < public string Name < get; set; >public string Location < get; set; >> > 

    Чтобы использовать класс в XAML, необходимо импортировать пространство имен в корневом узле:

    xmlns:models="clr-namespace:Monkeys.Models" 
            " Detail="" />    

    Преимущество заключается в том, что вы можете привязаться к фактической модели, которую вы планируете использовать.

    Альтернатива: жесткое кодирование статической модели представления

    Если вы не хотите добавлять данные времени разработки в отдельные элементы управления, можно настроить макет хранилища данных для привязки к странице. См. запись в блоге Джеймса Монтемагно о добавлении данных времени разработки , чтобы узнать, как выполнить привязку к статической модели представления в XAML.

    Устранение неполадок

    Требования

    Для данных времени разработки Xamarin.Forms требуется минимальная версия 3.6.

    IntelliSense отображает волнистые линии под моими данными времени разработки

    Это известная проблема, которая будет исправлена в следующей версии Visual Studio. Проект по-прежнему будет построен без ошибок.

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

    Попробуйте закрыть и снова открыть XAML-файл, а также очистить и перестроить проект.

    Динамический предварительный просмотр XAML: захват и изменение пользовательского интерфейса классических приложений

    Область применения:yesVisual Studio Visual Studio для Mac noVisual Studio Code no

    С помощью XAML Live Preview можно записать пользовательский интерфейс классического приложения и перенести его в закрепленное окно в Visual Studio, что упрощает использование XAML Горячая перезагрузка для изменения приложения, а затем просматривать эти изменения в режиме реального времени при их внесении.

    Окно «Динамический просмотр XAML»

    Окно динамического просмотра XAML доступно во время отладки. Чтобы открыть его, перейдите в раздел Отладка>Windows>XAML Live Preview.

    Screenshot of the XAML Live Preview option from the Debug menu bar.

    Или нажмите кнопку «Показать в режиме реального просмотра XAML» на панели инструментов приложения.

    Screenshot of the XAML Live Preview option from the application toolbar.

    Прокрутка и масштабирование

    Помимо прокрутки с помощью полос прокрутки, можно также использовать следующие взаимодействия:

    • Колесико мыши, как вертикальное, так и горизонтальное (если мышь поддерживает ее).
    • Прокрутка с двумя пальцами сенсорной панели, как по вертикали, так и по горизонтали.
    • Клавиша CTRL, связанная с действием перетаскивания мыши.

    Что касается масштабирования, вы также можете использовать следующие взаимодействия:

    • Кнопки увеличения и увеличения в левом нижнем углу.
    • Сочетание клавиш CTRL плюс (+) или клавиши CTRL++минус (-) при желании с помощью клавиатуры.
    • Клавиша CTRL , связанная с действием колесика мыши, или сцепление для увеличения действия с сенсорной панелью. Дополнительный бонус за использование мыши заключается в поддержании области управления.

    Выбор элемента

    Выбор элементов в XAML Live Preview аналогичен выбору в работающем приложении. Он позволяет находить элементы в динамическом визуальном дереве или исходном XAML.

    Выбор элемента управляется первыми четырьмя кнопками панели инструментов (слева направо).

    Screenshot of the XAML Live Preview toolbar buttons for element selection.

    Кнопки панели инструментов создают следующие действия:

    • Выбор элемента запускает действие выбора элемента. Другими словами, он выделяет элементы при перемещении содержимого приложения в XAML Live Preview. Щелкнув элемент, он выбран в динамическом визуальном дереве. Он также переходит к источнику, если включен выбранный элемент предварительной версии и доступен исходный XAML. Это поведение аналогично тому, что в динамическом визуальном дереве.
    • Отображение сведений об элементе во время выбора — это кнопка переключателя, которая управляет отображением сведений о размере, цвете и шрифте элемента под мышью.
    • Просто My XAML — это кнопка переключателя, которая управляет элементами, которые нужно выделить: все или только те элементы с исходным XAML, доступным в решении. Это поведение аналогично тому, что в динамическом визуальном дереве.
    • Предварительный просмотр выбранного элемента — это кнопка переключателя, которая управляет навигацией по исходному XAML при выборе элемента. Он отключен по умолчанию. Это поведение аналогично тому, что в динамическом визуальном дереве.

    Правителей

    Линейки помогают выровнять элементы в приложении. Они отображают расстояние в единицах приложения до предыдущей линейки. Таким образом, они помогают проверить расстояния между различными частями приложения.

    Вторая группа кнопок панели инструментов управляет линейками, как показано ниже (слева направо):

    Screenshot of the second group of rulers toolbar buttons in XAML Live Preview.

    • Добавьте вертикальную линейку. Добавляет одну вертикальную линейку. Если щелкнуть эту кнопку несколько раз подряд, она будет размещать новые линейки, чтобы они не перекрывали существующие линейки.
    • Добавьте горизонтальную линейку. Добавляет одну горизонтальную линейку, аналогичную вертикальной линейке.
    • Удалите все линейки. Удаляет все линейки одновременно.
    • Выберите цвет линейки. Изменяет цвет линейки.
    • Переключение видимости линейки. Скрытие или отображение всех линейк с одним щелчком мыши.

    Линейки удобны для клавиатуры. Вы можете на вкладке вокруг них. Клавиши со стрелками можно использовать для перемещения линейки по одному пикселю в один пиксель или нажатия клавиш со стрелками, чтобы перемещать их на 10 единиц приложения одновременно. Ключ Del удаляет выбранную в данный момент линейку. Вы также можете удалить линейку с мышью, нажав кнопку «Удалить линейку » рядом с меткой.

    Вы также можете добавлять линейки вокруг элемента при использовании выбора элементов. Щелкните правой кнопкой мыши вертикальные линейки. Чтобы добавить горизонтальные линейки, выберите и удерживайте клавишу SHIFT при щелчке правой кнопкой мыши.

    Приложения с несколькими окнами

    Если в приложении несколько окон, можно выбрать окно для отображения с помощью поля со списком «Окно». Кроме того, нажмите кнопку «Показать в режиме реального просмотра XAML» на панели инструментов приложения, которая находится в окне предварительного просмотра.

    Поддерживаемые платформы

    Первоначальный выпуск Visual Studio 2022 поддерживает следующие платформы и сценарии отладки.

    Платформа Совет по выбору & элементов Правителей
    WPF Да Да
    UWP Да Да
    Рабочий стол WinUI3 Да Да
    .NET MAUI Да Да
    Xamarin 5.0+ (Эмулятор Android) No Да (px*)

    В приведенной выше таблице (px*) указывает линейки, которые отображаются в пикселях; все остальные платформы отображают сведения в единицах платформы, которые зависят от DPI монитора.

    Ограничения

    Xaml Live Preview работает путем записи снимка экрана приложения несколько раз в секунду и использует доступные API, такие как PrintWindow. Это зависит от следующих ограничений:

    • Если часть окна приложения отключена, то эта часть, скорее всего, не отображает Горячая перезагрузка XAML.
    • Окно может отказаться от записи снимка экрана и стать недоступным для XAML Live Preview с помощью SetWindowDisplayAffinity с WDA_EXCLUDEFROMCAPTURE или DwmSetWindowAttribute с DWMWA_CLOAK.

    Следующие шаги

    Дополнительные сведения о XAML Горячая перезагрузка, которые тесно связаны с XAML Live Preview.

    Средство предварительного просмотра XAML для 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 Параметры средства предварительного просмотра в параметрах средства

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

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

    Выберите, хотите ли вы просмотреть код, средство предварительного просмотра XAML или и то, и другое, нажав эти кнопки в области разделенного представления. Средняя кнопка переключает сторону средства предварительного просмотра и вашего кода:

    Xamarin.Forms Элементы управления средства предварительного просмотра для переключения между конструктором, исходным представлением и разделенным представлением в Visual Studio

    Вы можете изменить, будет ли экран разделен по вертикали или по горизонтали, или свернуть одну панель полностью:

    Xamarin.Forms Элементы управления ориентацией области предварительного просмотра в Visual Studio

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

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

    Visual Studio для Mac

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

    Xamarin.Forms Средство предварительного просмотра, включающееся с помощью кнопки предварительного просмотра или разделения

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

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

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

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

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

    • Android — отображение версии экрана Android
    • iOS — отображение версии экрана iOS (примечание. Если вы используете Visual Studio в Windows, для использования этого режима необходимо связать с Компьютером Mac).
    • Устройство — раскрывающийся список устройств Android или iOS, включая разрешение и размер экрана.
    • Книжная (значок) — использует книжную ориентацию для предварительного просмотра.
    • Альбомная ориентация (значок) — использует альбомную ориентацию для предварительного просмотра.

    Обнаружение режима конструктора

    Свойство static 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.
    • Попробуйте упаковать все инициализированные классы в код C# страницы в if (!DesignMode.IsDesignModeEnabled) .

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

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

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *