Что такое 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 у вас могут быть и другие компоненты установлены, это нормальное явление. Часто мы ставим разные проги, и вместе с ними ставятся еще какие-то.. так бы сказать вспомогательные. А бывает еще ставится софт от Маил ру, от Яндекса..))

Источник

Проектирование 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.

Дополнительные сведения о расширенных задачах разработки 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 фон шаблона, используя пользовательское выражение ««) и задайте для параметра значение Stroke «прозрачный». Обратите внимание, что параметры для Fill и для Stroke иннерректангле являются противоположными для аутерректангле.

Добавить слой с эффектом стекла поверх: Заключительная часть настройки внешнего вида кнопки заключается в том, чтобы добавить прозрачный слой поверх остальных. Этот прозрачный слой состоит из третьего прямоугольника. Так как прозрачный блок охватывает всю кнопку, прозрачный прямоугольник аналогичен в измерениях для аутерректангле. Поэтому создайте прямоугольник, просто создав копию аутерректангле. Выделите аутерректангле и используйте сочетание клавиш 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 аутерректангле пользовательское выражение «>». Этот параметр задает в качестве Stroke стандартного цвета выделения, используемого кнопками. Нажмите клавишу F5, чтобы увидеть результат при наведении указателя мыши на кнопку.

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 фон шаблона (). Поэтому при задании цвета фона для отдельных кнопок заданный фон будет использоваться для соответствующих свойств. Попробуйте изменить фон сейчас. На следующем рисунке используются различные градиенты. Таким образом, хотя шаблон полезен для общей настройки элементов управления, таких как Button, элементы управления с шаблонами можно изменять, чтобы они отличались друг от друга.

В заключение, в процессе настройки шаблона кнопки вы узнали, как выполнять следующие действия в Microsoft Expression Blend:

Настройка вида элемента управления.

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

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

Разное: создание градиентов, добавление Битмапеффектс, использование преобразований и задание основных свойств объектов.

Источник