Как редактировать xaml в visual studio
Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс, помогающий проектировать приложения на основе XAML, такие как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна "Панель элементов" (окно "Ресурсы" в Blend для Visual Studio) и задавая свойства в окне "Свойства". Также можно изменить код XAML непосредственно в представлении XAML.
Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.
Xamarin. Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin. Forms и изменить их во время работы приложения, используйте горячую перезагрузку XAML для Xamarin. Forms. Дополнительные сведения см. на странице Горячая перезагрузка XAML для Xamarin. Forms (Предварительная версия) .
Рабочая область конструктора XAML
Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно "Структура документа" (окно "Объекты и временная шкала" в Blend для Visual Studio) и окно "Свойства". Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.
В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. Вы можете нажать кнопку Переставить панели, чтобы поменять окно, которое отображается поверх другого: область рисования или редактор XAML.
Конструктор
В режиме конструктора окно, содержащее область рисования, является активным окном, которое можно использовать в качестве основной рабочей области. С его помощью можно визуально создавать страницы приложения, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML. На этом рисунке показана область рисования в режиме конструктора.
В области рисования доступны следующие функции.
Линии привязки
Линии привязки — это границы выравнивания , отображаемые в виде красной пунктирной линии, которые отображаются при выравнивании краев элементов управления или при выравнивании базовых показателей текста. Границы выравнивания появляются, только если привязка к линиям привязки включена.
Границы сетки
Границы сетки служат для управления строками и столбцами на панели Сетка. Вы можете создавать и удалять строки и столбцы, а также изменять их относительную ширину и высоту. Вертикальная граница сетки, которая отображается в левой части области рисования, используется для строк, а горизонтальная линия, которая появляется вверху, — для столбцов.
Графические элементы сетки
Графический элемент сетки отображается как треугольник с вертикальной или горизонтальной линией, присоединенной к границе сетки. При перетаскивании графического элемента сетки ширина или высота смежных столбцов или строк изменяется по мере движения мыши.
Графические элементы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув границу сетки. При добавлении новой строки или столбца для панели сетки, которая содержит два и более столбцов или строк, за пределами границы появляется мини-панель инструментов, позволяющая задать ширину и высоту явным образом. С помощью мини-панели инструментов можно задавать размеры строк и столбцов сетки.
Маркеры изменения размера
Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.
Margins
Поля представляют собой фиксированное пространство между краем элемента управления и краем его контейнера. Поля элемента управления можно задать с помощью свойств поля в разделе Макет в окне Свойства .
Графические элементы полей
Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).
Маркеры элемента
Вы можете изменить элемент с помощью его маркеров, которые появляются в области рисования при наведении указателя мыши на углы синего ограничивающего прямоугольника. Эти маркеры позволяют выполнить поворот, изменение размера или зеркальное отражение, перемещение или добавление радиуса скругления угла к элементу. Символ маркера элемента зависит от функции и меняется в зависимости от расположения указателя. Если вы не видите маркеры элемента, убедитесь, что элемент выделен.
В представлении Конструктор в левой нижней части окна доступны дополнительные команды области рисования, как показано ниже:
На этой панели инструментов доступны следующие команды:
Масштаб
Команда "Масштаб" позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.
Показать/скрыть сетку привязки
Показывает или скрывает сетку привязки, которая отображает линии сетки. Линии сетки используются при включении привязки к линиям сетки или привязки к линиям привязки.
Включить/выключить привязку к линиям сетки
Если Привязка к сетке включена, элемент будет выровняться с ближайшими горизонтальными и вертикальными линиями сетки при перетаскивании на монтажную панель.
Переключить фон области рисования
Выполняет переключение между светлым и темным фоном.
Включить/выключить привязку к линиям привязки
Линии привязки помогают выравнивать элементы управления относительно друг друга. Если привязка к линиям привязки включена, при перетаскивании элемента управления относительно других элементов появляются границы выравнивания, когда края и текст некоторых элементов управления выровнены по горизонтали или вертикали. Граница выравнивания отображается в виде красной пунктирной линии.
Отключить код проекта
Отключает код проекта, например пользовательские элементы управления и преобразователи величин, и выполняет перезагрузку конструктора.
Представление XAML
В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:
Окно Структура документа
Окно "Структура документа" в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:
Просматривать иерархическую структуру всех объектов в области рисования.
Выберите элементы, чтобы их можно было изменить. Например, можно переместить их в иерархии или задать их свойства в окно свойств. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.
Создавать и изменять шаблоны для элементов управления.
Создавать анимации (только Blend для Visual Studio).
чтобы открыть окно "структура документа" в Visual Studio, в строке меню выберите вид > другие Windows > структура документа. чтобы просмотреть окно Объекты и временная шкала в Blend для Visual Studio, в строке меню выберите просмотр > структуры документа.
В основном представлении окна "Структура документа" или "Объекты и временная шкала" отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. В окне "Структура документа/Объекты и временная шкала" доступны следующие параметры:
Показать/скрыть
Отображает или скрывает элементы области рисования. При отображении выглядит как символ глаза. Можно также нажать CTRL + h , чтобы скрыть элемент, и SHIFT + CTRL + h , чтобы отобразить его.
Заблокировать или разблокировать
Блокирует или разблокирует элементы области рисования. Заблокированные элементы невозможно изменить. При отображении выглядит как символ замка в режиме блокировки. Можно также нажать сочетание клавиш CTRL + l , чтобы заблокировать элемент и SHIFT + + + l , чтобы разблокировать его.
Вернуть для области значение pageRoot
Параметр в верхней части окна "Структура документа" или "Объекты и временная шкала" со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.
Окно "Свойства"
Окно Свойства позволяет задавать значения свойств для элементов управления. Вот как оно выглядит:
В верхней части окна " Свойства " есть различные параметры:
- Измените имя выбранного элемента в поле Имя.
- В левом верхнем углу есть значок, представляющий текущий выбранный элемент.
- Чтобы упорядочить свойства по категориям или в алфавитном порядке, нажмите кнопку Категория, Имя или Источник в списке Упорядочить по .
- Чтобы просмотреть список событий для элемента управления, нажмите кнопку События, на которой отображается символ молнии.
- Чтобы найти свойство, начните вводить его имя в поле поиска. В окне Свойства по мере ввода отображаются свойства, соответствующие условиям поиска.
Некоторые свойства позволяют задать дополнительные свойства, для этого нужно нажать кнопку со стрелкой вниз.
Справа от значения каждого свойства отображается метка свойства в виде квадрата. Внешний вид метки свойства указывает, применены ли к свойству привязка данных или ресурс. Например, белый квадрат указывает значение по умолчанию, черный квадрат обычно указывает, что был применен локальный ресурс, а оранжевый квадрат обычно указывает, что была применена привязка данных. Щелкнув метку свойства, можно перейти к определению стиля, открыть построитель привязки данных или открыть средство выбора ресурсов.
Дополнительные сведения об использовании свойств и обработке событий см. в статье Введение в работу с элементами управления и шаблонами.
Редактор кода 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 (Окно). Однако если просмотреть подсказку для этих элементов пользовательского интерфейса, в ней они будут дополнительно определены как "Element: Window" и "Member: Window".
Раскрывающиеся списки Window имеют разные функции, показанные ниже.
С помощью левого раскрывающегося списка Element: Window можно просматривать элементы одного уровня или родительские элементы и перемещаться в них.
В частности, он показывает схематичное представление структуры тегов вашего кода. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранный элемент.
С помощью правого раскрывающегося списка Member: Window можно просматривать атрибуты или дочерние элементы и перемещаться в них.
В частности, он показывает список свойств в вашем коде. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранное свойство.
Средняя панель редактора кода
В средней панели редактора кода XAML отображается код. Здесь находится большинство функций, которые существуют в редакторе кода IDE. Мы коснемся некоторых универсальных функций IDE, которые могут быть полезными при разработке кода XAML. Мы также особо обратим ваше внимание на уникальные функции XAML в IDE.
Быстрые действия
Быстрые действия позволяют создавать и изменять код, а также выполнять его рефакторинг одним действием.
Вот как это сделать.
Наведите указатель мыши на директиву using, щелкните значок лампочки, а затем выберите в раскрывающемся списке действие Remove Unnecessary Usings (Удалить ненужные директивы using).
Проверьте, все ли правильно, в диалоговом окне предварительного просмотра, а затем нажмите Применить.
Эту функцию также можно вызвать из строки меню. Для этого последовательно выберите Правка > IntelliSense > Удаление и сортировка директив using.
Дополнительные сведения о параметрах директив using см. на странице Сортировка директив using. Дополнительные сведения об IntelliSense см. на странице IntelliSense в Visual Studio. Дополнительные сведения о некоторых распространенных способах использования быстрых действий разработчиками см. на странице Распространенные быстрые действия.
Change tracking
С помощью цвета левого поля окна можно отслеживать изменения, внесенные в файл. Цвета связаны с выполняемыми вами действиями следующим образом.
Если после открытия файла в него были внесены изменения, которые еще не сохранены, в левом поле окна (поле выделения) отображается желтая полоска.
После того как вы сохраните изменения (не закрывая файл), полоска станет зеленой.
Включить или отключить эту функцию можно с помощью параметра Отслеживать изменения в настройках текстового редактора (Сервис > Параметры > Текстовый редактор).
Дополнительные сведения об отслеживании изменений—с помощью волнистых линий (также называемых "тильдами") под строками кода—см. в разделе Функции редактора на странице Функции редактора кода Visual Studio.
Контекстное меню
При изменении кода в редакторе кода XAML некоторые функции можно вызывать из контекстного меню, которое открывается при щелчке правой кнопкой мыши. Большинство этих функций повсеместно доступно повсюду в интегрированной среде разработки Visual Studio, но некоторые можно вызывать только при использовании редактора кода вместе с окном конструктора.
Перечислим эти функции и покажем, для чего они используются.
Средняя панель, полоса прокрутки
Эта полоса прокрутки может не только прокручивать ваш код. С ее помощью можно также открывать другую панель редактора кода. Кроме того, можно использовать полосу прокрутки для более эффективного кодирования, добавляя в нее заметки или используя различные режимы отображения.
Разделение окна кода
В полосе прокрутки редактора кода в правом верхнем углу имеется кнопка разделения. Нажав ее, можно открыть другую панель редактора кода. Это очень удобно, так как эти панели работают независимо друг от друга, и их можно использовать для работы в разных местах кода.
Дополнительные сведения о том, как разделить окно редактора, см. на странице Управление окнами редактора.
Использование заметок или режима схемы
Вы можете изменять вид полосы прокрутки и содержащиеся в ней дополнительные функции. Например, многим пользователям нравится включать в полосу прокрутки заметки, которые обеспечивают визуальные подсказки, указывающие изменения кода, точки останова, закладки, ошибки и позицию курсора.
Некоторые предпочитают использовать режим схемы, в котором на полосе прокрутки показывается миниатюрное изображение строк кода. Разработчики, работающие с большим объемом кода в файле, часто находят, что в режиме схемы строки кода можно отслеживать более эффективно, чем при использовании полосы прокрутки по умолчанию.
Дополнительные сведения о том, как можно изменить параметры полосы прокрутки по умолчанию, см. на странице Настройка полосы прокрутки.
Функции, относящиеся к XAML
Большинство этих функций повсеместно доступно в интегрированной среде разработки Visual Studio, однако к некоторым из них добавлены аспекты, которые упрощают написание кода для разработчиков XAML.
Фрагменты кода XAML
Вы можете использовать директиву region, чтобы группировать разделы кода, которые хотите сворачивать или разворачивать.
Комментарии в XAML
Разработчики часто предпочитают документировать свой код с помощью комментариев. Вы можете добавлять комментарии в код XAML, который находится на вкладке MainWindow.xaml, следующими способами.
Выберите код, который необходимо закомментировать, и нажмите кнопку Закомментировать на панели инструментов в IDE. Чтобы отменить это действие, нажмите кнопку Раскомментировать.
Выберите код, который хотите закомментировать, а затем нажмите сочетания клавиш Ctrl+K, Ctrl+C. Чтобы раскомментировать выбранный код, нажмите сочетания клавиш Ctrl+K, Ctrl+U.
Лампочки в XAML
Значки лампочки, которые появляются в вашем коде XAML, являются частью быстрых действий, которые можно использовать для рефакторинга, создания или изменения кода.
Приведем несколько примеров того, как они помогают при кодировании в XAML.
Удаление ненужных пространств имен. В редакторе кода XAML ненужные пространства имен отображаются затененными. Если навести указатель мыши на ненужную директиву using, появится лампочка. Когда вы выбираете в раскрывающемся списке действие Удалить ненужные пространства имен, появляется окно предварительного просмотра, показывающее то, что вы можете удалить.
Переименование пространства имен. Функция переименования пространства имен, которую можно вызвать из контекстного меню после выделения пространства имен, позволяет одновременно изменить несколько экземпляров параметра. Эту функцию также можно вызвать из строки меню, последовательно выбрав пункты Edit (Правка) > Refactor > (Рефакторинг)Rename (Переименовать), или нажать сочетание клавиш Ctrl+R, а затем снова Ctrl+R.
Условный код XAML для UWP
Условный код XAML обеспечивает возможность использовать метод ApiInformation.IsApiContractPresent в разметке XAML. Благодаря этому можно задавать свойства и создавать экземпляры объектов в разметке в зависимости от наличия API, а необходимость использования кода программной части отсутствует.
Визуализатор структуры 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.
Редактор кода 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 (Окно). Однако если просмотреть подсказку для этих элементов пользовательского интерфейса, в ней они будут дополнительно определены как "Element: Window" и "Member: Window".
Раскрывающиеся списки Window имеют разные функции, показанные ниже.
С помощью левого раскрывающегося списка Element: Window можно просматривать элементы одного уровня или родительские элементы и перемещаться в них.
В частности, он показывает схематичное представление структуры тегов вашего кода. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранный элемент.
С помощью правого раскрывающегося списка Member: Window можно просматривать атрибуты или дочерние элементы и перемещаться в них.
В частности, он показывает список свойств в вашем коде. При выборе элемента из списка фокус в редакторе кода перейдет в строку кода, в которой находится выбранное свойство.
Средняя панель редактора кода
В средней панели редактора кода XAML отображается код. Здесь находится большинство функций, которые существуют в редакторе кода IDE. Мы коснемся некоторых универсальных функций IDE, которые могут быть полезными при разработке кода XAML. Мы также особо обратим ваше внимание на уникальные функции XAML в IDE.
Быстрые действия
Быстрые действия позволяют создавать и изменять код, а также выполнять его рефакторинг одним действием.
Вот как это сделать.
Наведите указатель мыши на директиву using, щелкните значок лампочки, а затем выберите в раскрывающемся списке действие Remove Unnecessary Usings (Удалить ненужные директивы using).
Проверьте, все ли правильно, в диалоговом окне предварительного просмотра, а затем нажмите Применить.
Эту функцию также можно вызвать из строки меню. Для этого последовательно выберите Правка > IntelliSense > Удаление и сортировка директив using.
Дополнительные сведения о параметрах директив using см. на странице Сортировка директив using. Дополнительные сведения об IntelliSense см. на странице IntelliSense в Visual Studio. Дополнительные сведения о некоторых распространенных способах использования быстрых действий разработчиками см. на странице Распространенные быстрые действия.
Change tracking
С помощью цвета левого поля окна можно отслеживать изменения, внесенные в файл. Цвета связаны с выполняемыми вами действиями следующим образом.
Если после открытия файла в него были внесены изменения, которые еще не сохранены, в левом поле окна (поле выделения) отображается желтая полоска.
После того как вы сохраните изменения (не закрывая файл), полоска станет зеленой.
Включить или отключить эту функцию можно с помощью параметра Отслеживать изменения в настройках текстового редактора (Сервис > Параметры > Текстовый редактор).
Дополнительные сведения об отслеживании изменений—с помощью волнистых линий (также называемых "тильдами") под строками кода—см. в разделе Функции редактора на странице Функции редактора кода Visual Studio.
Контекстное меню
При изменении кода в редакторе кода XAML некоторые функции можно вызывать из контекстного меню, которое открывается при щелчке правой кнопкой мыши. Большинство этих функций повсеместно доступно повсюду в интегрированной среде разработки Visual Studio, но некоторые можно вызывать только при использовании редактора кода вместе с окном конструктора.
Перечислим эти функции и покажем, для чего они используются.
Средняя панель, полоса прокрутки
Эта полоса прокрутки может не только прокручивать ваш код. С ее помощью можно также открывать другую панель редактора кода. Кроме того, можно использовать полосу прокрутки для более эффективного кодирования, добавляя в нее заметки или используя различные режимы отображения.
Разделение окна кода
В полосе прокрутки редактора кода в правом верхнем углу имеется кнопка разделения. Нажав ее, можно открыть другую панель редактора кода. Это очень удобно, так как эти панели работают независимо друг от друга, и их можно использовать для работы в разных местах кода.
Дополнительные сведения о том, как разделить окно редактора, см. на странице Управление окнами редактора.
Использование заметок или режима схемы
Вы можете изменять вид полосы прокрутки и содержащиеся в ней дополнительные функции. Например, многим пользователям нравится включать в полосу прокрутки заметки, которые обеспечивают визуальные подсказки, указывающие изменения кода, точки останова, закладки, ошибки и позицию курсора.
Некоторые предпочитают использовать режим схемы, в котором на полосе прокрутки показывается миниатюрное изображение строк кода. Разработчики, работающие с большим объемом кода в файле, часто находят, что в режиме схемы строки кода можно отслеживать более эффективно, чем при использовании полосы прокрутки по умолчанию.
Дополнительные сведения о том, как можно изменить параметры полосы прокрутки по умолчанию, см. на странице Настройка полосы прокрутки.
Функции, относящиеся к XAML
Большинство этих функций повсеместно доступно в интегрированной среде разработки Visual Studio, однако к некоторым из них добавлены аспекты, которые упрощают написание кода для разработчиков XAML.
Фрагменты кода XAML
Вы можете использовать директиву region, чтобы группировать разделы кода, которые хотите сворачивать или разворачивать.
Комментарии в XAML
Разработчики часто предпочитают документировать свой код с помощью комментариев. Вы можете добавлять комментарии в код XAML, который находится на вкладке MainWindow.xaml, следующими способами.
Выберите код, который необходимо закомментировать, и нажмите кнопку Закомментировать на панели инструментов в IDE. Чтобы отменить это действие, нажмите кнопку Раскомментировать.
Выберите код, который хотите закомментировать, а затем нажмите сочетания клавиш Ctrl+K, Ctrl+C. Чтобы раскомментировать выбранный код, нажмите сочетания клавиш Ctrl+K, Ctrl+U.
Лампочки в XAML
Значки лампочки, которые появляются в вашем коде XAML, являются частью быстрых действий, которые можно использовать для рефакторинга, создания или изменения кода.
Приведем несколько примеров того, как они помогают при кодировании в XAML.
Удаление ненужных пространств имен. В редакторе кода XAML ненужные пространства имен отображаются затененными. Если навести указатель мыши на ненужную директиву using, появится лампочка. Когда вы выбираете в раскрывающемся списке действие Удалить ненужные пространства имен, появляется окно предварительного просмотра, показывающее то, что вы можете удалить.
Переименование пространства имен. Функция переименования пространства имен, которую можно вызвать из контекстного меню после выделения пространства имен, позволяет одновременно изменить несколько экземпляров параметра. Эту функцию также можно вызвать из строки меню, последовательно выбрав пункты Edit (Правка) > Refactor > (Рефакторинг)Rename (Переименовать), или нажать сочетание клавиш Ctrl+R, а затем снова Ctrl+R.
Условный код XAML для UWP
Условный код XAML обеспечивает возможность использовать метод ApiInformation.IsApiContractPresent в разметке XAML. Благодаря этому можно задавать свойства и создавать экземпляры объектов в разметке в зависимости от наличия API, а необходимость использования кода программной части отсутствует.
Визуализатор структуры 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.
Элементы к приложению XAML (элементы управления, макеты и фигуры) можно добавлять, работая непосредственно с кодом, или с помощью конструктора XAML. В этом разделе описывается работа с элементами в конструкторе XAML в Visual Studio или Blend для Visual Studio.
Добавление элемента в макет
Макет — это процесс изменения размеров и положения элементов в пользовательском интерфейсе. Для размещения визуальных элементов необходимо поместить их в структуру Панель. Panel имеет дочернее свойство, которое является коллекцией типов FrameworkElement. Вы можете использовать разные дочерние элементы Panel , такие как Canvas, StackPanel и Grid, в качестве контейнеров макет, а также для размещения и упорядочения элементов на странице.
По умолчанию панель Grid используется в качестве контейнера макета верхнего уровня на странице или форме. Можно добавлять панели макета, элементы управления и другие элементы на верхнем уровне макета страницы.
Чтобы добавить элемент в макет в конструкторе XAML, выполните одно из следующих действий:
Дважды щелкните элемент на панели элементов (или выберите элемент на панели элементов и нажмите клавишу ВВОД).
Перетащите элемент с панели элементов в область рисования.
На панели элементов выберите один из инструментов рисования (например, Эллипс или Прямоугольник) и создайте объект на активной панели.
Изменение порядка слоев элементов
Если на монтажной панели конструктора XAML имеется два элемента, один из них будет находиться перед другим в структуре слоев. В нижней части списка элементов в окне "Структура документа" находится первый передний элемент (если не задано свойство ZIndex элемента). При вставке элемента на страницу, форму или в контейнер макета элемент автоматически помещается перед другими элементами в активном элементе контейнера. Чтобы изменить порядок элементов, можно использовать команды Порядок или перетаскивать элементы в дереве объектов в окне "Структура документа".
Чтобы изменить порядок слоев, выполните одно из следующих действий:
В окне Структура документа перетащите элементы вверх или вниз, чтобы создать требуемый порядок слоев.
Щелкните правой кнопкой мыши в окне "Структура документа" или в области рисования элемент, для которого требуется изменить порядок слоев, наведите указатель на элемент Порядок и выберите один из следующих параметров:
На передний план — чтобы показывать элемент перед всеми другими элементами.
Переместить вперед — чтобы переместить элемент на один уровень вперед.
Переместить назад — чтобы переместить элемент на один уровень назад.
На задний план — чтобы показывать элемент за всеми другими элементами.
Измените свойство ZIndex в разделе Макет окна "Свойства". Для перекрывающихся элементов свойство ZIndex имеет приоритет над порядком элементов, показанных в окне "Структура документа". Элемент с высшим значением свойства ZIndex отображается на переднем плане при перекрытии элементов.
Изменение выравнивания элемента
Вы можете выравнивать элементы в области рисования, используя команды меню или перетаскивая элементы к линиям привязки.
Линия привязки является визуальным средством, помогающим выравнивать элементы относительно других элементов в приложении.
Выравнивание нескольких элементов с помощью команд меню:
Выберите элементы, которые требуется выровнять. Можно выбрать несколько элементов, нажав и удерживая клавишу CTRL при выборе элементов.
Выберите одно из следующих свойств в поле HorizontalAlignment в разделе Макет окна "Свойства": По левому краю, По центру, По правому краю или Растянуть.
Выберите одно из следующих свойств в поле VerticalAlignment в разделе Макет окна "Свойства": По верхнему краю, По центру, По нижнему краю или Растянуть.
Чтобы выровнять два и более элементов с помощью линий привязки, в конструкторе XAML в макете, который содержит по крайней мере два элемента, перетащите один из элементов или измените его размер, чтобы его край был выровнен с другим элементом.
Когда края будут выровнены, появится граница выравнивания. Граница выравнивания отображается в виде красной штриховой линии. Границы выравнивания появляются, только если привязка к линиям привязки включена. Изображение области рисования с границей выравнивания см. в разделе Создание пользовательского интерфейса с помощью конструктора XAML.
Изменение полей элемента
Поля в конструкторе XAML определяют количество пустого пространства вокруг элемента на монтажной панели. Например, поля определяют расстояние между внешними краями элемента и границей панели Grid , содержащей элемент. Поля также определяют расстояние между элементами, содержащимися в StackPanel .
Изменение полей элемента в окне свойства:
Выберите элемент, поля которого требуется изменить.
В разделе Макет окна "Свойства" измените значение (в пикселях или в аппаратно-независимых единицах, равных приблизительно 1/96 дюйма) для любого из свойств полей (Верхнее, Левое, Правое или Нижнее).
В области рисования, чтобы изменить поля элемента относительно его контейнера макета, щелкните графические элементы полей, отображаемые вокруг элемента, когда элемент выбран и находится в пределах контейнера макета. Изображение графических элементов полей см. в разделе Создание пользовательского интерфейса с помощью конструктора XAML.
Если графический элемент поля открыт по вертикали или по горизонтали, значение поля не задано. Если графический элемент поля закрыт, значение поля задано.
Если при открытии графического элемента поля противоположное поле не задано, ему будет присвоено корректное значение в соответствии с расположением элемента в области рисования. Для противоположных полей, например полей Слева и Справа, всегда будет задано хотя бы одно значение.
У элементов, помещенных в некоторые контейнеры макета, например Canvas, нет графических элементов полей. У элементов, помещенных в StackPanel, есть графические элементы левого и правого или верхнего и нижнего полей, в зависимости от ориентации StackPanel .
Группирование и разгруппировка элементов
Группировка нескольких элементов в конструкторе XAML создает новый контейнер макета и помещает эти элементы внутрь него. Размещение нескольких элементов в контейнере макета позволяет легко выбирать, перемещать и преобразовывать группу, как если бы элементы в этой группе были одним элементом. Группировка также полезна для определения элементов, которые чем-то связаны друг с другом, таких как различные кнопки, составляющих элемент навигации. при разгруппировке элементов просто удаляется контейнер макета, содержащий эти элементы.
Группировка элементов в новом контейнере макета:
Выберите элементы, которые требуется группировать. (Чтобы выбрать несколько элементов, нажмите и удерживайте клавишу CTRL , щелкая их.)
Щелкните выделенные элементы правой кнопкой, наведите указатель на команду Сгруппировать в, а затем выберите тип контейнера макета, в котором будет размещена группа.
Если для группирования объектов выбран вариант Viewbox, Border или ScrollViewer, объекты размещаются на новой панели макета Grid в пределах элемента Viewbox, Border или ScrollViewer. Если необходимо разгруппировать элементы в одном из этих контейнеров макета, удаляются только контейнеры Viewbox, Border или ScrollViewer, а панель Grid остается. Для удаления панели Grid нужно разгруппировать элементы еще раз.
Чтобы разгруппировать элементы и удалить макет, щелкните правой кнопкой мыши группу, которую необходимо разгруппировать, и выберите пункт Разгруппировать. Также можно группировать и разгруппировывать элементы, щелкнув правой кнопкой мыши выбранные элементы в окне "Структура документа" и выбрав пункт Сгруппировать в или Разгруппировать.
Переустановка макета элемента
Вы можете восстановить значения по умолчанию для отдельных свойств макета элемента с помощью команд переустановки макета. С помощью этой команды можно сбросить значения полей, выравнивания, ширины, высоты и размера элемента, как все одновременно, так и по-отдельности.
Чтобы сбросить макет элемента, щелкните правой кнопкой мыши элемент в окне "Структура документа" или на монтажной панели, а затем выберите Макет > сбросить значение PropertyName, где PropertyName — это свойство, которое требуется сбросить (или выберите параметр Макет > все все , чтобы сбросить все свойства макета элемента).
В MS Visual Studio Express 2013 для рабочего стола Windows:
Из учебника (см. Рисунки 7 и 8) видно, что должно быть несколько окон, отображающих графический интерфейс. Однако, когда я пытаюсь открыть файл .xaml в обозревателе решений, просмотр кода (Ctrl + Alt + 0) и конструктор представлений (Shift + F7) представляют одно и то же: только код. Как мне открыть окно графического интерфейса?
Нет опции XAML UI Designer:
Нет настройки полного просмотра XAML: Спасибо!
Это та версия Visual Studio, которую я скачал. Описание наводит меня на мысль, что XAML UI Designer должен быть установлен и это не должно быть проблемой.
Express 2013 для рабочего стола Windows
Возможно, вы неправильно отформатировали XAML, поэтому редактор не может определить его файл визуального конструктора. Опубликуйте содержимое XAML, чтобы мы могли определить причину.
Внизу окна, показывающего XAML, должны быть 2 вкладки с названиями XAML и Дизайн. Перейдите на вкладку «Дизайн» и посмотрите, решит ли это проблему.
в вашем представлении отсутствуют кнопки, в нижнем левом углу должны быть вкладки, а в правом нижнем углу - 3 маленькие кнопки
Инструменты> Параметр> Конструктор XAML и включить конструктор XAML сработали для меня.
PS: По умолчанию он включен. Я отключил его из-за проблемы с производительностью VS, забыл об этом изменении и столкнулся с той же проблемой, когда начал работать над проектом WPF.
Решарпер (голосом Билла Ламберга из Office Space): «Привет, разработчик. (Вздыхает) Что-то не так? Мммм, мне нужно, чтобы вы использовали Visual Studio без вашего XAML Desiiiigner. Итак, если бы вы могли… Низко нам - молча автоматически включите эту опцию в Visual Stuuuudio и оставьте ее выключенной, это было бы здорово. Мммкей? "
Конструктор XML можно отключить с помощью Resharper в Resharper> Параметры> Руководство по производительности.
Я решил проблему, отключив блок Resharper и восстановив конструктор XML в Инструменты> Параметры.
Решарпер (голосом Билла Ламберга из Office Space): «Привет, разработчик. (Вздыхает) Что-то не так? Мммм, мне нужно , чтобы вы использовали Visual Studio без вашего XAML Desiiiigner. Итак, если бы вы могли… Низко нас - автоматически включите эту опцию в Visual Stuuuudio и оставьте ее выключенной, это было бы здорово. Мммкей? "
Я считаю, что вы ищете конструктор XAML, и его можно загрузить отсюда:
Я использую Microsoft VS Community 2015 (последнее обновление)
Я не уверен, стоит ли публиковать ответ здесь, потому что он может не относиться к VS Express 2013.
У меня точно такая же проблема с Visual Studio 2015 Community Edition. Оказывается, у меня целевая версия проекта выше.
- Щелкните правой кнопкой мыши свой проект в обозревателе решений.
- Измените целевую версию на Windows 10 (10.0; сборка 10240) .
Сообщите мне, если это не актуально, и я удалю свой ответ.
В VS2017 v15.8.9 я обнаружил, что конструктор не отображался, например, при щелчке правой кнопкой мыши на панели кода представления xaml и выборе конструктора представлений.
Для меня это решило выполнение следующих действий: я перешел в Инструменты> Параметры> Конструктор XAML, и была отмечена опция «Включить конструктор XAML». Итак, я снял с него галочку и нажал «ОК» в диалоговом окне «Параметры», чтобы закрыть его.
Я вышел из Visual Studio, перезапустил ее и снова зашел в Инструменты> Параметры> Конструктор XAML, поставил галочку напротив «Включить конструктор XAML», щелкнул «ОК», перезапустил Visual Studio, и теперь он работает.
Проблема : конструктор пользовательского интерфейса XAML не отображается
Решения : (отличается от моего предыдущего решения и намного элегантнее)
- Щелкните файл решения ( .sln ) в обозревателе решений , если .sln файл указан вобозревателе решений.
- Щелкните значок « Развернуть панель», чтобы отобразить панель «Дизайн», если она отображается.
Решение 1. Откройте файл .sln :
Мой проект клонирован из репозитория git. Когда я открываю его со стартовой страницы, он открывается со всем списком файлов в обозревателе решений . Если я открываю любой из .xaml файлов из этого обозревателя решений, они открываются с помощью редактора XML, который не отображает графическое представление XAML.
В самом низу обозревателя решений находится .sln файл (решение). При открытии этого файла загружается список файлов, к которому я привык. Если какие-либо .xaml файлы открыты, у них не будет доступа к представлению «Дизайн». Открытие и закрытие их на этом этапе приведет к загрузке представления «Дизайн». Если представление «Дизайн» по-прежнему не отображается, см. Решение 2 непосредственно ниже.
Решение 2. Нажмите «Развернуть панель» :
Внизу окна редактора XAML вы можете увидеть небольшой значок с двойной стрелкой (развернуть панель ). Если вы это сделаете, это означает, что вы скрыли панель дизайна . Щелкните по нему, и вы должны вернуть панель дизайна.
Версия : Visual Studio 2017
Детали проблемы:
Я перетащил проект, над которым работал, из репозитория git на проблемный компьютер (используя все встроенное программное обеспечение и учетные записи Microsoft). Он был успешно клонирован на проблемный компьютер, и Visual Studio заработала. После извлечения из репозитория XAML UI Designer (Blend?) Исчез, оставив мне только источник XAML.
Более раннее решение, с которым я столкнулся, заключалось в том, чтобы удалить source каталог с моего локального компьютера и получить новый клон проекта. Это устранило мою проблему, однако теперь я поигрался с ней и нашел две другие причины, по которым мое представление дизайна XAML отсутствовало. Я полагаю, что мне не нужно было удалять папку и этих двух решений было бы достаточно.
Читайте также: