Продолжаем публиковать e-Lectures — небольшие видеолекции от наших мобильных разработчиков.
Сегодня речь пойдет о работе с инструментом Blend для Visual Studio. Он помогает проектировать и создавать пользовательские интерфейсы, предоставляя точные средства и рабочую область конструирования, с помощью которых можно визуально создавать и изменять приложения.
Как быстро интегрировать макеты от дизайнера в приложение? Чего не хватает в визуальном редакторе XAML в Visual Studio? Почему иногда совершенно не обойтись без Blend? Как мы используем Blend в e-Legion? Об этом и о многом другом расскажет наш ведущий Windows-разработчик — Тимур garifzyanov Гарифзянов.
- Блог компании e-legion
- Разработка под Windows Phone
Источник: habr.com
Blend for Visual Studio 2012. Знакомство (XAML)
Blend — это отличный помощник при разработке приложений. Он предоставляет область конструирования, а так же средства, с помощью которых можно визуально создавать приложения. Blend облегчает работу с анимацией, с ресурсами, с пользовательскими контролами, с представлением данных и т.п. Помимо всего прочего он содержит редактор кода.
Blend for Visual Studio 2022 (Getting Started)
Далее я поведаю немного в ознакомительных целях об этом замечательном средстве разработки своими словами.
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. Про него в одной статье особо много не расскажешь, поэтому буду дополнять новым материалами. Но это будет позже
Источник: sergrnz.wordpress.com
Что такое microsoft blend
Продолжаем публиковать e-Lectures — небольшие видеолекции от наших мобильных разработчиков.
Сегодня речь пойдет о работе с инструментом Blend для Visual Studio. Он помогает проектировать и создавать пользовательские интерфейсы, предоставляя точные средства и рабочую область конструирования, с помощью которых можно визуально создавать и изменять приложения.
Как быстро интегрировать макеты от дизайнера в приложение? Чего не хватает в визуальном редакторе XAML в Visual Studio? Почему иногда совершенно не обойтись без Blend? Как мы используем Blend в e-Legion? Об этом и о многом другом расскажет наш ведущий Windows-разработчик — Тимур garifzyanov Гарифзянов.
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 Visual C++ (VCRedist), и вот если он не установлен, то некоторые программы тоже могут не работать.
- Если вы устанавливали Visual Studio 2017, то Microsoft Blend мог установиться просто как дополнительный компонент, а пользоваться им или нет — решать вам.
- Можно ли удалять? Можно. Будут ли проблемы? Думаю возможно. Учитывая то, что компонент никак не грузит комп, то я бы посоветовал его оставить, чтобы не создать проблемы на голом месте))
В общем немного стало понятно.. и тут вдруг я случайно нашел статью на англоязычной Википедии по поводу 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 для 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 для разработки пользовательского интерфейса вашего приложения? Дайте нам знать в разделе комментариев ниже.
Разработка с помощью Microsoft Expression Blend
В моей предыдущей статье мы рассмотрели 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 является то, что это подмножество .NET. Это означает, что разработчики .NET могут воспользоваться своими существующими навыками при разработке многофункциональных приложений для Интернета, и что все разработчики могут воспользоваться преимуществами богатой среды инструментов и платформ для .NET, предоставляемых Microsoft и другими. Приложения Silverlight, основанные на .NET, чаще всего кодируются на C # или Visual Basic .NET, но могут разрабатываться на различных языках, поддерживаемых .NET, включая IronRuby, IronPython и JavaScript.
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: секретный соус
Когда я работал в Microsoft, одним из наших ключевых сообщений был улучшенный рабочий процесс дизайнер-разработчик, который понравился дизайнерам, использующим Blend, и разработчикам, использующим Visual Studio. Дизайнеры и разработчики могут одновременно работать над одним и тем же проектом в Blend и Visual Studio. Дизайнеры любят это, потому что это делает их полноправными членами команды проекта, позволяя им вносить равный вклад в проект, а не восприниматься как посторонние, которые должны полагаться на доброту разработчиков, чтобы увидеть свою работу реализованной.
Декларативные пользовательские интерфейсы с XAML
Основой Silverlight и WPF является язык определения пользовательского интерфейса XAML. XAML — это язык на основе XML для определения содержимого, макета и поведения пользовательских интерфейсов. На рисунке 1 «В основе вашего опыта Silverlight лежит язык XAML на основе XML» показан элемент интерфейса кнопки и соответствующий код XAML, который создает кнопку.
Хотя синтаксис и механика языка сильно отличаются от HTML, его намерения аналогичны. Именно XAML делает возможными инструменты проектирования пользовательского интерфейса, такие как Blend. Как дизайнеру, стоит понять основы работы XAML. Хотя обычно нет необходимости иметь возможность кодировать в XAML (я пока не нашел в этом необходимости), может быть полезно иметь возможность читать XAML, чтобы помочь отладить любое необъяснимое поведение в вашем проекте.
Рисунок 1. В основе вашего опыта Silverlight лежит язык XAML на основе XML
Из SketchFlow для смешивания
В первой статье мы узнали, что SketchFlow позволяет нам создавать прототипы «поверх» Blend. Одним из преимуществ этого подхода является то, что вы можете взять свой изначально отрывочный прототип и развить его до уровня, когда он будет очень близок к финальному опыту в SketchFlow. Вы даже можете подключить свой прототип к реальному внутреннему коду. Прототип, который мы создали в предыдущей статье, показан на рисунке 2, «Наш прототип SketchFlow» .
Рисунок 2. Наш прототип SketchFlow
Естественный вопрос, который нужно задать в этот момент, заключается в том, можете ли вы превратить свой прототип SketchFlow в рабочий проект, когда будете готовы. Ответ да, вроде …
Прототип SketchFlow — это проект Blend, как и любой другой. В дополнение к элементам, которые вы определяете сами, SketchFlow предоставляет скрытые механизмы для подключения всего, реализации карты SketchFlow, предоставления стилей SketchFlow и, конечно, создания кода, необходимого для проигрывателя SketchFlow. Чтобы преобразовать прототип SketchFlow в производственный проект, у вас есть два варианта:
Удалите все части проекта SketchFlow. Для этого есть инструкции в файлах справки Blend.
Соберите активы, которые вы хотите сохранить, и эффективно скопируйте и вставьте их в новый проект.
Для всех проектов, кроме самых простых, я бы порекомендовал вариант 2. Во-первых, он гарантирует, что в вашем проекте не осталось никаких кусочков SketchFlow. Во-вторых, будучи частью прототипа, ваши экраны, вероятно, довольно небрежны по производственным стандартам. Весь смысл быстрого прототипирования означает, что вы, вероятно, на самом деле не задумывались о таких вопросах, как компоновка, ограничение, изменение размера, именование или хорошие архитектурные практики. По этой причине вам, вероятно, лучше просто просмотреть свой прототип и скопировать элементы (экраны, компоненты, анимации и т. Д.), Которые вы хотите использовать в качестве отправной точки для своего производственного проекта.
В нашем случае прототип настолько прост, что мы можем просто начать заново.
Давайте начнем
Как мы узнали в прошлый раз, когда мы запускаем Expression Blend, у нас есть возможность начать новый проект. На этот раз вместо выбора приложения Silverlight 3 SketchFlow мы создадим настоящий веб-сайт приложения Silverlight 3 + , как показано на рисунке 3, «Выбор подходящего типа проекта» .
Похожие публикации:
- Как инвертировать двоичное число
- Как купить яндекс станцию по подписке в рассрочку
- Как сделать айфон как новый
- Как убрать нули перед числом в ячейках excel
Источник: big-soviet.ru