Что такое blend для visual studio
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 у вас могут быть и другие компоненты установлены, это нормальное явление. Часто мы ставим разные проги, и вместе с ними ставятся еще какие-то.. так бы сказать вспомогательные. А бывает еще ставится софт от Маил ру, от Яндекса..))
Blend for Visual Studio overview
Blend for Visual Studio helps you design XAML-based Windows and Web applications. It provides the same basic XAML design experience as Visual Studio and adds visual designers for advanced tasks such as animations and behaviors. For a comparison between Blend and Visual Studio, see Design XAML in Visual Studio and Blend for Visual Studio.
Blend for Visual Studio is a component of Visual Studio. To install Blend, in the Visual Studio Installer choose either the Universal Windows Platform development or .NET desktop development workload. Both of these workloads include the Blend for Visual Studio component.
В В В В 
If you’re new to Blend for Visual Studio, take a moment to become familiar with the unique features of the workspace. This topic takes you on a quick tour.
Tools panel
You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. The Tools panel appears on the left-hand side of the XAML designer when you have a .xaml file open.
You create the objects by selecting a tool and drawing on the artboard with your mouse.
Some of the tools in the Tools panel have variations, for example, instead of a rectangle, you can choose an ellipse or a line. To access these variations, right-click or click and hold on the tool.
Selection tools
Select objects and paths. Use the Direct Selection tool to select nested objects and path segments.
View tools
Adjust the view of the artboard, such as for panning and zooming.
Brush tools
Work with the visual attributes of an object, such as transforming a brush or applying a gradient.
Object tools
Draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls.
Asset tools
Access the Assets window and show the most recently used asset from the library.
Assets window
The Assets window contains all the available controls and is similar to the Toolbox in Visual Studio. In addition to controls, you’ll find everything you can add to your artboard in the Assets window, including styles, media, behaviors, and effects. To open the Assets window, choose View > Assets Window or press Ctrl+Alt+X.
Objects and Timeline window
Use this window to organize the objects on your artboard and, if you want, to animate them. To open the Objects and Timeline window, choose View > Document Outline. In addition to the functionality provided in the Document Outline window in Visual Studio, the Objects and Timeline window in Blend for Visual Studio has a timeline composition area on the right. Use the timeline when you’re creating and editing animations.
Hover over each button in the window to learn more about the available functionality.
Обзор 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 справа есть область композиции временной шкалы. Временную шкалу следует использовать при создании и редактировании анимаций.
Наведите указатель на каждую кнопку в окне, чтобы получить дополнительные сведения о доступных функциях.
sergrnz
Blend for Visual Studio 2012. Знакомство (XAML)
Blend — это отличный помощник при разработке приложений. Он предоставляет область конструирования, а так же средства, с помощью которых можно визуально создавать приложения. Blend облегчает работу с анимацией, с ресурсами, с пользовательскими контролами, с представлением данных и т.п. Помимо всего прочего он содержит редактор кода.
Далее я поведаю немного в ознакомительных целях об этом замечательном средстве разработки своими словами.
Blend идет в комплекте с Visual Studio и если у тебя есть версия, хотя бы Express, то значит у тебя есть и Blend.
Для того, чтобы начать знакомство, создадим проект. Поскольку речь пойдет о работе с Windows Store приложениями созданными на XAML, то выбираем соответствющие опции:
На панели инструментов, та, что слева, выберем прямоугольник. Обрати внимание, что в правом нижнем углу, где прямоугольник, присутствует маленький треугольничек.
Это означает, что в данном месте могут быть выбраны другие фигуры/инструменты и т.п. Для этого нужно нажать левой кнопкой мыши и подержать некоторое время, либо просто нажав правой кнопкой мыши 🙂 Раскроется дополнительная панель инструментов:
В дополнительной панели можно выбать другие инструменты рисования.
Нарисовать прямоугольник можно следующими способами:
нажать два раза на его иконку на панели инструментов, либо нарисовать на области визуального проектирования (visual design surface), зажав левую кнопку мыши:
Вернем свой взор на панель инструментов и на иконки в виде курсоров. Это Selection Tool и Direct Selection Tool:
Смысл у них примерно одинаковый: выбор объекта. Разница в том, что использование Selection Tool предоставляет больше манипуляций с нарисованным объектом: изменять размеры, угол наклона и д.р. Изменять положение объекта на области дизайна могут оба инструмента.
…и нарисуем его в свободной области:
Подвинем эллипс поближе к прямоугольнику, до тех пор пока не увидим красные линии:
Пунктирная линия — это snap line, а сплошная линия – отступ (margin). Первая помогает позиционировать объект относительно другого объекта, а вторая — вымерять отступ (margin) относительно другого объекта. Настроить отступ по умолчанию можно в опциях:
Обратим внимание на панель Objects and timeline. Здесь в данный момент отображается визуальное дерево элементов:
Основной элемент — Window. Далее дочерний — разметка Grid с именем «LayoutRoot», в котором в свою очередь содержатся два дочерних: прямоугольник и эллипс. Слева от каждого объекта есть по два значка: первый позволяет визуально убирать объект с области дизайна (он не удаляется, а просто не показывается), а второй — блокировать объект от изменений.
Выберем прямоугольник и обратим внимание на вкладку Properties справа. Это как не трудно догадаться — свойства выбранного объекта. Выберем новый цвет заливки элемента:
А так же выберем новый цвет границы прямоугольника и зададим толщину этой границы:
Выберем инструмент Selection tool, левой кнопкой мыши щелкнем два раза на textblock, удалим текст и напишем новый, например: «Expression Blend». Выделим второе слово и изменим его цвет c помощью свойства Foreground и увеличим размер шрифта во вкладке Text. Сделаем его равным 48.
В Expression Blend помимо визуального редактирования, доступен редактор кода. Отображать его можно как вместе с областью визуального дизайна, так и самостоятельно:
Взглянем на XAML код того, что нарисовали. Здесь мы может видеть те изменения, которые сделали в визуальном режиме. Blend автоматически сгенерировал XAML код для нас.
Присвоем разметке Grid новое имя “LayoutRoot”:
Помимо XAML так же можно посмотреть C# код, но все же для этого лучше воспользоваться непосредственно VisualStudio. Тем более, что возможность открыть текущий проект присутствует в Blend:
Прежде, чем запустить проект, взглянем на вкладку Device:
На этой вкладке можно выбрать различные варианты представления, такие как: Landscape, Filled, Snapped, Portrait, чтобы посмотреть как будет выглядеть приложение в таких случаях. Так же можно выбрать разрешение экрана визуального дизайна, тему и др.
На этом завершим пожалуй знакомство с 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.