Редактор кода XAML

Редактор кода XAML в интегрированной среде разработки Visual Studio содержит все средства, необходимые для создания приложений WPF и UWP для платформы Windows, а также для Xamarin.Forms или .NET MAUI. В этой статье описывается как роль редактора кода при разработке приложений на основе XAML, так и функций, уникальных для редактора кода XAML в Visual Studio 2019.

Для начала рассмотрим интегрированную среду разработки (интегрированную среду разработки) с открытым проектом WPF. На следующем изображении показаны несколько ключевых инструментов IDE, которые вы используете вместе с редактором кода XAML.

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

• окно редактора кода XAML, тема этой статьи, где вы создаете и редактируете код.
• Окноконструктора XAML, в котором вы разрабатываете пользовательский интерфейс.
• Окно панели инструментов , закрепляемое окно, где вы добавляете элементы управления в пользовательский интерфейс.
• Кнопка Отладка, с помощью которой запускается код и отладка.
  (Вы можете изменять код в реальном времени в процессе отладки с помощью функции XAML Hot Reload.)
• Окнообозревателя решений, в котором вы управляете файлами, проектами и решениями.
• Окно свойств , в котором вы изменяете внешний вид пользовательского интерфейса и способ работы элементов управления пользовательским интерфейсом.

Чтобы продолжить, давайте узнаем больше о редакторе кода XAML.

Пользовательский интерфейс редактора кода XAML

Хотя окно редактора кода для приложений XAML предоставляет некоторые элементы пользовательского интерфейса (пользовательского интерфейса), которые также отображаются в стандартной интегрированной среде разработки, она также включает несколько уникальных функций, которые упрощают разработку приложений XAML.

Ниже приведены сведения о самом окне редактора кода XAML.

Далее рассмотрим функции каждого элемента пользовательского интерфейса в редакторе кода.

Первая строка

В первой строке в верхней части окна кода XAML слева есть вкладка Конструктор, кнопка Замена панелей, вкладка XAML и кнопка Выделение XAML.

Вот как они работают:

• Вкладка "Дизайн" переключает фокус с редактора кода XAML на среду разработки XAML.
• Кнопка переключения изменяет расположение конструктора XAML и редактора кода XAML в интегрированной среде разработки.
• Вкладка XAML возвращает фокус в редактор кода XAML.
• Кнопка всплывающего окна XAML создает отдельное окно редактора кода XAML, которое находится за пределами интегрированной среды разработки.

Справа находятся кнопка вертикального разделения, кнопка горизонтального разделения и кнопка сворачивания панелей.

Вот как они работают:

• Кнопка вертикального разделения изменяет расположение конструктора XAML и редактора кода XAML в интегрированной среде разработки с горизонтального выравнивания на вертикальное выравнивание.
• Кнопка Горизонтальное Разделение изменяет расположение конструктора XAML и редактора кода XAML в IDE с вертикального на горизонтальное.
• Кнопка свернуть панель позволяет свернуть содержимое нижней панели, будь то редактор кода или конструктор. (Чтобы восстановить нижнюю панель, снова нажмите ту же кнопку, которая теперь называется кнопкой Развернуть Область.)

Вторая строка

Во второй строке в верхней части окна кода XAML есть два раскрывающихся списка окон. Однако если вы просматриваете подсказку для этих элементов пользовательского интерфейса, она дополнительно идентифицирует их как "Element: Window" и "Member: Window".

Раскрывающиеся списки окон выполняют различные функции следующим образом.

• Элемент : окно слева помогает просматривать и переходить к соседним или родительским элементам.

  В частности, в нем показан обзорный вид, раскрывающий структуру тегов вашего кода. При выборе из списка фокус в редакторе кода прикрепится к строке кода, включающей выбранный элемент.

  

• Элемент : окно справа помогает просматривать и перемещаться к атрибутам или дочерним элементам.

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

  

Средняя область, редактор кода

Средняя область — это часть "кода" редактора кода XAML. Он включает большинство функций, которые вы найдете в редакторе кода интегрированной среды разработки. Мы рассмотрим несколько универсальных функций интегрированной среды разработки, которые помогут вам разработать код XAML. Мы также рассмотрим уникальные функции XAML в интегрированной среде разработки.

Быстрые действия

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

Например, одна полезная задача, которую можно выполнить с помощью быстрых действий, — Удалить ненужные из кода C# на вкладке MainWindow.xaml.cs.

Вот как:

1. Наведите указатель мыши на инструкцию using, выберите значок лампочки, а затем выберите Удалить неиспользуемые инструкции из раскрывающегося списка.

   

2. Выберите, следует ли исправить все вхождения в документе, проектеили решении.

3. Просмотрите диалоговое окно предварительного просмотра и выберите Применить.

Вы также можете получить доступ к этой функции из строки меню. Для этого выберите Изменить>IntelliSense>Remove and Sort Usings.

Дополнительные сведения об использовании параметров см. на странице Сортировка с помощью. Дополнительные сведения о IntelliSense см. на странице IntelliSense в Visual Studio. Чтобы получить дополнительные сведения о некоторых типичных способах использования быстрых действий, разработчики могут обратиться к странице распространенных быстрых действий.

Отслеживание изменений

Цвет левого поля позволяет отслеживать изменения, внесенные в файл. Вот как цвета связаны с действиями, которые вы выполняете:

• Изменения, внесенные с момента открытия файла, но не сохранены, обозначены желтой полоской на левом краю (называемом полем выбора).

  

• После того как вы сохраните изменения (но перед закрытием файла), панель станет зеленой .

  

Чтобы отключить и включить эту функцию, измените параметр отслеживания изменений в параметрах текстового редактора ("Средства>параметры">текстового редактора).

Для получения дополнительной информации об отслеживании изменений, включая волнистые линии (также известные как "squiggles"), которые появляются под строками кода, см. в разделе "Функции редактора" на странице "Функции редактора кода Visual Studio".

Контекстное меню правой кнопкой мыши

При редактировании кода в редакторе кода XAML есть несколько функций, к которым можно получить доступ с помощью контекстного меню правой кнопкой мыши. Большинство этих функций доступны универсально в интегрированной среде разработки Visual Studio, а некоторые относятся к использованию редактора кода вместе с окном конструктора.

Вот что делает каждая функция и как это полезно:

• Просмотр кода - Открывает окно кода языка программирования, которое обычно располагается рядом с представлением по умолчанию, включающим окно конструктора и редактор кода XAML.
• конструктор представлений — открывает представление по умолчанию, включающее окно конструктора и редактор кода XAML. (Если вы уже находитесь в представлении по умолчанию, это ничего не делает.)
• быстрые действия и рефакторинги — рефакторинг, создает или изменяет код одним действием. При наведении указателя мыши на код вы увидите значок лампочки, когда доступно быстрое действие или рефакторинг.
  См. также: Быстрые действия и Рефакторинг кода.
• Переименовать... — переименовывает только пространства имен. Если у вас нет пространства имен для переименования, появится сообщение об ошибке с сообщением "Можно переименовать только префиксы пространства имен".
• Удалить и отсортировать пространства имен — удаляет неиспользуемые пространства имен, а затем сортирует эти оставшиеся пространства имен.
• просмотр определения — позволяет увидеть определение типа, не покидая текущее расположение в редакторе.
  См. также: Показать определение и Просмотр и изменение кода с использованием Показать определение.
• Перейти к определению — переходит к исходному коду типа или члена и открывает результат на новой вкладке.
  См. также: Перейти к определению.
• Окружать с помощью .... Используйте фрагменты кода в окружении, которые добавляются вокруг выбранного блока кода.
  См. также: фрагменты расширения и фрагменты окружения.
• Вставка фрагмента кода: вставляет фрагмент кода в расположение курсора.
• Вырезать - Самоочевидно
• Копия — само собой разумеющееся
• вставка — самоочевидно
• Структурирование — раскрытие и сворачивание разделов кода.
  См. также: выстраивание.
• Управление исходным кодом - Просмотрите историю внесённых изменений в репозиторий с открытым исходным кодом.

Средняя панель, полоса прокрутки

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

Разделение окна кода

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

Дополнительные сведения о разделении окна редактора см. на странице "Управление окнами редактора".

Использование заметок или режима карты

Вы также можете изменить внешний вид полосы прокрутки и какие дополнительные функции он содержит. Например, многие люди любят включать заметки на полосе прокрутки, которые предоставляют визуальные подсказки, такие как изменения кода, точки останова, закладки, ошибки и положение курсора.

Другие ценят использование режима карты , который отображает строки кода в миниатюре на полосе прокрутки. Разработчики, имеющие большой объем кода в файле, могут найти, что режим карты отслеживает строки кода более эффективно, чем полоса прокрутки по умолчанию.

Дополнительные сведения об изменении параметров полосы прокрутки по умолчанию см. в разделе Настройка страницы полосы прокрутки.

Функции, относящиеся к XAML

Большинство из следующих функций доступны в интегрированной среде разработки Visual Studio, однако некоторые из них обладают дополнительными возможностями, которые упрощают программирование для разработчиков XAML.

Фрагменты кода XAML

Фрагменты кода — это небольшие блоки повторно используемого кода, которые можно вставить в файл кода с помощью команды контекстного меню правой кнопкой мыши вставки фрагмента кода или сочетания сочетаний клавиш (CTRL+K, CTRL+X). Мы усовершенствовали IntelliSense, чтобы он поддерживал отображение фрагментов XAML, которые работают как для встроенных фрагментов, так и для всех пользовательских фрагментов, которые вы добавляете вручную. Некоторые из готовых фрагментов XAML включают #region, Column definition, Row definition, Setterи Tag.

Дополнительные сведения см. на страницах с фрагментами кода и на страницах с фрагментами кода C# .

Поддержка #region XAML

В Visual Studio поддержка #region доступна разработчикам XAML в WPF, UWP, Xamarin.Formsи .NET MAUI. В Visual Studio 2019 мы продолжаем вносить постепенные улучшения в поддержку #region. Например, в версии 16.4 и более поздних версиях, параметры #region отображаются, когда вы начинаете вводить текст <!.

Вы можете использовать регионы, когда вы хотите группировать разделы кода, которые также нужно развернуть или свернуть.

    <!--#region NameOfRegion-->
    Your code is here
    <!--#endregion-->

Дополнительные сведения о регионах см. на странице #region (справочник по C#). Дополнительные сведения о расширении и сворачивании разделов кода см. на странице .

Комментарии XAML

Разработчики часто предпочитают документировать код с помощью комментариев. Вы можете добавить примечания к коду XAML, который находится на вкладке MainWindow.xaml следующим образом:

• Введите <!-- перед комментарием и добавьте --> после комментария.

• Введите <! и выберите !-- из списка параметров.

  

• Выберите код, который нужно окружить комментарием, а затем нажмите кнопку Комментарий на панели инструментов в IDE. Чтобы отменить действие, выберите кнопку Раскомментировать.

  

• Выберите код, который нужно окружить комментарием, а затем нажмите клавиши CTRL +K, CTRL+C. Чтобы раскомментировать выделенный код, нажмите клавиши CTRL +K, CTRL+U.

Дополнительные сведения об использовании комментариев в коде C#, который находится на вкладке MainWindow.xaml.cs, см. на странице примечаний документации.

Лампочки XAML

Значки лампочки, отображаемые в коде XAML, являются частью быстрых действий, которые можно использовать для рефакторинга, создания или изменения кода.

Ниже приведены несколько примеров того, как они могут воспользоваться преимуществами кода XAML:

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

  

• Переименовать пространство имен. Эта функция, доступная в контекстном меню правой кнопкой мыши после выбора пространства имен, позволяет изменить несколько экземпляров параметра одновременно. Вы также можете получить доступ к этой функции с помощью строки меню: Правка>Рефакторинг>Переименовать, или нажав клавиши Ctrl+R, а затем снова Ctrl+R.

  

  Дополнительные сведения см. на странице Переименование символа кода для рефакторинга.

Условный КОД XAML для UWP

Условный XAML предоставляет способ использования метода ApiInformation.IsApiContractPresent в разметке XAML. Это позволяет задавать свойства и создавать экземпляры объектов в разметке в зависимости от наличия API без необходимости использовать бэкэнд-код.

Дополнительные сведения см. на странице условного XAML и странице элементов управления UWP XAML в приложениях для ПК (XAML Islands).

Визуализатор структуры XAML

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

Дополнительные сведения см. на странице кода навигации.

IntelliCode для XAML

Когда вы добавляете тег XAML в код, вы обычно начинаете с левой угловой скобки <. При вводе этой угловой скобки отображается меню IntelliCode, которое содержит несколько наиболее популярных тегов XAML. Выберите тот, который вы хотите быстро добавить в код.

Вы можете распознать выбранные элементы IntelliCode, так как они отображаются в верхней части списка и отмечены звездочкой.

Для получения дополнительной информации см. страницу Обзор IntelliCode.

Параметры

Дополнительные сведения о всех параметрах в среде разработки Visual Studio см. на странице функций редактора кода.

Необязательные параметры XAML

Диалоговое окно "Параметры " можно использовать для изменения параметров по умолчанию для редактора кода XAML. Чтобы просмотреть параметры, выберите Средства>Параметры>Текстовый редактор>XAML.

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

В диалоговом окне "Параметры " для XAML первые три элемента являются универсальными для всех языков программирования, поддерживаемых интегрированной среды разработки Visual Studio. Перейдите к связанной информации в следующей таблице, чтобы узнать больше об этих параметрах и их использовании.

Параметры текстового редактора, специфичные для XAML

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

Дальнейшие действия

Дополнительные сведения о том, как редактировать код в реальном времени во время выполнения приложения в режиме отладки, см. на странице XAML Hot Reload.

См. также

• функции редактора кода Visual Studio
• XAML в приложениях UWP
• XAML в приложениях Xamarin.Forms
• XAML в приложениях .NET MAUI