что такое microsoft blend
990x.top
Простой компьютерный блог для души)
Microsoft Blend for Visual Studio 2017 — что это за программа?
Приветствую друзья! Сегодня мы поговорим про одну из программ от Майкрософт — Microsoft Blend for Visual Studio 2017. Поискав информацию понял одно — ее очень мало. Пришлось использовать секретные технологии поиска в недрах интернета и кое-что найти все таки удалось))
Разбираемся
Microsoft Blend используется для создания графических интерфейсов в Windows Presentation Foundation (WPF), Silverlight, веб-приложениях. В Microsoft Blend можно создать визуальное приложение, рисовать фигуры, пути, элементы управления.. можно импортировать изображения, видео, звук..
Я эту информацию нашел на одном зарубежном сайте. Как я понимаю — Microsoft Blend это компонент, который нужен для разработки приложений в Visual Studio 2017 (это студия разработки). Компонент нужен для разработки интерфейса, возможно без него можно обойтись.
Минутку. Что вообще значит интерфейс? Это просто внешний вид программы — менюшки, кнопки, регуляторы всякие, индикаторы.. пункты.. галочки, ползунки — все это часть интерфейса любой программы. У какой-то этого добра меньше, у кого-то больше, но данная часть проги всегда называется интерфейс.
Если у вас есть эта программа, и если вы не программист — то наверно ее можно удалить. Это если логически. Но на практике, скорее всего как раз в том случае, если вы эту прогу не ставили — удалять ее ненужно. Почему:
В общем немного стало понятно.. и тут вдруг я случайно нашел статью на англоязычной Википедии по поводу Microsoft Blend, вот ссылка. Там сказано почти тоже самое. Раньше Microsoft Blend for Visual Studio называлось Microsoft Expression Blend.
Интересно, но существует даже версия Microsoft Expression Blend for Windows Phone — еще со старым названием, как видим, позволяет создавать интерфейс для Windows Phone (операционка для смартфонов).
Внешний вид
В плане внешнего вида показать особо нечего — поймет только программист или какой-то спец. Вот например открыт редактор, вижу там проект открыт, в общем.. рабочая обстановка так бы сказать:
Это только часть внешнего вида программы. Полная картинка — огромно широкая, так как программисты любят программировать на больших широких экранах))
Но в заголовке как видите — название Microsoft Blend for Visual Studio:
А вот пример создания.. фигуры какой-то:
Фигура мне напоминает тапочек, может это и есть какой-то тапочек))
Вот окно, в заголовке пишется Blend Test App — видимо тестирование чего-то.. и вот открыто меню View, смотрите сколько здесь пунктов:
В очередной раз убеждаемся — прога для разработчиков, обычный юзер тут ничего не поймет))
Кроме черного бывает и белое оформление:
На самом деле кроме Microsoft Blend for Visual Studio 2017 у вас могут быть и другие компоненты установлены, это нормальное явление. Часто мы ставим разные проги, и вместе с ними ставятся еще какие-то.. так бы сказать вспомогательные. А бывает еще ставится софт от Маил ру, от Яндекса..))
Что такое Microsoft Blend?
Что такое 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 довольно прост и включает стандартную конструкцию на основе панели инструментов, которую можно ожидать в типичных программах проектирования.
Окно Активы
Если вы знаете, как использовать Visual Studio, то вы найдете окно Microsoft Blend’s Assets чрезвычайно знакомым. Помимо элементов управления, вы найдете все, что нужно для вашего артборда в окне Активы.
Они включают в себя практически все, от стилей и медиа, до поведения и эффектов.
Окно Объекты и Временная шкала
После добавления всех элементов и эффектов пользовательского интерфейса вы можете упорядочить и запрограммировать их поведение через это окно. Интерфейс этого окна аналогичен интерфейсу инструмента редактирования видео, где вы задаете поведение и действия в пределах временной шкалы.
Заключительные мысли
Независимо от того, насколько полезно приложение, оно никогда не будет иметь ожидаемого успеха, если оно не будет выглядеть так, чтобы привлечь ваших пользователей. Если у вас нет навыков, чтобы сделать интерфейс привлекательным, вы можете, по крайней мере, сделать его простым.
Учитывая все вышесказанное, такой инструмент, как Microsoft Blend, необходим для независимых и профессиональных разработчиков.
Используете ли вы Microsoft Blend для разработки пользовательского интерфейса вашего приложения? Дайте нам знать в разделе комментариев ниже.
СВЯЗАННЫЕ СТАТЬИ ВЫ ДОЛЖНЫ ПРОВЕРИТЬ:
Проектирование 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 в одной интегрированной среде разработки, в результате автоматической перезагрузки могут применяться при переходе к другой среде. Вы можете управлять поведением перезагрузки, перейдя в меню Сервис > Параметры > > документы среды в любой интегрированной среде разработки.
Установка
Чтобы создать приложения 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.
| Задача | Visual Studio | Blend для Visual Studio | Дополнительные сведения |
|---|---|---|---|
| Проектирование визуальных состояний | Средство для разработки визуальных состояний отсутствует. Их необходимо создавать программно. | Используйте средства разработки для изменения внешнего вида элемента управления в зависимости от его состояния. | Визуальные состояния |
| Создание анимаций | Приложение не включает средство создания анимации; анимацию необходимо создавать с помощью программных средств. Для этого требуются знания анимации и системы управления временем в WPF, а также обширный опыт в написании кода. | Анимация создается визуально, и ее можно предварительно просмотреть в Blend для Visual Studio. Этот способ создания более быстрый и точный, чем создание анимации с помощью кода. В целях управления взаимодействием с пользователем можно добавить триггеры, а также можно переключиться на код, чтобы добавить обработчики событий и другие функциональные возможности. | Анимирование объектов |
| Преобразование форм и текста в контуры для простоты управления | Не поддерживается. | Вы можете значительно или незначительно изменять фигуры (например, прямоугольники и эллипсы) путем преобразования их в контуры, которые предоставляют лучшие возможности управления изменениями. Вы можете изменять форму контура или объединять несколько контуров, а также создавать составные пути из нескольких фигур. Также текстовые блоки можно преобразовывать в контуры, чтобы управлять ими в качестве векторных изображений. | Рисование фигур и контуров |
| Изменение элементов управления, шаблонов и стилей | Требует опыта в написании кода и знаний стилей и шаблонов WPF. | Преобразование изображения в элемент управления. Используйте средства правки шаблонов для внесения изменений в элементы управления, стили и шаблоны с помощью всего нескольких щелчков мыши. Например, вы можете использовать ресурсы стиля Blend для Visual Studio для применения стандартных элементов управления WPF (например, кнопок, списков, полос прокрутки, меню и т. д.), а также для изменения их цвета, стиля или базового шаблона непосредственно в Blend для Visual Studio. Затем можно перейти к коду, чтобы внести завершающие штрихи при необходимости. | Изменение стиля объектов |
| Подключение пользовательского интерфейса к данным | Вы можете создать источник данных на базе таких ресурсов, как база данных SQL Server, WCF или веб-служба, объект или список SharePoint, а затем привязать источник данных к элементам управления пользовательского интерфейса. Возможности создания данных в Blend для Visual Studio весьма обширны (можно легко добавлять имена, числа, URL-адреса и фотографии) и позволяют сэкономить много времени. Что касается динамических данных, то элементы управления пользовательского интерфейса можно привязать к XML-файлу или к любому источнику данных среды CLR. | Отображение данных |
Дополнительные сведения о расширенных задачах разработки XAML см. в статье Создание пользовательского интерфейса с помощью Blend для Visual Studio.
Обзор Blend для Visual Studio
Blend для Visual Studio помогает разрабатывать приложения Windows и веб-приложения на основе XAML. Этот инструмент предоставляет те же основные возможности конструктора XAML, что и Visual Studio, а также визуальные конструкторы для дополнительных задач, таких как анимация и управление поведением. Сравнение средств Blend и Visual Studio см. в разделе Разработка XAML в Visual Studio и Blend для Visual Studio.
Если вы не работали раньше с Blend для Visual Studio, ознакомьтесь с уникальными возможностями этого инструмента. В этом разделе содержится краткий обзор по теме.
Панель инструментов
Для создания и изменения объектов в приложении можно использовать панель Средства в Blend для Visual Studio. Панель Средства отображается в левой части конструктора XAML, если у вас открыт файл XAML.
Для создания объектов необходимо выбрать инструмент и нарисовать нужное изображение с помощью мыши на монтажной панели.
Некоторые средства на панели Инструменты имеют варианты, например, вместо прямоугольника можно выбрать эллипс или линию. Чтобы открыть эти варианты, щелкните правой кнопкой мыши или нажмите и удерживайте средство.
Инструменты выбора
Выбор объектов и путей. Используйте инструмент Прямой выбор для выбора вложенных объектов и сегментов контура.
Инструменты представления
Настройка представления области рисования, например панорамирования и масштабирования.
Кисти
Работа с визуальными атрибутами объекта, такими как преобразование кисти или применение градиента.
Инструменты для работы с объектами
Создание в области рисования наиболее распространенных объектов (контуров, фигур, панелей макетов, текстов и элементов управления).
Инструменты для работы с ресурсами
Доступ к окну «Ресурсы» и отображение последнего использованного ресурса из библиотеки.
Окно ресурсов
Окно Ресурсы содержит все доступные элементы управления и похоже на панель элементов в Visual Studio. Помимо элементов управления в окне Ресурсы вы найдете все, что можно добавить в область рисования, включая стили, мультимедиа, поведения и эффекты. Чтобы открыть окно Ресурсы, выберите Представление > Окно «Ресурсы» или нажмите клавиши CTRL+ALT+X.
Окно «Объекты и временная шкала»
Используйте это окно для упорядочивания объектов в области рисования и, если требуется, для их анимации. Чтобы открыть окно Объекты и временная шкала, выберите Просмотр > Структура документа. В дополнение к функциональным возможностям, предоставляемым в окне Структура документа в Visual Studio, в окне «Объекты и временная шкала» в Blend для Visual Studio справа есть область композиции временной шкалы. Временную шкалу следует использовать при создании и редактировании анимаций.
Наведите указатель на каждую кнопку в окне, чтобы получить дополнительные сведения о доступных функциях.
Пошаговое руководство. Создание кнопки с помощью Microsoft Expression Blend
В этом пошаговом руководстве описывается процесс создания настраиваемой кнопки WPF с помощью Microsoft Expression Blend.
На следующем рисунке показана настраиваемая кнопка, которую вы создадите.
Преобразование фигуры в кнопку
В первой части этого пошагового руководства вы создадите пользовательский вид пользовательской кнопки. Для этого сначала преобразуйте прямоугольник в кнопку. Затем добавьте дополнительные фигуры в шаблон кнопки, чтобы создать более сложную кнопку поиска. Почему не стоит начинать с обычной кнопки и настраивать ее? Так как кнопка имеет встроенные функции, которые не нужны; для пользовательских кнопок проще начать с прямоугольника.
Создание нового проекта в Expression Blend
Начало выражения Blend. (Нажмите кнопку Пуск, наведите указатель на пункт все программы, затем на пункт Microsoft Expression и выберите пункт Microsoft Expression Blend.)
При необходимости разверните приложение.
В меню Файл выберите пункт Создать проект.
Выберите стандартное приложение (.exe).
Назовите проект CustomButton и нажмите кнопку ОК.
На этом этапе у вас есть пустой проект WPF. Можно нажать клавишу F5, чтобы запустить приложение. Как вы можете ожидать, приложение состоит только из пустого окна. Затем создайте скругленный прямоугольник и преобразуйте его в кнопку.
Преобразование прямоугольника в кнопку
Нарисуйте прямоугольник приблизительно в размере кнопки в окне: Выберите инструмент прямоугольник на панели инструментов слева и перетащите прямоугольник на окно.
Замените прямоугольник на кнопку: Выберите прямоугольник. В меню Сервис щелкните создать кнопку.
Укажите область стиля или шаблона: Появится диалоговое окно, как показано ниже.
Для параметра имя ресурса (ключ) выберите Применить ко всем. При этом итоговый стиль и шаблон кнопки будут применяться ко всем объектам, которые являются кнопками. Для определения в выберите приложение. При этом итоговый стиль и шаблон кнопки будут иметь область действия для всего приложения. Если задать значения в этих двух полях, стиль и шаблон кнопки будут применяться ко всем кнопкам во всем приложении, а любая кнопка, созданная в приложении, будет использовать этот шаблон по умолчанию.
Изменение шаблона кнопки
Теперь у вас есть прямоугольник, который был изменен на кнопку. В этом разделе вы измените шаблон кнопки и сможете настроить его внешний вид.
Изменение шаблона кнопки для изменения внешнего вида кнопки
Измените имена компонентов шаблона: Щелкните правой кнопкой мыши прямоугольник в описи шаблона, измените Rectangle имя с «[Rectangle]» на «аутерректангле» и замените «[ContentPresenter]» на «миконтентпресентер».
Измените прямоугольник таким образом, чтобы он был пустым внутри (например, кольцо): Выберите аутерректангле и задайте Fill для параметра значение прозрачный и StrokeThickness 5.
Затем присвойте свойству цвет, который Stroke будет использоваться в шаблоне. Для этого щелкните маленький белый прямоугольник рядом с обводкой, выберите кустомекспрессион и в диалоговом окне введите «
Прямоугольник может выглядеть иначе, чем на рисунке (например, у него могут быть скругленные углы).
Кроме того, можно также разместить миконтентпресентер в верхней части окна, щелкнув его правой кнопкой мыши и выбрав команду отправить вперед.
Измените вид иннерректангле: Задайте RadiusX значения, RadiusY и StrokeThickness равными 20. Кроме того, задайте для свойства значение Fill фон шаблона, используя пользовательское выражение «
Добавить слой с эффектом стекла поверх: Заключительная часть настройки внешнего вида кнопки заключается в том, чтобы добавить прозрачный слой поверх остальных. Этот прозрачный слой состоит из третьего прямоугольника. Так как прозрачный блок охватывает всю кнопку, прозрачный прямоугольник аналогичен в измерениях для аутерректангле. Поэтому создайте прямоугольник, просто создав копию аутерректангле. Выделите аутерректангле и используйте сочетание клавиш CTRL + C и CTRL + V для создания копии. Назовите этот новый прямоугольник «Гласскубе».
При необходимости изменить расположение гласскубе: Если гласскубе еще не размещается, так что он охватывает всю кнопку, перетащите его в нужное расположение.
Присвойте гласскубе немного другой форме, чем аутерректангле: Измените свойства гласскубе. Начните с изменения RadiusX RadiusY свойств и на 10 и StrokeThickness до 2.
Точка градиента 1: белый с альфа-значением 75%
Градиентная точка 2: прозрачная
Позиция градиента 3: белый с альфа-значением 75%
Градиентная точка 4: прозрачная
Градиентная позиция 5: белый с альфа-значением 75%
Ограничитель градиента 6: прозрачный
При этом создается «волнистое» стекло.
Скрыть слой стекла: Теперь, когда вы видите, как выглядит прозрачный слой, перейдите на панель внешний вид панели свойства и установите для параметра Opacity (прозрачность) значение 0%, чтобы скрыть его. В разделах дальше мы будем использовать триггеры и события свойств для отображения и управления уровнем стекла.
Настройка поведения кнопки
На этом этапе вы настроили представление кнопки, отредактировав его шаблон, но кнопка не реагирует на действия пользователя, как обычные кнопки (например, изменение внешнего вида при переходе по щелчку мыши, получение фокуса и нажатие кнопки). В следующих двух процедурах показано, как построить подобные поведения в пользовательской кнопке. Начнем с простых триггеров свойств, а затем добавим триггеры событий и анимации.
Установка триггеров свойств
Теперь вы создали первый триггер свойства. Обратите внимание, что панель триггеров редактора записала Opacity изменения на 100%.
Нажмите клавишу F5, чтобы запустить приложение, и наведите указатель мыши на кнопку. Вы увидите, что слой стекла появляется при наведении указателя мыши на кнопку и исчезает при появлении указателя.
Параметр onmouseover инициирует изменение значения Stroke: Давайте связываем некоторые другие действия с IsMouseOver триггером. Пока запись продолжится, переключите выбранный вариант с гласскубе на аутерректангле. Затем задайте для Stroke аутерректангле пользовательское выражение «
Onmouseover запускает Размытый текст: Давайте соберем еще одно действие с IsMouseOver триггером свойства. Сделать содержимое кнопки нечетким при появлении стекла над ним. Для этого можно применить размытие BitmapEffect к ContentPresenter (миконтентпресентер).
На этом этапе мы использовали триггер свойства с несколькими связанными действиями для создания поведения выделения, когда указатель мыши попадает в область кнопки и выходит из нее. Другим типичным поведением кнопки является выделение при наличии фокуса (как после щелчка мышью). Это поведение можно добавить, добавив еще один триггер свойства для IsFocused Свойства.
Создать триггер свойства для Focus: Используя ту же процедуру, что и IsMouseOver (см. первый шаг этого раздела), создайте еще один триггер свойства для IsFocused Свойства. Пока запись триггера включена, добавьте в триггер следующие действия:
гласскубе получает Opacity 100%.
аутерректангле получает Stroke значение настраиваемого выражения «
В качестве последнего шага в этом пошаговом руководстве мы добавим анимацию к кнопке. Эти анимации будут вызываться событиями, а именно MouseEnter Click событиями и.
Использование триггеров событий и анимации для добавления интерактивности
Создайте триггер события MouseEnter: Добавьте новый триггер события и выберите MouseEnter его в качестве события, которое будет использоваться в триггере.
Создать шкалу анимации: Затем свяжите шкалу времени анимации с MouseEnter событием.
Возможно, потребуется изменить размер окна и (или) панелей, чтобы увидеть отображение.
Создайте опорный кадр: Чтобы создать анимацию, выберите объект, который требуется анимировать, создайте на временной шкале два или более опорных кадра, а для этих опорных кадров задайте значения свойств, между которыми должна быть создана анимация анимации. На следующем рисунке описывается создание опорного кадра.
Сжать гласскубе в этом опорном кадре: Выбрав второй ключевой кадр, уменьшите размер гласскубе до 90% от его полного размера с помощью преобразования размера.
Нажмите клавишу F5 для запуска приложения. Наведите указатель мыши на кнопку. Обратите внимание, что прозрачный слой сжимается поверх кнопки.
Создайте другой триггер события и свяжите с ним другую анимацию: Давайте добавим еще одну анимацию. Используйте аналогичную процедуру, которая использовалась для создания предыдущей анимации триггера событий.
Создайте новый триггер события с помощью Click события.
Свяжите новую временную шкалу с Click событием.
Для этой временной шкалы создайте два опорных кадра, один из которых составляет 0,0 секунд, а второй — 0,3 секунд.
Выделив опорный кадр в 0,3 секунд, установите для параметра угол поворота значение 360 градусов.
Нажмите клавишу F5 для запуска приложения. Нажмите кнопку. Обратите внимание, что прозрачный слой вращается вокруг.
Заключение
Вы завершили настраиваемую кнопку. Вы сделали это с помощью шаблона кнопки, который был применен ко всем кнопкам в приложении. Если выйти из режима редактирования шаблона (см. рисунок ниже) и создать дополнительные кнопки, вы увидите, что они выглядят и ведут себя как пользовательская кнопка, а не как кнопка по умолчанию.
Нажмите клавишу F5 для запуска приложения. Нажмите кнопки и обратите внимание на то, как все они ведут себя одинаково.
Помните, что во время настройки шаблона Fill свойству иннерректангле и свойству аутерректангле задается Stroke фон шаблона (
В заключение, в процессе настройки шаблона кнопки вы узнали, как выполнять следующие действия в Microsoft Expression Blend:
Настройка вида элемента управления.
Задание триггеров свойств. Триггеры свойств очень полезны, так как их можно использовать для большинства объектов, а не только для элементов управления.
Задайте триггеры событий. Триггеры событий очень полезны, так как их можно использовать для большинства объектов, а не только для элементов управления.
Разное: создание градиентов, добавление Битмапеффектс, использование преобразований и задание основных свойств объектов.