Как редактировать xaml в visual studio

Обновлено: 06.07.2024

Конструктор 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

При добавлении тега 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.

Visual Studio и Blend для Visual Studio предоставляют визуальные инструменты для создания привлекательных пользовательских интерфейсов и мультимедийных процедур на основе XAML для разных типов приложений. Обе интегрированные среды разработки (IDE) совместно используют общий набор функций, включая визуальный редактор XAML (конструктор). Blend для Visual Studio, поддерживающий платформы WPF и UWP, предоставляет дополнительные средства для разработки визуальных состояний и создания анимаций.

Вы можете переключаться между Visual Studio и Blend для Visual Studio и даже открыть один и тот же проект одновременно в обеих IDE. Изменения, сохраненные в файлах XAML в одной интегрированной среде разработки, в результате автоматической перезагрузки могут применяться при переходе к другой среде. Вы можете управлять поведением перезагрузки, перейдя в меню Сервис > Параметры > > документы среды в любой интегрированной среде разработки.

Установка

Чтобы создать приложения UWP, установите в Visual Studio рабочую нагрузку Разработка приложений для универсальной платформы Windows. Средство Blend для Visual Studio также будет установлено.

Возможности общего доступа

Для основных задач разработки Visual Studio и Blend для Visual Studio используют один и тот же набор окон и возможностей с незначительными отличиями. Некоторые особенности:

Технология IntelliSense: Обе IDE поддерживают возможности IntelliSense, такие как завершение операторов.

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

Перезагрузка файла: файлы XAML можно редактировать либо в Visual Studio, либо в Blend для Visual Studio. Измененные файлы, которые были сохранены повторно, автоматически перезагружаются при переключении между IDE. Вы можете управлять поведением перезагрузки, перейдя в меню Сервис > Параметры > > документы среды в любой интегрированной среде разработки.

Синхронизированные макеты и параметры: параметры макетов и параметров макета окна инструментов настройки для Visual Studio или Blend для Visual Studio синхронизируются между устройствами и версиями при входе с использованием той же учетной записи персонализации. См. статью Синхронизация параметров Visual Studio на нескольких компьютерах.

Расширенные возможности Blend для Visual Studio

Чтобы увеличить производительность, используйте Blend для Visual Studio для выполнения следующих задач. Ниже описаны области, при работе с которыми Blend для Visual Studio обеспечивает дополнительные возможности по сравнению с кодом или конструктором Visual Studio.

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

Возможности создания данных в Blend для Visual Studio весьма обширны (можно легко добавлять имена, числа, URL-адреса и фотографии) и позволяют сэкономить много времени.

Дополнительные сведения о расширенных задачах разработки XAML см. в статье Создание пользовательского интерфейса с помощью Blend для Visual Studio.

Автор:

Все диалоговые окна Data Standard основаны на файле с расширением XAML (расширяемый язык разметки приложений). Диалоговое окно Data Standard можно настроить, изменив файл XAML.

Обзор

В файлах XAML описывается компоновка диалогового окна Data Standard, включая используемые элементы управления (метка, текстовое поле, поле со списком и т. д.) и свойства САПР или Vault, к которым они привязаны.

Файлы XAML представляют собой файлы XML, и их можно отредактировать с помощью любого текстового редактора или редактора XML. Прекрасным бесплатным редактором XML является Блокнот XML Microsoft или любой другой редактор, предусматривающий форматирование XML. Для максимального удобства Autodesk рекомендует использовать Visual Studio (Express или более поздние версии). Поскольку в синтаксисе XAML учитывается регистр, рекомендуется использовать редактор с поддержкой заглавных букв и отслеживанием опечаток.

Если в диалоговом окне Data Standard необходимо показать больше или меньше сведений или отобразить другую информацию, отредактируйте файл XAML. Файлы PS1, расположенные в папке конфигурации, позволяют управлять поведением диалогового окна.

Данный раздел содержит краткое описание часто используемых элементов управления. Дополнительные сведения об этих и других элементах управления можно найти в справочной системе Microsoft.

Структура файла XAML

Каждый файл XAML включает в себя различные разделы: разделы ресурсов, стилей и элементов управления используются наиболее часто.

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

Триггеры расположены в разделе стилей. Триггеры определяют внешний вид или поведение элемента управления в зависимости от конкретной ситуации (например, при создании новой или редактировании существующей записи). Более сложные типы поведения определяются в файлах PS1.

Раздел элементов управления, или область листа, обычно начинается с элемента <Grid> . Сетка делит диалоговое окно на строки и столбцы, как в таблице Excel. Объединение и разделение ячеек выполняется в соответствии с требованиями проекта. В каждой ячейке можно разместить один или несколько элементов управления, например метки для простого текста или текстовые поля для ввода текста.

Компоновка

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

Поскольку диалоговое окно подобно таблице, при его проектировании следует подумать о необходимом количестве столбцов и строк. Как правило, достаточно двух столбцов: один слева (с фиксированной шириной для меток) и один справа (с динамической шириной для элементов управления). Точно таким образом устроены стандартные диалоговые окна. В зависимости от необходимого количества строк в сетке задаются соответствующие определения строк. Чтобы элементы управления отображались соответствующим образом, каждый из них имеет ссылку на строку и столбец (всегда начиная с 0) внутри сетки.

Синтаксис

В файлах XML и XAML каждое ключевое слово заключается в треугольные скобки (<ключевое слово>). Как правило, блок определения начинается с ключевого слова (например, <Grid>) и заканчивается тем же самым ключевым словом, перед которым ставится косая черта (например, </Grid>). Если выражение помещается в одной строке, можно также встретить следующий синтаксис: <Label . />. Дополнительные атрибуты ключевого слова или дополнительные ключевые слова, вложенные в выражение, определяют структуру диалогового окна. В файлах XAML учитывается регистр, поэтому следует обращать внимание на заглавные и строчные буквы.

Часто используемые элементы управления

Сетка (Grid) представляет собой панель компоновки для управления всеми элементами с помощью табличной структуры из строк и столбцов. Каждая ячейка (определяется уникальной комбинацией строки и столбца) может содержать несколько элементов управления (таких как метки и текстовые поля).

Это базовая структура сетки. Для сетки требуется несколько строк, которые определяются в части Grid.RowDefinition. Значение высоты 30 задает фиксированное значение высоты, которое не может изменяться. Значение "auto" задает для строки динамическое значение высоты, так что высота строки может изменяться с учетом элементов управления. Такие же значения применяются к ширине столбца.

После определения строк и столбцов можно добавить элементы управления, например метки и текстовые поля. Элементы управления необходимо присоединить к двум свойствам: Grid.Column и Grid.Row. Эти свойства определяют расположение элемента управления в сетке. Значение первой строки — 0, второй — 1 и так далее.

Метки (Label) представляют собой нередактируемые пользователем имена полей. Они содержат текст, определяющий назначение метки и позволяющий пользователю определить, значение какого типа необходимо вставить в соответствующее текстовое поле или поле со списком. Например, рядом с пустым текстовым полем может быть метка с именем "Комментарии". Таким образом, пользователь поймет, что здесь необходимо оставить комментарий.

Метка имеет свойство Content. Это свойство представляет собой текст, отображаемый для метки.

В стандартных диалоговых окнах строки кода выглядят следующим образом: <Label Content="" . >, где свойство Content привязано к локализованному тексту. Этот синтаксис используется, когда в диалоговом окне отображается текст на разных языках. Если в проекте используется только один язык, задайте текст, который требуется отобразить. Если диалоговое окно необходимо локализовать, используйте синтаксис локализации. Дополнительные сведения см. в разделе Локализация.

Текстовые поля (TextBox) — это строки, которые можно редактировать. Data Standard может считывать введенные значения и использовать их для других операций.

Text — исходный текст, который должен отображаться в текстовом поле в качестве примера. Если написать content="Введите комментарий" , при открытии диалогового окна в текстовом поле будет отображаться надпись «Введите комментарий».
Name — задание имени элемента для его идентификации. Имя содержит ссылку, при этом в коде (например, коде обработчика событий) может приводиться такая ссылка.

Кнопка (Button) представляет собой элемент пользовательского интерфейса, который обеспечивает простой способ инициации события (например, «Найти» или «Сохранить»). Для кнопки требуется свойство Command. Это свойство определяет действие, которое выполняется при нажатии кнопки.

Свойство Command привязано к ключевому слову PsCmd , которое позволяет связать действие команды с заданной функцией PowerShell. Аргументы можно передавать функции при помощи атрибута CommandParameter="my args" . Аргумент будет доступен в функции в качестве переменной $dsParam .

Чтобы использовать один из этих компонентов для управления свойством файла Vault или его изменения, необходимо изучить компонент ""

Связывание позволяет сопоставлять значения определенным свойствам САПР или Vault. Например, можно связать текст в текстовом поле со свойством Title, чтобы каждый раз при вводе данных в это конкретное текстовое поле свойство Title автоматически обновлялось. Связывание позволяет автоматизировать изменение свойств, благодаря чему пользователю приходится выполнять меньше операций.

Prop[ ] является важной функцией для связывания. С ее помощью можно вызвать свойства файла (САПР и Vault) или соответствующий объект (папку, элемент, пользовательский объект и т. д.). Если необходимо сопоставить текстовое поле со свойством Engineer, напишите <TextBox text=""/> . После создания текстового поля функция Prop[ ] возвращает значение этого свойства. При каждом обновлении текстового поля функции Prop[ ] отправляется уведомление, и она выполняет запись нового значения в сопоставленное свойство файла.

Редактирование файлов XAML с помощью Visual Studio

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

Прим.: В соответствии с инструкциями в данном разделе требуется Visual Studio Express для Windows или более высокой версии. Если приложение Visual Studio не установлено, его можно загрузить с веб-сайта Microsoft.

После установки Visual Studio запустите приложение и щелкните поле «Создать проект».
Выберите приложение WPF и назначьте для проекта выбранное имя и расположение. Необходимо также задать путь по умолчанию, чтобы в случае, если потребуется неоднократно изменять диалоговое окно Data Standard, этот проект можно было использовать повторно.

После создания и открытия проекта отобразятся вкладки MainWindow.xaml, MainWindow.xam.cs и другие. Вкладки не нужны, нужна только среда для редактирования файла XAML. Для редактирования файлов XAML требуется ссылка на файл XAML. Добавлять файл XAML в проект не требуется.

Правой кнопкой мыши щелкните проект в обозревателе решений и переместите его в раздел «Добавить» > «Существующий элемент».
Найдите файл XAML в обозревателе решений и выберите "Добавить как связь".

Прим.: Если нужный файл XAML не отображается, измените тип файла над кнопкой "Добавить".

dataStandard.UI.DLL по следующему пути: C:\ProgramData\Autodesk\Inventor 2017\Addins\Data Standard . Выберите указанный файл и нажмите "ОК".
CreateObject.DLL по следующему пути: C:\ProgramData\Autodesk\Vault 2017\Extensions\Data Standard . Выберите указанный файл и нажмите "ОК".
Autodesk.Connectivity.Webservices.DLL по следующему пути: C:\Program Files\Autodesk\Vault 2017\ . Выберите указанный файл и нажмите "ОК".

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

Читайте также: