Задание цветов, кистей и масок в Blend

Изменение визуального вида объекта — это основная задача в приложении Blend для Visual Studio. С помощью свойств в категориях Внешний вид и Кисти на панели Свойства можно изменять цвет штрихов, цвет заливки, прозрачность и видимость выбранного объекта. В зависимости от типа объекта, выбранного в проекте Blend, свойства в категориях Внешний вид и Кисти динамически настраиваются в соответствии к содержимым объекта, отображая соответствующие визуальные атрибуты.

Общие свойства внешнего вида

Многие изменения внешнего вида объекта связаны с применением кистей к определенным свойствам. Эти свойства описаны в приведенной ниже таблице.

Задает кисть, применяемую к области внутри фигуры или контура.

Задает кисть, применяемую к очертанию (границе) фигуры или контура.

Задает кисть, которая применяется к фону объекта. Это свойство обычно применяется к фону элементов управления, отображающих текст, таких как Button или TextBlock.

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

Задает кисть, которая применяется к границе некоторых элементов управления.

Задает непрозрачность всего объекта.

Определяет, является ли объект видимым или скрытым во время выполнения. Видимость родительского объекта может также влиять на дочерние объекты.

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

Кисти

Кисти используются для задания внешнего вида объекта на монтажной панели. Например, можно использовать одноцветную синюю кисть для заполнения прямоугольника (как на приведенном ниже первом изображении). Кисти бывают нескольких форм, от простых одноцветных или градиентных кистей до более сложных мозаичных кистей. В следующей таблице описываются кисти, предусмотренные в приложении Blend. Кроме того, можно использовать вариант Нет кисти , чтобы удалить весь цвет из выбранного свойства. Например, чтобы создать контур прямоугольника, можно задать для свойства Fill прямоугольника значение Нет кисти, а для свойства Stroke задать вариант Одноцветная кисть.

Содержит один цвет.

Линейная градиентная кисть

Содержит линейный градиент цвета.

Кисть радиального градиента

Содержит радиальный градиент цвета.

Создается из изображения. Слева направо показаны: исходная кисть изображения, кисть изображения в мозаике и перевернутая кисть изображения.

Создается из векторного рисунка. Слева направо показаны: исходная кисть рисунка, кисть рисунка в мозаике и перевернутая кисть рисунка.

Создается из элемента управления, такого как кнопка. Слева направо: исходная кнопка и кисть, где Режим плиток имеет значение Плитка. Обратите внимание, что визуальные кисти могут уменьшить производительность выполняемого приложения из-за сложности элемента управления, который используется для создания визуальной кисти.

Ресурсы кистей

После создания кисти на объекте можно преобразовать кисть в ресурс, который затем можно применить к другим объектам.

Ресурсы кистей не ограничены одной кистью или цветовыми свойствами. Можно создать ресурс кисти, используя несколько объектов на монтажной панели. Можно даже создать кисть VisualBrush, которая меняет внешний вид во время выполнения, если изменяются объекты, из которых она была создана.

Можно создавать словари ресурсов для кистей, что позволяет использовать их в рамках проекта или даже в других проектах.

Цвет и цветовые пространства

Blend включает в себя редактор цвета в категории Кисти на панели Свойства. Редактор цветов также отображается при изменении ресурса кистей на панели Ресурсы. В редакторе цветов, помимо шестнадцатеричного режима (#AARRGGBB), предусмотрены следующие 4 цветовые пространства.

RGB Красный (0-255), зеленый (0-255), синий (0-255).

HLS Оттенок (цветовой круг 360 градусов), освещенность (0 – 100 процентов), насыщенность (0 – 100 процентов).

HSB Оттенок (цветовой круг 360 градусов), насыщенность (0 – 100 процентов), яркость (0 – 100 процентов).

CMYK Голубой (0 – 100 процентов), пурпурный (0 – 100 процентов), желтый (0 – 100 процентов), черный (0 – 100 процентов).

Для переключения между цветовыми пространствами щелкните одну из подчеркнутых букв в текущем цветовом пространстве, чтобы открыть контекстное меню других цветовых пространств.

Инструменты "Пипетка" и "Заливка"

В приложении Blend предусмотрены два инструмента, специально предназначенные для копирования и применения атрибутов объектов. При использовании инструментов Пипетка и Заливка копируются или применяются следующие свойства.

Кисти — передний план, фон, кисть границы, заливка, штрих и маска непрозрачности.

Внешний вид — непрозрачность, толщина штриха, ограничение соединения штрихов, наконечник начала линии штриха, наконечник конца линии штриха, соединение линий штриха и штриховой наконечник штриха.

Текст — семейство шрифтов, размер шрифта, насыщенность шрифта, стиль шрифта, оформление текста, высота строки, отступ текста и выравнивание текста.

Копирует внешний вид другого объекта в текущий выбранный объект или объекты.

Копирует внешний вид текущего выбранного объекта или объектов в другой объект.

Дополнительные сведения об инструментах Пипетка и Заливка см. в разделе Копирование и применение атрибутов к объекту в Blend.

При изменении одноцветной кисти или ступеней градиента градиентной кисти в правом нижнем углу редактора цвета отображается пипетка выбора цвета . Если выбрать эту пипетку, можно зафиксировать образец цвета из любой точки рабочего стола и применить его к выбранной кисти. Для отмены действия пипетки можно в любой момент нажать клавишу ESC.

Градиенты

Градиенты позволяют применять к объекту градиентные смешения цветов для получения плавных цветовых переходов и придания объекту большей глубины. Например, такой объект можно использовать в качестве фона, когда объект с левой стороны содержит один цвет, который постепенно переходит в белый цвет с правой стороны объекта. Это позволяет создать две различные области на однородном в остальных отношениях объекте.

Для создания градиента щелкните Градиентная кисть в категории Кисти на панели Свойства. Щелкните Кисть линейного градиента иРадиальный градиент в редакторе цвета для переключения между двумя типами градиентных кистей. Оба типа градиентных кистей можно использовать для создания градиентных заливок, градиентных штрихов, текста с заданным градиентом для свойства Foreground или градиентного фона для любого объекта, имеющего свойство Background.

Если выбран параметр Градиентная кисть, инструмент Пипетка выбора цвета в разделе Редактор превращается в инструмент Пипетка градиента . Когда выбран инструмент Пипетка градиента, при наведении указателя мыши на цвет в приложении Blend или на рабочем столе этот цвет отображается в виде предварительного просмотра в выбранной ступени цвета. Если щелкнуть цвет с помощью инструмента Пипетка градиента, цвет применяется к выбранной ступени градиента. Кроме того, инструмент Пипетка градиента можно перетащить на существующий градиент (внутри приложения Blend или на рабочем столе), чтобы применить градиент к существующему объекту.

При перетаскивании пипетки градиента через существующий градиент он дублируется в приложении Blend

При применении градиента к объекту отображаются значки ступеней градиента . Можно изменить цвет каждой ступени градиента и добавить на ползунок любое требуемое число ступеней градиента, просто щелкая ползунок градиента. И наоборот, можно легко удалить больше не нужные ступени, перетащив их вниз с ползунка градиента (при перетаскивании через стороны или верхний край ползунка ступени не удаляются). Можно также изменить значение смещения для выбранной ступени градиента, перетаскивая ступени вдоль линии градиента или изменяя значение в поле Смещение выбранной ступени градиента.

Чтобы обратить градиент, щелкните Обратить ступени градиента . К предыдущей и следующей ступеням градиента можно переходить при помощи стрелок Выбрать предыдущую ступень градиента и Выбрать следующую ступень градиента .

Чтобы применить градиент к нескольким объектам, выберите все объекты, к которым требуется применить градиент, затем примените градиент.

Щелкните Показать дополнительные свойства , чтобы просмотреть дополнительные свойства, которые можно изменить непосредственно на панели Свойства.

В случае свойств кисти линейного градиента на панели Свойства можно изменять следующие свойства.

StartPoint Задает координаты начальной точки линейного градиента.

EndPoint — задает координаты конечной точки линейного градиента.

MappingMode — определяет позиционирование градиентной кисти по абсолютным координатам или относительно ограничивающего прямоугольника.

SpreadMethod Задает способ рисования градиента, который начинается или заканчивается внутри ограничивающего прямоугольника. Если задано значение Pad, цвета наружных ступеней градиента расширяются до внешней границы объекта. Если выбрано значение Reflect, производится зеркальное отражение градиентной заливки. Если выбрано значение Repeat, градиентная заливка повторяется.

Opacity Задает уровень непрозрачности градиентной кисти.

В случае кисти радиального градиента на панели Свойства можно менять следующие свойства:

GradientOrigin — определяет координаты начала градиента.

Center — определяет внешний радиальный градиент.

RadiusX — определяет горизонтальный радиус внешнего круга радиального градиента.

RadiusY — определяет вертикальный радиус внешнего круга радиального градиента.

MappingMode — определяет позиционирование градиентной кисти по абсолютным координатам или относительно ограничивающего прямоугольника.

SpreadMethod Задает способ рисования градиента, который начинается или заканчивается внутри ограничивающего прямоугольника. Если задано значение Pad, цвета наружных ступеней градиента расширяются до внешней границы объекта. Если выбрано значение Reflect, производится зеркальное отражение градиентной заливки. Если выбрано значение Repeat, градиентная заливка повторяется.

Opacity Задает уровень непрозрачности градиентной кисти.

Для обоих типов градиентных кистей свойство RelativeTransform можно также изменять на панели Свойства, выбирая следующие вкладки в поле RelativeTransform и изменяя связанные значения:

Перенести

Повернуть

Масштаб

Наклонить

Перевернуть

Линейные и радиальные градиентные кисти можно также изменять на монтажной панели с помощью инструмента Градиент или инструмента Преобразование кисти . Дополнительные сведения см. ниже в разделах "Инструмент "Градиент"" и "Инструмент "Преобразование кисти"".

Инструмент "Градиент"

Чтобы изменить заливку, штрих или маску непрозрачности градиентной кисти, примененной к объекту непосредственно на монтажной панели, выберите свойство кисти на панели Свойства, затем выберите инструмент Градиент на панели Инструменты.

Если объект выделен на монтажной панели, нажмите клавишу G, чтобы выбрать инструмент Градиент .

На монтажной панели отображается стрелка, которую можно использовать для изменения градиента. Начальная и конечная точки стрелки соответствуют ступеням градиента на одном из концов шкалы цветов. Ступени градиента отображаются кругами с голубыми границами и такой же внутренней заливкой, что и градиент.

Стрелка линейного градиента

Стрелка радиального градиента

Если щелкнуть мышью ступень градиента, она выбирается, и выбор обозначается жирной синей границей. Если дважды щелкнуть ступень градиента, отображается палитра цветов, с помощью которой можно изменить цвет выбранной ступени градиента.

Ступень градиента можно добавить, щелкнув в любой точке на стрелке. Ступень градиента можно удалить, щелкнув круг, обозначающий ступень градиента, и стащив его со стрелки.

Свойства градиента можно также изменять следующими способами.

Перетаскивая начальную или конечную точку, удерживайте клавишу SHIFT, чтобы ограничить перемещение прямой линией между начальной и конечной точками.

При перемещении всей стрелки удерживайте клавишу SHIFT, чтобы ограничить перемещение плоскостью X или Y.

При повороте начальной или конечной точки удерживайте клавишу SHIFT для привязки через каждые 15 градусов.

При перетаскивании начальной или конечной точки удерживайте клавишу ALT для одновременного перемещения обеих конечных точек с сохранением положения центральной точки.

Инструмент "Преобразование кисти"

Инструмент Преобразование кисти изменяет свойство RelativeTransform ресурса кисти, включая свойство RelativeTransform для линейного и радиального градиента. Инструмент Преобразование кисти изменяет кисть, выбранную на панели Кисть, и применяется к объекту, выбранному на монтажной панели.

Чтобы изменить преобразование кисти, примененной к объекту непосредственно на монтажной панели, выберите свойство кисти на панели Свойства, затем выберите инструмент Преобразование кисти на панели Инструменты.

Если объект выделен на монтажной панели, нажмите клавишу B, чтобы выбрать инструмент Преобразование кисти .

Вокруг объекта отображается графический элемент (синяя граница). Если объект выбран с помощью инструмента Преобразование кисти, выбранный объект можно изменить следующими способами.

Чтобы переместить кисть, перетащите указатель мыши в любом месте внутри объекта. Это соответствует вкладке Преобразование в области RelativeTransform на панели Свойства.

Чтобы повернуть кисть, поместите указатель мыши около любого из углов контура снаружи объекта и перетаскивайте указатель, пока он не превратится в маркер поворота . Это соответствует вкладке Поворот в области RelativeTransform на панели Свойства.

Чтобы изменить масштаб мозаичной кисти или кисти радиального градиента, поместите указатель на любой из маркеров на стороне или углу объекта и перетащите маркер. Это соответствует вкладке Масштаб в области RelativeTransform на панели Свойства.

Чтобы наклонить кисть, поместите указатель снаружи от бокового маркера и тащите его, пока указатель не превратится в маркер наклона . Это соответствует вкладке Наклонить в области RelativeTransform на панели Свойства.

Можно также перевернуть преобразование. На панели Свойства в категории Кисть щелкните Показать дополнительные свойства . В области RelativeTransform выберите вкладку Перевернуть, затем щелкните Перевернуть по оси X или Перевернуть по оси Y.

Усечение

При преобразовании кисти некоторые части объекта иногда обрезаются (т. е. не отображаются части, которые находятся за пределами ограничивающего прямоугольника). Проблемы с обрезкой можно устранить приведенными ниже способами.

Снимите флажок свойства ClipToBounds в разделе Внешний вид панели Свойства.

Используйте свойства в категории LayoutTransform вместо RenderTransform в разделе Преобразование на панели Свойства. Это особенно полезно при преобразовании визуальной кисти.

Strokes

Мазки — это границы для объектов. Помимо стилей углового соединения и наконечников, можно изменять примененную кисть (сплошная, градиентная или мозаичная), непрозрачность, ширину и ограничение по срезу штриха для объекта. Мазки для объекта всегда применяются поверх заполнения, даже если заполнение не применено к данному объекту. Чтобы можно было внести изменения в штрих объекта, в списке раздела Кисти на панели Свойства должен быть выбран элемент Stroke. Выберите одно из следующих значений.

Ширина штриха Ширина штриха объекта изменяется в пикселях (или в аппаратно-независимых единицах, равных приблизительно 1/96 дюйма) и может принимать значения от 0 до половины ширины или высоты фигуры. Обычно после того как толщина штриха становится равной половине ширины или высоты фигуры, штрих полностью занимает область заливки. Значение ширины штриха можно задавать с помощью свойства StrokeThickness в категории Внешний вид на панели Свойства.

Угловые соединения Для объектов, имеющих острые углы (например, прямоугольников), можно изменить способ отображения штрихов в каждой угловой точке, применив один из трех стилей угловых соединений: фацетное соединение , скругленное соединение и скошенное соединение . Стиль угловых соединений можно задавать с помощью свойства StrokeLineJoin в категории Внешний вид на панели Свойства.

Ограничение фацетного соединения Ограничение фацетного соединения определяет, насколько далеко может выступать угловая точка фацетного соединения, прежде чем угол будет автоматически обрезан в скошенное соединение. Ограничение фацетного соединения можно задавать с помощью свойства StrokeMiterLimit в категории Внешний вид на панели Свойства. На следующем рисунке показаны три угла со свойством StrokeThickness, равным 40, и свойством StrokeMiterLimit, равным 1 , 2,2 и 4 . Величина угла и толщина штриха определяют визуальный эффект ограничения фацетного соединения.

Наконечники Для контуров, содержащих несоединенные концы (таких как линии), можно изменить вид штриха на каждом из концов, применив один из четырех стилей наконечников: плоский наконечник , круглый наконечник , квадратный наконечник и треугольный наконечник . Стиль наконечников можно задавать с помощью свойства StrokeEndLineCap или StrokeStartLineCap в категории Внешний вид на панели Свойства.

StrokeDashArray StrokeDashArray — штрих с шаблоном штрихов и пробелов. StrokeDashCap и StrokeDashOffset — это свойства, которые применяются непосредственно к StrokeDashArray.

На следующем изображении представлен один прямоугольник с параметром StrokeDashArray, имеющим значение 5 4 (первая цифра — длина штриха, вторая — длина пробела), параметром StrokeDashCap со значением Round и параметром StrokeDashOffset (расстояние, с которого начинается штрих, заданное в шаблоне штрихов) со значением 2.

Непрозрачность и видимость

При уменьшении непрозрачности объекта увеличивается его прозрачность, что позволяет видеть другие объекты, находящиеся позади этого объекта. Непрозрачность управляется альфа-каналом, в котором хранятся все данные о прозрачности объекта, градиенте или маске непрозрачности. В следующей таблице описываются 3 метода, которые можно выбрать для изменения непрозрачности объекта.

Opacity Изменение прозрачности всего объекта, включая все визуальные атрибуты объекта. На изображении справа показано значение непрозрачности, равное 60 проценту.

Transparency Задает значение альфа (A) отдельного атрибута кисти для объекта (например, заливка или штрих) немного прозрачным без необходимости изменения всех атрибутов одного объекта. На изображении справа показано, что только заливка эллипса является более прозрачной, так как значение альфа для заливки установлено равным 50 %. Для штрихов эллипса сохраняется значение 100 процентов.

Visibility Позволяет в разное время скрывать или отображать объект. Это особенно эффективно в анимации, когда не требуется полностью удалять объект с монтажной панели. На изображении справа для левого объекта с синей заливкой и толстым черным штрихом, который присутствовал на двух предыдущих изображениях из этой таблицы, задано значение Hidden.