Проектирование XAML в Visual Studio и Blend для Visual Studio
Visual Studio и Blend для Visual Studio предоставляют визуальные инструменты для создания привлекательных пользовательских интерфейсов и мультимедийных процедур на основе XAML для разных типов приложений. Обе интегрированные среды разработки (IDE) совместно используют общий набор функций, включая визуальный редактор XAML (конструктор). Blend для Visual Studio, поддерживающий платформы WPF и UWP, предоставляет дополнительные средства для разработки визуальных состояний и создания анимаций.
Вы можете переключаться между Visual Studio и Blend для Visual Studio и даже открыть один и тот же проект одновременно в обеих IDE. Изменения, сохраненные в файлах XAML в одной интегрированной среде разработки, в результате автоматической перезагрузки могут применяться при переходе к другой среде. Вы можете управлять поведением перезагрузки, перейдя в раздел Инструменты>Параметры>Среда>Документы в любой из IDE.
Установка
- Чтобы создать приложения WPF, установите в Visual Studio рабочую нагрузку Разработка классических приложений .NET. Средство Blend для Visual Studio также будет установлено.
- Чтобы создать приложения UWP, установите в Visual Studio рабочую нагрузку Разработка приложений для универсальной платформы Windows. Средство Blend для Visual Studio также будет установлено.
- Чтобы создать приложения Xamarin.Forms, установите в Visual Studio рабочую нагрузку Разработка мобильных приложений на .NET. Средство Blend для Visual Studio не установлено. Blend не поддерживает приложения Xamarin.Forms.
Общие возможности
Для основных задач разработки Visual Studio и Blend для Visual Studio используют один и тот же набор окон и возможностей с незначительными отличиями. Некоторые особенности:
- IntelliSense: оба идентификатора поддерживают возможности IntelliSense, такие как завершение инструкции.
- Отладка. Вы можете выполнить отладку в Visual Studio и Blend для Visual Studio, включая настройку точек останова в коде для отладки работающего приложения и использования Горячая перезагрузка для изменения кода XAML во время выполнения приложения. Для согласованности сред в Blend реализована большая часть окон и панелей инструментов отладки из Visual Studio.
- Перезагрузить файл: вы можете изменить файлы XAML в Visual Studio или Blend для Visual Studio. Измененные файлы, которые были сохранены повторно, автоматически перезагружаются при переключении между IDE. Вы можете управлять поведением перезагрузки, перейдя в раздел Инструменты>Параметры>Среда>Документы в любой из IDE.
- Синхронизированные макеты и параметры. Макеты и настройки инструментов настройки для Visual Studio или Blend для Visual Studio синхронизируются между устройствами и версиями при входе с той же учетной записью персонализации. См. статью Синхронизация параметров Visual Studio на нескольких компьютерах.
Расширенные возможности Blend для Visual Studio
Чтобы увеличить производительность, используйте Blend для Visual Studio для выполнения следующих задач. Ниже описаны области, при работе с которыми Blend для Visual Studio обеспечивает дополнительные возможности по сравнению с кодом или конструктором Visual Studio.
| Задача | Visual Studio | Blend для Visual Studio | Дополнительные сведения |
|---|---|---|---|
| Проектирование визуальных состояний | Средство для разработки визуальных состояний отсутствует. Их необходимо создавать программно. | Используйте средства разработки для изменения внешнего вида элемента управления в зависимости от его состояния. | Визуальные состояния |
| Создание анимаций | Приложение не включает средство создания анимации; анимацию необходимо создавать с помощью программных средств. Для этого требуются знания анимации и системы управления временем в WPF, а также обширный опыт в написании кода. | Анимация создается визуально, и ее можно предварительно просмотреть в Blend для Visual Studio. Этот способ создания более быстрый и точный, чем создание анимации с помощью кода. В целях управления взаимодействием с пользователем можно добавить триггеры, а также можно переключиться на код, чтобы добавить обработчики событий и другие функциональные возможности. | Анимирование объектов |
| Преобразование форм и текста в контуры для простоты управления | Не поддерживается. | Вы можете значительно или незначительно изменять фигуры (например, прямоугольники и эллипсы) путем преобразования их в контуры, которые предоставляют лучшие возможности управления изменениями. Вы можете изменять форму контура или объединять несколько контуров, а также создавать составные пути из нескольких фигур. |
Используйте средства правки шаблонов для внесения изменений в элементы управления, стили и шаблоны с помощью всего нескольких щелчков мыши.
Возможности создания данных в Blend для Visual Studio весьма обширны (можно легко добавлять имена, числа, URL-адреса и фотографии) и позволяют сэкономить много времени.
Дополнительные сведения о расширенных задачах разработки XAML см. в статье Создание пользовательского интерфейса с помощью Blend для Visual Studio.
Связанный контент
- Обзор XAML
- Обзор Blend для Visual Studio
Изменение стиля объектов в Blend для Visual Studio
Самый простой способ настроить объект — задать свойства на панели Свойства.
Если требуется повторно использовать параметры или группы параметров, создайте ресурс многоразового использования. Это может быть стиль, шаблон или что-то простое, например пользовательский цвет. Вы также можете настроить определенное отображение элемента управления в зависимости от его состояния. Например, при нажатии пользователем кнопка становится зеленой.
Кисти: изменение внешнего вида объекта
Примените кисть к объекту, если вы хотите изменить его внешний вид.
Нанесение повторяющегося изображения или рисунка на объект
Нанесите повторяющееся изображение или шаблон на объект с помощью мозаичной кисти.
Чтобы создать мозаичную кисть, начните с создания ресурсов кисти изображения, кисти рисования или кисти визуального объекта.
Создайте кисть изображения с помощью образа. На следующих рисунках представлены кисть изображения, мозаичная кисть изображения и перевернутая кисть изображения.
Создайте кисть рисования с помощью векторного рисунка, например контура или фигуры. На следующих рисунках представлены кисть рисования, мозаичная кисть рисования и перевернутая кисть рисования.
Создайте кисть визуального объекта с помощью элемента управления, например кнопки. На следующих рисунках показаны кисть визуального объекта и мозаичная кисть визуального объекта
Стили и шаблоны. Создание согласованного внешнего вида и поведения элементов управления
Можно всего один раз разработать внешний вид и поведение элемента управления и затем применить эти параметры к другим элементам управления, чтобы вам не нужно было поддерживать их по отдельности.
В каком случае следует использовать стиль? Если вы хотите задать свойства по умолчанию (такие как цвет кнопки), используйте стиль. Элемент управления можно изменить даже в том случае, если вы уже применили к нему стиль.
В каком случае следует использовать шаблон? Если вы хотите изменить структуру элемента управления, используйте шаблон. Представьте себе преобразование графического рисунка или логотипа в кнопку. Элемент управления нельзя изменять после применения к нему шаблона.
Создание шаблона или стиля
Существует два способа создания шаблона. Можно преобразовать любой объект в области рисования в элемент управления или создать шаблон на основе существующего элемента управления.
Чтобы преобразовать любой объект в шаблон элемента управления, выберите объект, а затем в меню Средства выберите Преобразовать в элемент управления.
Если вы хотите настроить шаблон на основе существующего элемента управления, выберите объект в области рисования. Затем в верхней части области рисования нажмите кнопку навигации, выберите Изменить шаблон, а затем выберите Изменить копию или Создать пустой.
Чтобы создать стиль, выберите объект, а затем в меню Объект выберите пункт Изменить стиль и Изменить копию или Создать пустой.
- Выберите Изменить копию, чтобы начать со стиля или шаблона элемента управления по умолчанию.
- Выберите Создать пустой, чтобы начать «с нуля».
Вариант Изменить текущий появится только в том случае, если вы изменяете уже созданный стиль или шаблон. Он не будет отображаться для элемента управления, для которого по-прежнему используется системный шаблон по умолчанию.
В диалоговом окне Создание ресурса стиля можно присвоить имя стилю или шаблону, чтобы его можно было использовать в дальнейшем, или можно применить стиль или шаблон для всех элементов управления этого типа.
Невозможно создать стили и шаблоны для каждого типа элемента управления. Если элемент управления не поддерживает стили, то кнопка навигации не отображается в области рисования. Чтобы вернуться в область редактирования основного документа, щелкните Вернуться к области .
Применение стиля или шаблона к элементу управления
Щелкните правой кнопкой мыши объект в окне Объекты и временная шкала, выберите элемент Изменить шаблон, а затем нажмите кнопку Применить ресурс.
Восстановление стиля или шаблона элемента управления по умолчанию
Выберите элемент управления и в окне Свойств** найдите свойство Style или Template . Выберите Дополнительные параметры, а затем выберите в контекстном меню пункт Сброс.
Визуальные состояния
Визуальные состояния позволяют изменять внешний вид элемента управления в зависимости от его состояния. Элементы управления могут иметь различное визуальное представление в зависимости от действий пользователя. Например, можно сделать так, чтобы кнопка становилась зеленой при нажатии, или запустить анимацию. Уменьшить или увеличить интервал времени между визуальными состояниями можно с помощью переходов.
Просмотрите короткое видео: управление состоянием элементов управления WPF.
Ресурсы: создание цветов, стилей и шаблонов и их последующее повторное использование
Практически любой элемент проекта можно преобразовать в ресурс. Ресурс представляет собой объект, который можно многократно использовать в разных местах в приложении . Например, можно создать один раз цвет, преобразовать его в ресурс, а затем использовать этот ресурс для ряда объектов Чтобы изменить цвет всех этих объектов, достаточно изменить ресурс цвета.
Связанный контент
Что такое Microsoft Blend?
Microsoft Blend для Visual Studio , также известный как Microsoft Blend, является прикладной программой, которую разработчики используют для разработки пользовательских интерфейсов для программ практически любого типа.
Этот продукт был разработан и продан корпорацией Майкрософт, и, когда пакет Microsoft Expression Studio был еще доступен, он был его неотъемлемой частью.
В общем, Microsoft Blend для Visual Studio — это еще один способ для Microsoft побудить разработчиков создавать все больше и больше программ, расширяя имеющиеся у них ресурсы более универсальным образом.
Для чего используется Microsoft Blend?
Microsoft Blend для Visual Studio — это интерактивный интерфейс WYSIWYG для разработки интерфейсов на основе XAML для приложений Windows Presentation Foundation, Silverlight и UWP.
Он помогает вам разрабатывать Windows и веб-приложения на основе XAML. Он поставляется с тем же базовым опытом проектирования XAML, что и Visual Studio, при добавлении визуальных дизайнеров для сложных задач, таких как анимация и поведение.
С тех пор, как пакет Microsoft Expression Studio был прекращен, Microsoft Blend для Visual Studio стала частью пакета Visual Studio. По этой причине он выпускается почти ежегодно вместе с Visual Studio и постоянно обновляется.
Как я могу использовать Microsoft Blend?
Пользовательский интерфейс для Microsoft Blend довольно прост и включает стандартную конструкцию на основе панели инструментов, которую можно ожидать в типичных программах проектирования.
- Инструменты выбора
- Просмотр инструментов
- Инструменты кисти
- Инструменты объекта
- Инструменты актива
Чтобы создать новый пользовательский интерфейс и запрограммировать его поведение, вам потребуется два основных окна в Microsoft Blend. Это окна Активы, Объекты и Временная шкала .
Окно Активы
Если вы знаете, как использовать Visual Studio, то вы найдете окно Microsoft Blend’s Assets чрезвычайно знакомым. Помимо элементов управления, вы найдете все, что нужно для вашего артборда в окне Активы.
Они включают в себя практически все, от стилей и медиа, до поведения и эффектов.
Окно Объекты и Временная шкала
После добавления всех элементов и эффектов пользовательского интерфейса вы можете упорядочить и запрограммировать их поведение через это окно. Интерфейс этого окна аналогичен интерфейсу инструмента редактирования видео, где вы задаете поведение и действия в пределах временной шкалы.
Заключительные мысли
Независимо от того, насколько полезно приложение, оно никогда не будет иметь ожидаемого успеха, если оно не будет выглядеть так, чтобы привлечь ваших пользователей. Если у вас нет навыков, чтобы сделать интерфейс привлекательным, вы можете, по крайней мере, сделать его простым.
Учитывая все вышесказанное, такой инструмент, как Microsoft Blend, необходим для независимых и профессиональных разработчиков.
Используете ли вы Microsoft Blend для разработки пользовательского интерфейса вашего приложения? Дайте нам знать в разделе комментариев ниже.
СВЯЗАННЫЕ СТАТЬИ ВЫ ДОЛЖНЫ ПРОВЕРИТЬ:
- Что такое набор инструментов Microsoft для оценки и планирования?
- Что такое ядро Windows (ОС ядро)?
- Служба Windows Update Medic: что это такое и как им управлять
Панель Projects
Панель Project (Проект), располагаемая по умолчанию слева в рабочем окне Expression Blend, должна быть хорошо знакома тем, у кого имеется опыт работы в среде Microsoft Visual Studio IDE. Всякий раз, когда вы создаете в Expression Blend новый проект, вместе с ним автоматически создается целый ряд первоначальных файлов (разметки XAML и исходного кода), а также делаются ссылки на нужные библиотеки .NET, или так называемые сборки.
При создании проектов вы вольны вводить в них дополнительные типы файлов и добавлять ссылки на другие библиотеки .NET. Более того, можете добавлять в текущий проект новые папки, содержащие связанные с ним ресурсы, в том числе файлы изображений, видео- и аудиозаписей, а также XML-документы.
Если вы загрузили пример проекта ColorSwatсhSL, то обнаружите на панели Project не один, а два проекта. Первый проект содержит файлы исходного кода и библиотеки для приложения Silverlight, тогда как второй проект — файлы, связанные с веб-страницей, на которой размещается данное приложение. Как и в среде Visual Studio, в Expression Blend используются понятия решения и проекта.
Отдельное решение может содержать несколько проектов, которые совместно представляют разрабатываемое приложение. Как показано на рисунке, в один из двух проектов в рассматриваемом здесь примере добавляются новые элементы из контекстного меню, вызываемого щелчком правой кнопкой мыши. Это делается лишь для того, чтобы показать, каким образом в проект вводятся новые элементы. Хотя в рассматриваемом здесь примере этого пока что не требуется:
Интегрированный редактор исходного кода
Несмотря на то что XAML позволяет сделать немало полезного и замечательного, не написав ни единой строки кода C# или VB, в реальные проекты в конечном итоге приходится вводить определенный объем кода для приведения в действие функций разрабатываемого приложения. В предыдущих версиях среды Expression Blend IDE отсутствовало какое-либо подобие редактора исходного кода. Так, если бы вы дважды щелкнули на файле исходного кода C# (с расширением .cs) или VB (с расширением .vb) на панели Projects, произошел бы автоматический запуск среды Visual Studio (или текстового редактора Notepad либо WordPad, если среда Visual Studio не установлена).
В состав текущей версии Expression Blend включен полезный редактор исходного кода. Для того чтобы убедиться в этом, дважды щелкните на файле исходного кода ListBoxItemSendToTop.cs (или любом выбранном вами исходном файле), доступном на панели Project. Интегрированный в Expression Blend редактор исходного кода оказывается полезным в том случае, если требуется ввести код простой «заглушки» для обработчиков событий или написать несложный тестовый код в ходе разработки или создания прототипа приложения.
Несмотря на всю свою полезность, интегрированный в Expression Blend редактор исходного кода не идет ни в какое сравнение по своим функциональным возможностям с аналогичным редактором в Visual Studio, хотя от него этого и не требуется. В частности, в нем отсутствует встроенный отладчик, поддержка фрагментов кода C# или VB, средств реорганизации кода и визуального конструирования иерархий классов. Но с другой стороны, в интегрированном в Expression Blend редакторе исходного кода поддерживается система автоматической подсказки IntelliSense и автоматическое завершение кода: