Blend for visual studio что это
Перейти к содержимому

Blend for visual studio что это

  • автор:

Проектирование 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 также будет установлено. Screenshot of the .NET Desktop Development workload from the Visual Studio Installer
  • Чтобы создать приложения UWP, установите в Visual Studio рабочую нагрузку Разработка приложений для универсальной платформы Windows. Средство Blend для Visual Studio также будет установлено. Screenshot of the Universal Windows Platform Development workload from the Visual Studio Installer
  • Чтобы создать приложения Xamarin.Forms, установите в Visual Studio рабочую нагрузку Разработка мобильных приложений на .NET. Средство Blend для Visual Studio не установлено. Blend не поддерживает приложения Xamarin.Forms. Screenshot of the Mobile Development with .NET workload from the Visual Studio Installer

Общие возможности

Для основных задач разработки 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

Анимирование объектов в конструкторе XAML

С помощью средства Blend для Visual Studio вы можете с легкостью создавать короткие анимации, которые перемещают объекты или позволяют им исчезать и появляться.

Для создания анимации требуется раскадровка. Раскадровка содержит одну или несколько временных шкал. Задайте опорные кадры на временной шкале, чтобы отметить изменения свойств. Затем при запуске анимации Blend для Visual Studio интерполирует изменения свойств за указанный период времени. Результатом является плавный переход. Вы можете анимировать любое свойство, которое принадлежит к объекту, даже если оно не является визуальным.

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

Storyboard for animation in Blend for Visual Studio

Создание анимации

  1. Чтобы создать раскадровку, нажмите кнопку Параметры раскадровки в окне Объекты и временная шкала, а затем выберите Создать. Add a storyboard in Blend for Visual Studio
  2. В диалоговом окне Create Storyboard Resource (Создание ресурса раскадровки) введите имя для раскадровки.
  3. На панели Ресурсы в конструкторе добавьте прямоугольник в нижнюю левую часть страницы. Rectangle in Assets panel of XAML Designer
  4. В окне Объекты и временная шкала переместите желтый указатель времени на 3 секунды. Time indicator in timeline
  5. В конструкторе страницы перетащите прямоугольник в правую часть страницы.
  6. Нажмите кнопку Воспроизвести, чтобы просмотреть, как прямоугольник перемещается с левой части страницы в правую.

Поэкспериментируйте с другими изменениями в прямоугольнике, воспроизводимыми в разные моменты времени. Например, можно изменить цвет заливки или ориентацию в окне свойств.

Связанный контент

Microsoft Blend

Microsoft Blend для Visual Studio (ранее Microsoft Expression Blend ) — это инструмент дизайна пользовательского интерфейса, разработанный и продаваемый Microsoft для создания графических интерфейсов для веб-приложений и настольных приложений, сочетающих функции этих двух типов приложений. Это интерактивный интерфейс WYSIWYG для разработки интерфейсов на основе XAML для приложений Windows Presentation Foundation , Silverlight и UWP . Это было одно из приложений в пакете Microsoft Expression Studio до того, как этот пакет был прекращен.

Microsoft Blend

Blend для Visual Studio screenshot.png

Скриншот Blend для Visual Studio 2012
2019 v16.4.1 / 11 декабря 2019 г . ; 17 месяцев назад [1] ( 2019-12-11 )

Expression Blend поддерживает текстовый движок WPF с расширенной типографикой OpenType и ClearType , векторные 2D-виджеты и 3D-виджеты с аппаратным ускорением через DirectX .

Expression Blend имел кодовое название Sparkle , и первоначально продукт был объявлен как Microsoft Expression Interactive Designer , прежде чем он был переименован в Expression Blend в декабре 2006 года.

24 января 2007 года Microsoft выпустила первую общедоступную предварительную версию Expression Blend для сообщества, которую можно бесплатно загрузить на своем веб-сайте. Окончательная версия была выпущена в производство вместе с другими продуктами Expression 30 апреля 2007 года. Новости RTM были объявлены на конференции Microsoft MIX 07 для веб-разработчиков и дизайнеров. [4] Expression Blend Service Pack 1 был выпущен в ноябре 2007 года. [5] Expression Blend требует .NET Framework 3.0 . Expression Blend и Expression Web также доступны как часть подписки MSDN Premium.

В декабре 2012 года Microsoft объявила о прекращении поддержки автономных инструментов пакета Expression. [6] [7] Expression Blend был интегрирован в Visual Studio 2012 и Visual Studio Express для Windows 8.

История выпуска

Релиз Дата выпуска Особенности
2 2008-04-28 Поддержка разработки полнофункциональных веб-приложений на основе браузера Microsoft Silverlight, обеспечивающих возможности анимации , векторной графики , интерактивности и воспроизведения видео . Версия 2.0 на момент выпуска поддерживала только приложения Silverlight 1.0, а Microsoft планировала использовать Blend 2.5 для приложений Silverlight 2.0, однако возможности предварительной версии 2.5 были добавлены в Blend 2.0 Service Pack 1.
3 2009-07-22 Поддержка файлов PSD и AI, поддержка SketchFlow, [8] TFS и ряд других значительных улучшений. Sketchflow — это модуль прототипирования пользовательского опыта, реализованный в Blend. [9] [10]
4 2010-06-07 Поддержка Silverlight 4 и WPF 4 при сохранении совместимости с приложениями Silverlight 3 и WPF 3.5 SP1. Другие улучшения и дополнения: библиотека фигур, улучшенная поддержка файлов Photoshop, добавленные эффекты пиксельных шейдеров, компоновка контуров, эффекты перехода, переходы элементов ListBox, поддержка паттернов Model-View-ViewModel , дополнительные Behaviors, условные Behaviors, образцы данных из классов CLR, время разработки разрешение ресурсов, функции упрощения для WPF 4, более чистый XAML и поддержка .ZIP для проектов и шаблонов. [11] Поддержка проектов Windows Phone 7 для Expression Blend 4 Release Candidate. [12] [13] [14]
2012 г. 2012-08-15 Название изменено на «Blend for Visual Studio 2012». Выпущено вместе с окончательными версиями Windows 8 и Visual Studio 2012 RTM. Включает поддержку WPF версий 3.5, 4.0 и 4.5, Silverlight 4.0 и 5.0, SketchFlow и инструментов наложения для Windows 8. [15] [3] [2]
2013 2013-10-17 Выпущено вместе с Visual Studio 2013 RTM
2015 г. 2015-07-20 Выпущено вместе с Visual Studio 2015 RTM [16]
2017 г. 2017-03-07 Выпущено вместе с окончательной первоначальной версией Visual Studio 2017 [17]
2019 г. 2019-04-02 Выпущено вместе с окончательной первоначальной версией Visual Studio 2019 [18]

Смотрите также

  • Дизайнер интерфейсов Glade
  • Разработчик интерфейса

Рекомендации

  1. ^ https://docs.microsoft.com/en-us/visualstudio/releases/2019/release-notes#16.4.1
  2. ^ a b c «Загрузить: Blend + SketchFlow Preview для Microsoft Visual Studio 2012» . Центр загрузок . Microsoft. 15 августа 2012 . Проверено 26 апреля 2013 года .
  3. ^ а б
  4. Шорман, Кристиан (15 августа 2012 г.). «Доступно сейчас: смесь для Visual Studio 2012» . Blend Insider . Microsoft . Проверено 26 апреля 2013 года .
  5. ^ Новости Expression Studio RTM
  6. ^ Expression Blend SP1
  7. ^
  8. «Microsoft убивает Expression Suite» . i-programmer.info. 2012-12-21 . Проверено 1 июня 2013 .
  9. ^
  10. «Microsoft прекращает разработку пакета Expression для веб-дизайна и инструментов дизайна» . Ars Technica . 2012-12-20 . Проверено 1 июня 2013 .
  11. ^ Концепции SketchFlow: Обзор
  12. ^ SketchFlow — Создание эскизов и прототипов в Expression Blend
  13. ^ SketchFlow: немного истории
  14. ^ Что нового в версии-кандидате Expression Blend 4
  15. ^ Примечания к выпуску надстройки Microsoft Expression Blend Preview 2 для Windows Phone
  16. ^ Microsoft Expression Blend 4 для Windows Phone видео
  17. ^ Часто задаваемые вопросы по смешиванию
  18. ^
  19. Артур, Эрик (15 августа 2012 г.). «Объявление о выпуске Blend + SketchFlow Preview для Visual Studio 2012» . Blend Insider . Microsoft . Проверено 26 апреля 2013 года .
  20. ^
  21. «Visual Studio 2015 RTM» . Новости Visual Studio . Microsoft. 20 июля 2015 . Проверено 20 июня +2016 .
  22. ^
  23. «Visual Studio 2017 RTM» . Новости Visual Studio . Microsoft. 7 марта 2017 . Проверено 8 марта 2017 года .
  24. ^
  25. «Visual Studio 2019 RTM» . Новости Visual Studio . Microsoft. 1 апреля 2019 . Проверено 8 апреля 2019 .

Изменение стиля объектов в Blend для Visual Studio

Самый простой способ настроить объект — задать свойства на панели Свойства.

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

Кисти: изменение внешнего вида объекта

Примените кисть к объекту, если вы хотите изменить его внешний вид.

Нанесение повторяющегося изображения или рисунка на объект

Нанесите повторяющееся изображение или шаблон на объект с помощью мозаичной кисти.

Чтобы создать мозаичную кисть, начните с создания ресурсов кисти изображения, кисти рисования или кисти визуального объекта.

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

Image brushmage brush tiledImage brush flipped

Создайте кисть рисования с помощью векторного рисунка, например контура или фигуры. На следующих рисунках представлены кисть рисования, мозаичная кисть рисования и перевернутая кисть рисования.

Drawing brushDrawing brush tiledDrawing brush flipped

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

Visual brushVisual brush tiled

Стили и шаблоны. Создание согласованного внешнего вида и поведения элементов управления

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

В каком случае следует использовать стиль? Если вы хотите задать свойства по умолчанию (такие как цвет кнопки), используйте стиль. Элемент управления можно изменить даже в том случае, если вы уже применили к нему стиль.

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

Создание шаблона или стиля

Существует два способа создания шаблона. Можно преобразовать любой объект в области рисования в элемент управления или создать шаблон на основе существующего элемента управления.

Чтобы преобразовать любой объект в шаблон элемента управления, выберите объект, а затем в меню Средства выберите Преобразовать в элемент управления.

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

Edit Template menu

Чтобы создать стиль, выберите объект, а затем в меню Объект выберите пункт Изменить стиль и Изменить копию или Создать пустой.

  • Выберите Изменить копию, чтобы начать со стиля или шаблона элемента управления по умолчанию.
  • Выберите Создать пустой, чтобы начать «с нуля».

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

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

Create Style Resource dialog box

Return scope to icon

Невозможно создать стили и шаблоны для каждого типа элемента управления. Если элемент управления не поддерживает стили, то кнопка навигации не отображается в области рисования. Чтобы вернуться в область редактирования основного документа, щелкните Вернуться к области .

Применение стиля или шаблона к элементу управления

Щелкните правой кнопкой мыши объект в окне Объекты и временная шкала, выберите элемент Изменить шаблон, а затем нажмите кнопку Применить ресурс.

Apply Resource menu

Восстановление стиля или шаблона элемента управления по умолчанию

Выберите элемент управления и в окне Свойств** найдите свойство Style или Template . Выберите Дополнительные параметры, а затем выберите в контекстном меню пункт Сброс.

Визуальные состояния

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

Mouse over state

Play button

Просмотрите короткое видео: управление состоянием элементов управления WPF.

Ресурсы: создание цветов, стилей и шаблонов и их последующее повторное использование

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

Convert color to resource buttonCreate Color Resource dialog box

Связанный контент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *