Blend for visual studio 2019 что это

Обновлено: 07.07.2024

В моей предыдущей статье мы рассмотрели SketchFlow, инструмент для создания прототипов, который является частью пакета Microsoft Expression Studio. Мы увидели, как быстро создать каркасный прототип для простого приложения для просмотра портфолио, и как использовать функции обратной связи SketchFlow для сбора отзывов заинтересованных сторон и пользователей.

Если вы пропустили первую статью, я настоятельно рекомендую вам ознакомиться с ней: быстрое создание прототипов с помощью SketchFlow . Он познакомит вас с интерфейсом Blend и объяснит некоторые основные концепции инструмента.

В этой статье мы углубимся в Expression Blend и посмотрим, как запустить прототип нашего портфолио в производство с помощью Microsoft Silverlight. Мы рассмотрим навигацию, макет и примеры данных — и все без написания кода!

Silverlight и Expression Blend

К настоящему времени вы, вероятно, сталкивались с технологией Microsoft Silverlight где-то в Интернете. В двух словах, Silverlight — это предложение Microsoft по предоставлению интерактивных возможностей.

Silverlight предоставляет богатый набор функций для визуального дизайна, анимации, интеграции мультимедиа, макета и визуализации данных. Он обладает широким диапазоном элементов управления с поддержкой скинов и мощными механизмами для определения сложных пользовательских интерфейсов. Silverlight также создан для взаимодействия с веб-платформой. Приложения Silverlight могут легко взаимодействовать с базовым браузером и HTML-страницей, в том числе управлять DOM и вызывать (и вызываться) JavaScript.

Плагин Silverlight работает около 4 МБ с поддержкой Internet Explorer, Safari, Firefox, Opera и Google Chrome. Silverlight работает на Windows и Mac OSX, Linux (через проект Mono) и скоро также будет работать на Windows Phone.

Silverlight для разработчиков

Silverlight для дизайнеров

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

Это подводит нас к Expression Blend.

Выражение смесь

Expression Blend является частью набора инструментов разработки Microsoft Expression Studio. Это производственный инструмент для проектирования и создания пользовательских интерфейсов для Silverlight в Интернете и Windows Phone, а также для WPF (Windows Presentation Foundation) в Windows и Microsoft Surface. Expression Blend также поддерживает SketchFlow, инструмент быстрого прототипирования, который мы рассмотрели в предыдущей статье.

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

Дизайнер-разработчик Workflow: секретный соус

Декларативные пользовательские интерфейсы с XAML

Основой Silverlight и WPF является язык определения пользовательского интерфейса XAML. XAML — это язык на основе XML для определения содержимого, макета и поведения пользовательских интерфейсов. На рисунке 1 «В основе вашего опыта Silverlight лежит язык XAML на основе XML» показан элемент интерфейса кнопки и соответствующий код XAML, который создает кнопку. Хотя синтаксис и механика языка сильно отличаются от HTML, его намерения аналогичны. Именно XAML делает возможными инструменты проектирования пользовательского интерфейса, такие как Blend. Как дизайнеру, стоит понять основы работы XAML. Хотя обычно нет необходимости иметь возможность кодировать в XAML (я пока не нашел в этом необходимости), может быть полезно иметь возможность читать XAML, чтобы помочь отладить любое необъяснимое поведение в вашем проекте.

Рисунок 1. В основе вашего опыта Silverlight лежит язык XAML на основе XML

В основе вашего опыта Silverlight лежит язык XAML на основе XML

Из SketchFlow для смешивания

В первой статье мы узнали, что SketchFlow позволяет нам создавать прототипы «поверх» Blend. Одним из преимуществ этого подхода является то, что вы можете взять свой изначально отрывочный прототип и развить его до уровня, когда он будет очень близок к финальному опыту в SketchFlow. Вы даже можете подключить свой прототип к реальному внутреннему коду. Прототип, который мы создали в предыдущей статье, показан на рисунке 2, «Наш прототип SketchFlow» .

Наш прототип SketchFlow

Естественный вопрос, который нужно задать в этот момент, заключается в том, можете ли вы превратить свой прототип SketchFlow в рабочий проект, когда будете готовы. Ответ да, вроде …

Прототип SketchFlow — это проект Blend, как и любой другой. В дополнение к элементам, которые вы определяете сами, SketchFlow предоставляет скрытые механизмы для подключения всего, реализации карты SketchFlow, предоставления стилей SketchFlow и, конечно, создания кода, необходимого для проигрывателя SketchFlow. Чтобы преобразовать прототип SketchFlow в производственный проект, у вас есть два варианта:

Удалите все части проекта SketchFlow. Для этого есть инструкции в файлах справки Blend.

Соберите активы, которые вы хотите сохранить, и эффективно скопируйте и вставьте их в новый проект.

Для всех проектов, кроме самых простых, я бы порекомендовал вариант 2. Во-первых, он гарантирует, что в вашем проекте не осталось никаких кусочков SketchFlow. Во-вторых, будучи частью прототипа, ваши экраны, вероятно, довольно небрежны по производственным стандартам. Весь смысл быстрого прототипирования означает, что вы, вероятно, на самом деле не задумывались о таких вопросах, как компоновка, ограничение, изменение размера, именование или хорошие архитектурные практики. По этой причине вам, вероятно, лучше просто просмотреть свой прототип и скопировать элементы (экраны, компоненты, анимации и т. Д.), Которые вы хотите использовать в качестве отправной точки для своего производственного проекта.

В нашем случае прототип настолько прост, что мы можем просто начать заново.

Давайте начнем

Как мы узнали в прошлый раз, когда мы запускаем Expression Blend, у нас есть возможность начать новый проект. На этот раз вместо выбора приложения Silverlight 3 SketchFlow мы создадим настоящий веб-сайт приложения Silverlight 3 + , как показано на рисунке 3, «Выбор подходящего типа проекта» .

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 для разработки пользовательского интерфейса вашего приложения? Дайте нам знать в разделе комментариев ниже.

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

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

Установка

Снимок экрана рабочей нагрузки разработки классических приложений .NET из Visual Studio Installer

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

снимок экрана универсальная платформа Windows рабочей нагрузки разработки из Visual Studio Installer

Снимок экрана рабочей нагрузки разработки мобильных приложений на .NET из Visual Studio Installer

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

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

Осторожно, много гифок.


Улучшения инструментов

Как вам новые цвета от Roslyn? Цвета Visual Studio Code получили высокую оценку, поэтому мы включили аналогичные цветовые схемы в Visual Studio. Ваш редактор кода стал теперь немного красочнее. Ключевые слова, пользовательские методы, локальные переменные, имена параметров и перегруженные операторы получили новые цвета. Вы даже можете настроить цвета для каждой классификации синтаксиса, перейдя в Tools > Options > Environment > Fonts and Colors и прокрутив до «User Members».

New roslyn classification colors

В нижней части файла, в вашем редакторе, находятся индикаторы работоспособности документа, а также значок очистки кода. Индикаторы работоспособности документа позволяют сразу узнать, сколько ошибок и предупреждений присутствует в файле, который вы сейчас открыли. Вы можете нажать на значок очистки кода, чтобы применить правила стиля кода, указанные в Tools > Options, или, если у вас есть файл editorconfig, который предписывает использование одного стиля кода в вашей команде, VS применит стили, указанные в этом файле.

Вы можете редактировать файлы проектов типа SDK простым двойным щелчком мыши. Вы также можете просматривать эти файлы в виде превью в навигации GoToAll (Ctrl+t) и искать содержимое для ссылок на файлы.

Загрузите подмножество проектов в ваше решение с помощью фильтрованных решений! Теперь вы можете выгрузить проекты и сохранить .slnf-файл, который откроет только указанные вами проекты. Это поможет вам быстро получить интересующий вас код без необходимости загрузки всего решения.

image

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

Запустите форматирование стиля кода по всему решению в командной строке с помощью глобального инструмента dotnet format.

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