Редактор кистей

79

В редакторе кистей, доступном в области Brushes на панели Properties, вы можете подбирать цвета для рисования границ элементов пользовательского интерфейса, а так же для заполнения их внутреннего пространства. Этот редактор пригоден для работы с любым элементом пользовательского интерфейса, включая формы, элементы управления, диспетчеры компоновки или целые объекты типа Window на платформе WPF либо объекты типа UserControl на платформе Silverlight.

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

В самой верхней области редактора кистей находится список свойств раскраски кистью графического элемента, выделенного на монтажном столе. Как показано на рисунке, для шестиугольника, представленного базовым объектом типа RegularPolygon, доступны три таких свойства: Fill (Заливка), Stroke (Обводка) и OpacityMask (Маска непрозрачности). Щелкнув на любом из этих свойств, вы сможете настроить соответствующую кисть, используемую для раскраски:

Выбор кисти

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

Далее по порядку следует вкладка Solid color brush (Кисть для раскраски сплошным цветом), позволяющая подобрать единственный сплошной цвет раскраски кистью для выбранного свойства, используя интуитивный селектор цвета.

Непременно уделите хотя бы немного времени исследованию различных функциональных возможностей редактора кисти для раскраски сплошным цветом. В частности, в правом нижнем углу окна этого редактора находится инструмент Color Eyedropper (Пипетка для отбора цвета) (показана на рисунке), с помощью которого вы сможете отбирать цвет из любого элемента, на котором щелкнули мышью, — даже из тех элементов, которые находятся за пределами рабочего окна Expression Blend IDE!

Инструмент Color Eyedropper

Допустим, вам требуется отобрать цвет отдельной папки на рабочем столе Windows. Для этого достаточно выбрать инструмент Color Eyedropper и щелкнуть на интересующем вас графическом элементе непосредственно на рабочем столе Windows.

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

Редактор кисти для раскраски градиентом

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

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

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

Несколько маркеров градиентной заливки

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

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

И наконец, в редакторе кисти для раскраски градиентом используется инструмент Gradient, находящийся на панели Tools и выбираемый нажатием оперативной клавиши <G>.

В качестве упражнения выберите на монтажном столе геометрическую форму со свойством Fill, в котором используется кисть для раскраски градиентом, а затем нажмите оперативную клавишу <G>. С зтого момента вы можете определить точку начала отсчета градиента и переставить по своему усмотрению маркеры выбора цветов с помощью инструмента Gradient.

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

<ed:RegularPolygon.Fill>
		<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
					<GradientStop Color="#FF0AF7E7" Offset="0.589"/>
					<GradientStop Color="#FF9815D8" Offset="0.875"/>
					<GradientStop Color="#FFF70A0A" Offset="0.012"/>
					<GradientStop Color="#FFF7610A" Offset="0.13"/>
					<GradientStop Color="#FFDFF70A" Offset="0.297"/>
					<GradientStop Color="#FF48F70A" Offset="0.433"/>
					<GradientStop Color="#FF0A15C5" Offset="0.746"/>
		</LinearGradientBrush>
</ed:RegularPolygon.Fill>

Последней в редакторе кистей и рассматриваемой здесь является вкладка Tile brush (Кисть для мозаичной раскраски). Этот тип кисти позволяет раскрашивать поверхность исходя из данных изображения, находящегося в специально указанном внешнем графическом файле с расширением .bmp, .tif, .jpeg и т.д. Итак, выберите какую-нибудь другую геометрическую форму (или создайте новую) на монтажном столе, выделите ее и щелкните на вкладке Tile brush. А затем настройте свойство ImageSource этой формы используя кнопку Choose an image (Выбрать изображение), как показано на рисунке:

Выбор источника для мозаичной кисти

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

Надеюсь, теперь вы чувствуете себя достаточно уверенно, создавая кисти, задаваемые для различных свойств раскраски кистью (Fill, Stroke и пр.) в среде Expression Blend IDE. Далее будут рассмотрены способы объединения геометрических форм для образования новых объектов типа Path.

Пройди тесты
Лучший чат для C# программистов