Редактор кода XAML
Редактор кода XAML в интегрированной среде разработки Visual Studio содержит все инструменты, необходимые для создания приложений WPF и UWP для платформы Windows, а также для Xamarin.Forms. В этой статье описываются обе роли, выполняемые редактором кода при разработке приложений на основе XAML, и уникальные функции редактора кода XAML в Visual Studio 2019.
Для начала давайте взглянем на интегрированную среду разработки (IDE) с открытым проектом WPF. На следующем рисунке показано несколько ключевых инструментов IDE, которые вы будете использовать вместе с редактором кода XAML.
Перечислим ключевые инструменты IDE, показанные на рисунке, начиная с нижнего левого угла и следуя по часовой стрелке.
- Окно редактора кода XAML — тема этой статьи, в которой вы создаете и редактируете код.
- Окно конструктора XAML, где разрабатывается пользовательский интерфейс.
- Закрепляемое окно панели элементов, в котором добавляются элементы управления для вашего пользовательского интерфейса.
- Кнопка Отладка, с помощью которой вы запускаете код и отлаживаете его.
(Вы также можете изменять код в реальном времени во время отладки с помощью функции Горячая перезагрузка XAML.) - Окно обозревателя решений, где можно управлять файлами, проектами и решениями.
- Окно Свойства, в котором можно изменять внешний вид пользовательского интерфейса и работу его элементов управления.
Давайте подробнее рассмотрим редактор кода XAML.
Пользовательский интерфейс редактора кода XAML
Хотя в окне редактора кода для приложений XAML используются некоторые элементы пользовательского интерфейса из нашей стандартной IDE, в нем также имеется несколько уникальных функций, упрощающих разработку приложений XAML.
Вот как выглядит окно редактора кода XAML.
Теперь рассмотрим функции каждого из элементов пользовательского интерфейса в редакторе кода.
Первая строка
В верхней части окна редактора кода XAML, в первой строке слева, мы видим вкладку Design (Конструктор), кнопку переключения панелей, вкладку XAML и кнопку вызова XAML.
Они работают следующим образом.
- При выборе вкладки Design (Конструктор) фокус из редактора кода XAML перемещается в Конструктор XAML.
- Кнопка переключения панелей позволяет менять местами расположения Конструктора XAML и редактора кода XAML в IDE.
- При выборе вкладки XAML фокус возвращается обратно в редактор кода XAML.
- При нажатии кнопки вызова XAML создается отдельное окно редактора кода XAML, которое находится за пределами IDE.
Справа в верхней строке находятся кнопки вертикальной ориентации, горизонтальной ориентации и сворачивания панели.
Они работают следующим образом.
- Кнопка вертикальной ориентации изменяет горизонтальное расположение Конструктора XAML и редактора кода XAML в IDE на вертикальное.
- Кнопка горизонтальной ориентации изменяет вертикальное расположение Конструктора XAML и редактора кода XAML в IDE на горизонтальное.
- Кнопка сворачивания панели позволяет сворачивать содержимое нижней панели, будь то редактор кода или Конструктор. (Чтобы восстановить нижнюю панель, нажмите ту же кнопку, которая будет уже кнопкой разворачивания панелей, еще раз.)
Вторая строка
Во второй строке в верхней части окна кода XAML имеются два раскрывающихся списка Window (Окно). Однако если вы просматриваете подсказку для этих элементов пользовательского интерфейса, она дополнительно идентифицирует их как элемент: Window и "Member: Window".
Раскрывающиеся списки Window имеют разные функции, показанные ниже.
Элемент : окно слева помогает просматривать и переходить к элементам с братом или родительским элементом.
В частности, он показывает схематичное представление структуры тегов вашего кода. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранный элемент.
Элемент : окно справа помогает просматривать и переходить к атрибуту или дочерним элементам.
В частности, он показывает список свойств в вашем коде. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранное свойство.
Средняя панель редактора кода
В средней панели редактора кода XAML отображается код. Здесь находится большинство функций, которые существуют в редакторе кода IDE. Мы коснемся некоторых универсальных функций IDE, которые могут быть полезными при разработке кода XAML. Мы также особо обратим ваше внимание на уникальные функции XAML в IDE.
Быстрые действия
Быстрые действия позволяют создавать и изменять код, а также выполнять его рефакторинг одним действием.
Например, с помощью быстрых действий можно быстро удалить ненужные директивы using из кода C# на вкладке MainWindow.xaml.cs.
Это делается следующим образом:
Наведите указатель мыши на директиву using, щелкните значок лампочки, а затем выберите в раскрывающемся списке действие Remove Unnecessary Usings (Удалить ненужные директивы using).
Выберите, где вы хотите исправить все вхождения — в документе, проекте или решении.
Проверьте, все ли правильно, в диалоговом окне предварительного просмотра, а затем нажмите Применить.
Эту функцию также можно вызвать из строки меню. Для этого последовательно выберите Правка>IntelliSense>Удаление и сортировка директив using.
Дополнительные сведения о параметрах директив using см. на странице Сортировка директив using. Дополнительные сведения об IntelliSense см. на странице IntelliSense в Visual Studio. Дополнительные сведения о некоторых распространенных способах использования быстрых действий разработчиками см. на странице Распространенные быстрые действия.
Отслеживание изменений
С помощью цвета левого поля окна можно отслеживать изменения, внесенные в файл. Цвета связаны с выполняемыми вами действиями следующим образом.
Если после открытия файла в него были внесены изменения, которые еще не сохранены, в левом поле окна (поле выделения) отображается желтая полоска.
После того как вы сохраните изменения (не закрывая файл), полоска станет зеленой.
Включить или отключить эту функцию можно с помощью параметра Отслеживать изменения в настройках текстового редактора (Сервис>Параметры>Текстовый редактор).
Дополнительные сведения об отслеживании изменений— включение волнистых строк (также известных как "squiggles"), которые отображаются в строках кода, см. в разделе "Функции редактора" страницы редактора кода Visual Studio.
Контекстное меню
При изменении кода в редакторе кода XAML некоторые функции можно вызывать из контекстного меню, которое открывается при щелчке правой кнопкой мыши. Большинство этих функций повсеместно доступно повсюду в интегрированной среде разработки Visual Studio, но некоторые можно вызывать только при использовании редактора кода вместе с окном конструктора.
Перечислим эти функции и покажем, для чего они используются.
- View Code (Просмотр кода) — открывает окно кода языка программирования, которое обычно находится рядом с представлением по умолчанию, включающим окно конструктора и редактор кода XAML.
- View Designer (Просмотр Конструктора) — открывает представление по умолчанию, которое включает окно конструктора и редактор кода XAML. (Если вы уже находитесь в представлении по умолчанию, эта функция ничего не делает.)
- Quick Actions and Refactorings (Быстрые действия и рефакторинг) — выполняет рефакторинг, формирует или иным образом изменяет код одним действием. При наведении курсора на код вы увидите значок лампочки, если доступно быстрое действие или рефакторинг.
См. также: быстрые действия и код рефакторинга. - Rename... (Переименовать...) — выполняет переименование только пространств имен. Если отсутствует пространство имен, которое можно переименовать, появляется сообщение об ошибке "Можно переименовывать только префиксы пространства имен".
- Remove and Sort Namespaces (Удалить и сортировать пространства имен) — удаляет неиспользуемые пространства имен, а затем сортирует оставшиеся.
- Peek Definition (Показать определение) — позволяет предварительно просматривать определение типа, не покидая текущее расположение в редакторе.
См. также: просмотр определения и просмотра и редактирования кода с помощью определения peek. - Перейти к определению — переходит к источнику типа или члена и открывает результат на новой вкладке.
См. также: Перейти к определению. - Surround with... (Окружить...) — использование фрагментов кода, которые добавляются вокруг выбранного блока кода.
См. также: фрагменты расширения и фрагменты фрагментов. - Insert Snippet (Вставить фрагмент) — вставляет фрагмент кода в позицию курсора.
- Cut (Вырезать) — не требует пояснений.
- Copy (Копировать) — не требует пояснений.
- Paste (Вставить) — не требует пояснений.
- Outlining (Структурирование) — развертывание и свертывание разделов кода.
См. также: Выстраивание. - Source Control (Система управления версиями) — просмотр журнала внесения кода в репозиторий с открытым кодом.
Средняя панель, полоса прокрутки
Эта полоса прокрутки может не только прокручивать ваш код. С ее помощью можно также открывать другую панель редактора кода. Кроме того, можно использовать полосу прокрутки для более эффективного кодирования, добавляя в нее заметки или используя различные режимы отображения.
Разделение окна кода
В полосе прокрутки редактора кода в правом верхнем углу имеется кнопка разделения. Нажав ее, можно открыть другую панель редактора кода. Это очень удобно, так как эти панели работают независимо друг от друга, и их можно использовать для работы в разных местах кода.
Дополнительные сведения о том, как разделить окно редактора, см. на странице Управление окнами редактора.
Использование заметок или режима схемы
Вы можете изменять вид полосы прокрутки и содержащиеся в ней дополнительные функции. Например, многим пользователям нравится включать в полосу прокрутки заметки, которые обеспечивают визуальные подсказки, указывающие изменения кода, точки останова, закладки, ошибки и позицию курсора.
Некоторые предпочитают использовать режим схемы, в котором на полосе прокрутки показывается миниатюрное изображение строк кода. Разработчики, работающие с большим объемом кода в файле, часто находят, что в режиме схемы строки кода можно отслеживать более эффективно, чем при использовании полосы прокрутки по умолчанию.
Дополнительные сведения о том, как можно изменить параметры полосы прокрутки по умолчанию, см. на странице Настройка полосы прокрутки.
Функции, относящиеся к XAML
Большинство этих функций повсеместно доступно в интегрированной среде разработки Visual Studio, однако к некоторым из них добавлены аспекты, которые упрощают написание кода для разработчиков XAML.
Фрагменты кода XAML
Фрагменты кода — это небольшие блоки многократно используемого кода, которые можно вставить в файл кода с помощью команды контекстного меню Insert snippet (Вставить фрагмент) или сочетания клавиш (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. В Visual Studio 2019 мы продолжаем последовательно улучшать поддержку директивы #region. Например, начиная с версии 16.4 при вводе <! отображаются варианты #region для выбора.
Вы можете использовать директиву region, чтобы группировать разделы кода, которые хотите сворачивать или разворачивать.
<!--#region NameOfRegion-->
Your code is here
<!--#endregion-->
Дополнительные сведения о директиве #region см. на странице #region (справочник по C#). Дополнительные сведения о развертывании и свертывании разделов кода см. на странице Структурирование.
Комментарии в XAML
Разработчики часто предпочитают документировать свой код с помощью комментариев. Вы можете добавлять комментарии в код XAML, который находится на вкладке MainWindow.xaml, следующими способами.
Введите
<!--перед комментарием, а затем добавьте-->после комментария.Введите
<!, а затем выберите!--в списке вариантов.
Выберите код, который необходимо закомментировать, и нажмите кнопку Закомментировать на панели инструментов в IDE. Чтобы отменить это действие, нажмите кнопку Раскомментировать.
Выберите код, который хотите закомментировать, а затем нажмите сочетания клавиш Ctrl+K, Ctrl+C. Чтобы раскомментировать выбранный код, нажмите сочетания клавиш Ctrl+K, Ctrl+U.
Дополнительные сведения об использовании комментариев в коде C# на вкладке MainWindow.xaml.cs см. на странице Комментарии документации.
Лампочки в XAML
Значки лампочки, которые появляются в вашем коде XAML, являются частью быстрых действий, которые можно использовать для рефакторинга, создания или изменения кода.
Приведем несколько примеров того, как они помогают при кодировании в XAML.
Удаление ненужных пространств имен. В редакторе кода XAML ненужные пространства имен отображаются затененными. Если навести указатель мыши на ненужную директиву using, появится лампочка. Когда вы выбираете в раскрывающемся списке действие Удалить ненужные пространства имен, появляется окно предварительного просмотра, показывающее то, что вы можете удалить.
Переименование пространства имен. Функция переименования пространства имен, которую можно вызвать из контекстного меню после выделения пространства имен, позволяет одновременно изменить несколько экземпляров параметра. Эту функцию также можно вызвать из строки меню, последовательно выбрав пункты Edit (Правка)>Refactor> (Рефакторинг)Rename (Переименовать), или нажать сочетание клавиш Ctrl+R, а затем снова Ctrl+R.
Дополнительные сведения см. на странице Рефакторинг для переименования символов кода.
Условный код XAML для UWP
Условный КОД XAML предоставляет способ использования метода ApiInformation.IsApiContractPresent в разметке XAML. Благодаря этому можно задавать свойства и создавать экземпляры объектов в разметке в зависимости от наличия API, а необходимость использования кода программной части отсутствует.
Дополнительные сведения см. на страницах Условный код XAML и Размещение элементов управления HAML UWP XAML в классическом приложении (XAML Islands).
Визуализатор структуры XAML
Функция визуализатора структуры в редакторе кода позволяет отображать направляющие структуры, которые представляют собой вертикальные пунктирные линии, указывающие парные открывающие и закрывающие теги в вашем коде. С помощью этих вертикальных линий можно легко определять начало и конец логических блоков.
Дополнительные сведения см. на странице Перемещение по коду.
IntelliCode для XAML
При добавлении тега XAML в свой код вы обычно начинаете с левой угловой скобки <. Когда вы вводите эту угловую скобку, появляется меню IntelliCode с несколькими наиболее распространенными тегами XAML. Выберите нужный тег, чтобы быстро добавить его в код.
Вы легко можете распознать варианты IntelliCode, так как они отображаются вверху списка и отмечены звездочками.
Дополнительные сведения см. на странице Общие сведения об IntelliCode.
Настройки
Дополнительные сведения обо всех параметрах в IDE Visual Studio см. на странице Функции редактора кода.
Дополнительные параметры XAML
С помощью диалогового окна Параметры можно изменить параметры по умолчанию для редактора кода XAML. Чтобы просмотреть эти параметры, последовательно выберите Инструменты>Параметры>Текстовый редактор>XAML.
Примечание.
Вы также можете открыть диалоговое окно "Параметры", используя сочетания клавиш. Вот как: нажмите клавиши CTRL+Q для поиска интегрированной среды разработки, введите параметры и нажмите клавишу ВВОД. Затем нажмите Ctrl+E для поиска диалогового окна "Параметры", введите Текстовый редактор, нажмите клавишу ВВОД, введите XAML и снова нажмите ВВОД.
Дополнительные сведения о сочетаниях клавиш см. на странице Рекомендации по сочетаниям клавиш в Visual Studio.
Универсальные параметры текстового редактора
В диалоговом окне Параметры для XAML три следующих первых элемента являются универсальными параметрами для всех языков программирования, которые поддерживает IDE Visual Studio. Воспользуйтесь ссылками в следующей таблице, чтобы получить дополнительные сведения об этих параметрах и их использовании.
| Имя. | Дополнительная информация |
|---|---|
| Общие | Диалоговое окно "Параметры": текстовый редактор > "Все языки" |
| Полосы прокрутки | Параметры, текстовый редактор, все языки, полосы прокрутки |
| Вкладки | "Параметры", "Текстовый редактор", "Все языки", "Табуляция" |
Параметры текстового редактора, относящиеся к XAML
В следующей таблице приведены параметры в диалоговом окне Параметры, которые облегчают внесение изменений при разработке приложений на базе XAML. Воспользуйтесь ссылками в этой таблице, чтобы получить дополнительные сведения об этих параметрах и их использовании.
| Имя. | Дополнительная информация |
|---|---|
| Форматирование | "Параметры", "Текстовый редактор", XAML, "Форматирование" |
| Разное | Параметры, текстовый редактор, XAML, прочие |
Совет
Параметр Capitalize event handler method name (Писать имя метода обработчика события прописными буквами) в разделе Miscellaneous (Прочие) особенно полезен для разработчиков XAML. Так как это новый параметр, он отключен по умолчанию, но мы полагаем, что вы включите его для поддержки соответствующего регистра в вашем коде.
Следующие шаги
Дополнительные сведения о том, как изменять код в реальном времени при выполнении приложения в режиме отладки, см. на странице Горячая перезагрузка XAML.