майкрософт бленд для визуал студио что это
Что такое 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
Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс, помогающий проектировать приложения на основе XAML, такие как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна «Панель элементов» (окно «Ресурсы» в Blend для Visual Studio) и задавая свойства в окне «Свойства». Также можно изменить код XAML непосредственно в представлении XAML.
Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.
Рабочая область конструктора XAML
Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно «Структура документа» (окно «Объекты и временная шкала» в Blend для Visual Studio) и окно «Свойства». Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.
В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. Вы можете нажать кнопку Переставить панели
, чтобы поменять окно, которое отображается поверх другого: область рисования или редактор XAML.
Конструктор
В режиме конструктора окно, содержащее область рисования, является активным окном, которое можно использовать в качестве основной рабочей области. С его помощью можно визуально создавать страницы приложения, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML. На этом рисунке показана область рисования в режиме конструктора.
В области рисования доступны следующие функции.
Линии привязки
Границы сетки
Границы сетки служат для управления строками и столбцами на панели Сетка. Вы можете создавать и удалять строки и столбцы, а также изменять их относительную ширину и высоту. Вертикальная граница сетки, которая отображается в левой части области рисования, используется для строк, а горизонтальная линия, которая появляется вверху, — для столбцов.
Графические элементы сетки
Графический элемент сетки отображается как треугольник с вертикальной или горизонтальной линией, присоединенной к границе сетки. При перетаскивании графического элемента сетки ширина или высота смежных столбцов или строк изменяется по мере движения мыши.
Графические элементы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув границу сетки. При добавлении новой строки или столбца для панели сетки, которая содержит два и более столбцов или строк, за пределами границы появляется мини-панель инструментов, позволяющая задать ширину и высоту явным образом. С помощью мини-панели инструментов можно задавать размеры строк и столбцов сетки.
Маркеры изменения размера
Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.
Margins
Графические элементы полей
Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).
Маркеры элемента
Вы можете изменить элемент с помощью его маркеров, которые появляются в области рисования при наведении указателя мыши на углы синего ограничивающего прямоугольника. Эти маркеры позволяют выполнить поворот, изменение размера или зеркальное отражение, перемещение или добавление радиуса скругления угла к элементу. Символ маркера элемента зависит от функции и меняется в зависимости от расположения указателя. Если вы не видите маркеры элемента, убедитесь, что элемент выделен.
В представлении Конструктор в левой нижней части окна доступны дополнительные команды области рисования, как показано ниже:
На этой панели инструментов доступны следующие команды:
Масштаб
Команда «Масштаб» позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.
Показать/скрыть сетку привязки
Показывает или скрывает сетку привязки, которая отображает линии сетки. Линии сетки используются при включении привязки к линиям сетки или привязки к линиям привязки.
Включить/выключить привязку к линиям сетки
Если Привязка к сетке включена, элемент будет выровняться с ближайшими горизонтальными и вертикальными линиями сетки при перетаскивании на монтажную панель.
Переключить фон области рисования
Выполняет переключение между светлым и темным фоном.
Включить/выключить привязку к линиям привязки
Линии привязки помогают выравнивать элементы управления относительно друг друга. Если привязка к линиям привязки включена, при перетаскивании элемента управления относительно других элементов появляются границы выравнивания, когда края и текст некоторых элементов управления выровнены по горизонтали или вертикали. Граница выравнивания отображается в виде красной пунктирной линии.
Отключить код проекта
Отключает код проекта, например пользовательские элементы управления и преобразователи величин, и выполняет перезагрузку конструктора.
Представление XAML
В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:
Окно Структура документа
Окно «Структура документа» в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:
Просматривать иерархическую структуру всех объектов в области рисования.
Выберите элементы, чтобы их можно было изменить. Например, можно переместить их в иерархии или задать их свойства в окно свойств. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.
Создавать и изменять шаблоны для элементов управления.
Создавать анимации (только Blend для Visual Studio).
чтобы открыть окно «структура документа» в Visual Studio, в строке меню выберите вид > другие Windows > структура документа. чтобы просмотреть окно Объекты и временная шкала в Blend для Visual Studio, в строке меню выберите просмотр > структуры документа.
В основном представлении окна «Структура документа» или «Объекты и временная шкала» отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. В окне «Структура документа/Объекты и временная шкала» доступны следующие параметры:
Показать/скрыть
Заблокировать или разблокировать
Вернуть для области значение pageRoot
Параметр в верхней части окна «Структура документа» или «Объекты и временная шкала» со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.
Окно «Свойства»
Окно Свойства позволяет задавать значения свойств для элементов управления. Вот как оно выглядит:
В верхней части окна » Свойства » есть различные параметры:
Некоторые свойства позволяют задать дополнительные свойства, для этого нужно нажать кнопку со стрелкой вниз.
Справа от значения каждого свойства отображается метка свойства в виде квадрата. Внешний вид метки свойства указывает, применены ли к свойству привязка данных или ресурс. Например, белый квадрат указывает значение по умолчанию, черный квадрат обычно указывает, что был применен локальный ресурс, а оранжевый квадрат обычно указывает, что была применена привязка данных. Щелкнув метку свойства, можно перейти к определению стиля, открыть построитель привязки данных или открыть средство выбора ресурсов.
Дополнительные сведения об использовании свойств и обработке событий см. в статье Введение в работу с элементами управления и шаблонами.
Обзор 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 справа есть область композиции временной шкалы. Временную шкалу следует использовать при создании и редактировании анимаций.
Наведите указатель на каждую кнопку в окне, чтобы получить дополнительные сведения о доступных функциях.
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 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.