Использование кистей для рисования фона, переднего плана и контуров

Статья
07/13/2023

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

Важные API: класс Кисти

Знакомство с кистями

Чтобы закрасить фигуру, текст или части элемента управления, отображаемые на полотне приложения, задайте для объекта фигуры свойство Заливка или для свойства элемента управления Фон и Передний план значение Кисть.

Существуют различные типы кистей:

Кисти сплошной заливки

Объект SolidColorBrush закрашивает область одним цветом (Color), например красным или синим. Это самая простая кисть. Объект SolidColorBrush и его цвет можно задать в XAML тремя способами: стандартным названием цвета, шестнадцатеричным значением цвета или в синтаксисе свойств.

Стандартные имена цветов

Можно использовать стандартное имя цвета, например Yellow или Magenta. Доступно 256 цветов с именами. Средство синтаксического анализа XAML преобразует имя цвета в структуру Color с правильными цветовыми каналами. 256 именованных цветов основаны на именах цветов X11 из каскадных таблиц стилей версии 3 (CSS3). Если у вас есть опыт веб-разработки или дизайна, возможно, вы уже знакомы со списком именованных цветов.

В следующем примере в свойстве Fill объекта Rectangle задается стандартный цвет Red.

<Rectangle Width="100" Height="100" Fill="Red" />

Отображение SolidColorBrush

Объект SolidColorBrush, примененный к прямоугольнику

При определении SolidColorBrush с помощью кода вместо XAML каждый именованный цвет доступен в виде статического значения свойства класса Colors. Например, чтобы объявить значение свойства Color объекта SolidColorBrush для представления именованного цвета Orchid, задайте в качестве значения Color статическое значение Colors.Orchid.

Шестнадцатеричные значения цвета

Можно использовать строку в шестнадцатеричном формате для объявления точных 24-битных значений цвета с 8-битным альфа-каналом для SolidColorBrush. Два символа в диапазоне от 0 до F определяют значение каждого из компонентов. Порядок значений компонентов в шестнадцатеричной строке следующий: альфа-канал (непрозрачность), красный, зеленый и синий каналы (ARGB). Например, шестнадцатеричное значение "#FFFF0000" определяет полностью непрозрачный красный (alpha="FF", red="FF", green="00", и blue="00").

Этот пример XAML задает свойство Fill прямоугольника шестнадцатеричным значением "#FFFF0000", а также дает идентичный результат использованию именованного цвета Colors.Red.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Синтаксис элемента свойства

Объект SolidColorBrush можно определить в синтаксисе элементов свойств. Этот способ не такой компактный, как предыдущие, но позволяет задавать дополнительные значения свойств для элемента, например Opacity. Подробнее о синтаксисе XAML, в том числе синтаксисе элементов свойств, можно узнать в статьях Обзор языка XAML и Руководство по основам синтаксиса языка XAML.

В предыдущих примерах создаваемая кисть создается неявно и автоматически как часть произвольного условного обозначения на языке XAML, что помогает сохранять простоту определения пользовательского интерфейса в большинстве случаев. В следующем примере создается Rectangle, а затем явно создается SolidColorBrush как значение элемента для свойства Rectangle.Fill. Свойство Color объекта SolidColorBrush получает значение Blue, а свойство Opacity — значение 0,5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

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

Объект LinearGradientBrush закрашивает область градиентом, который определяется вдоль линии. Эта линия называется осью градиента. Цвета градиента и их расположение по оси градиента задаются с помощью объектов GradientStop. По умолчанию ось градиента проходит из левого верхнего в правый нижний угол области, закрашиваемой кистью, в результате чего получается диагональное затенение.

Градиентная кисть состоит из стандартных элементов GradientStop. Ограничение градиента указывает, какое значение Color для кисти устанавливается в позиции Offset вдоль оси градиента при применении кисти к закрашиваемой области.

Цвет ограничения градиента задается в его свойстве Color. Цвет можно задать, используя стандартное имя или шестнадцатеричное значение ARGB.

Свойство Offset объекта GradientStop задает положение каждого GradientStop вдоль оси градиента. Значение Offset имеет тип double и находится в диапазоне от 0 до 1. Значение Offset, равное 0, помещает GradientStop в начало оси градиента, иными словами, вблизи его начальной точки StartPoint. Значение Offset, равное 1, помещает GradientStop в конечную точку EndPoint. Объект LinearGradientBrush должен иметь по меньшей мере два значения GradientStop, где каждый элемент GradientStop определяет разные свойства Color и имеет разные значения Offset между 0 и 1.

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

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

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

Схема: позиции градиента с 1 по 4, с верхнего левого угла и до правого нижнего угла схемы

Сочетание цветов, заданных двумя соседними позициями градиента

Вы можете изменить строку, в которой остановлен градиент, задав свойства StartPoint и EndPoint значения, отличные от (0,0) значений и (1,1) запуска по умолчанию. Изменяя значения координат StartPoint и EndPoint, можно создать горизонтальные и вертикальные градиенты, обратить направление градиента или сжать охват градиента, применив его к меньшему диапазону, чем полная закрашенная область. Чтобы сжать градиент, следует задать значения StartPoint и (или) EndPoint, отличные от 0 и 1. Например, если требуется горизонтальный градиент, где затухание цвета происходит на левой половине кисти, а с правой стороны используется сплошной цвет последнего GradientStop, следует указать для StartPoint значение (0,0), а для EndPoint — значение (0.5,0).

Создание градиента с помощью средств

Теперь, когда вы знаете, как работают линейные градиенты, вам будет легче создавать их с помощью Visual Studio или Blend. Чтобы создать градиент, выделите в рабочей области конструирования или в представлении XAML объект, к которому нужно применить градиент. Разверните раздел Кисть и выберите вкладку Линейный градиент.

Создание линейного градиента с помощью Visual Studio

Создание линейного градиента с помощью Visual Studio

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

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

Ползунок параметра градиента

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

Объект RadialGradientBrush заполняет область изображением внутри эллипса, который определяется свойствами Center, RadiusX и RadiusY. Начальный цвет градиента определяется в центре эллипса, а конечный — в конце радиуса.

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

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

MappingMode определяет, представляют ли свойства Center, RadiusX, RadiusY и GradientOrigin относительные или абсолютные координаты.

Если MappingMode имеет значение RelativeToBoundingBox, значения X и Y этих трех свойств обрабатываются как значения, которые относятся к границам элементов, где (0,0) представляет верхние левые, а (1,1) — нижние правые границы элементов для свойств Center, RadiusX и RadiusY, а (0,0) представляет центральную точку свойства GradientOrigin.

Если MappingMode имеет значение Absolute, то значения X и Y этих трех свойств обрабатываются как абсолютные координаты в пределах границ элемента.

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

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

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

Снимок экрана: радиальный градиент

Градиентные остановки

Кисти изображений

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

По умолчанию ImageBrush растягивает изображение так, чтобы полностью закрыть закрашиваемую область. При этом изображение может искажаться, если пропорции области отличаются от пропорций изображения. Чтобы исключить такое искажение, измените в свойстве Stretch значение по умолчанию Fill на None, Uniform или UniformToFill.

В следующем примере создается объект ImageBrush, а в свойстве ImageSource задается изображение с именем licorice.jpg, которое необходимо включить в приложение в качестве ресурса. Затем ImageBrush закрашивает область, определенную формой Ellipse.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Отображение ImageBrush.

Отображение ImageBrush

ImageBrush и Image ссылаются на исходный файл изображения по универсальному коду ресурса (URI). Для этого файла допустимы несколько графических форматов. Такие исходные файлы изображений указываются в виде URI. См. сведения об определении источников изображений, их возможных форматах и упаковке в приложении в описании классов Image и ImageBrush.

Кисти и текст

С помощью кистей также можно применить характеристики отрисовки к текстовым элементам. Например, свойство Foreground объекта TextBlock принимает объект Brush. К тексту можно применить любую из описанных здесь кистей. Но кисти следует применять к тексту с осторожностью, так как любой фон может сделать текст нечитаемым, если использовать кисти, сливающиеся с фоном. Для обеспечения читаемости текстовых элементов в большинстве случаев ограничьтесь объектом SolidColorBrush, если только не нужно намеренно придать декоративность текстовому элементу.

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

WebViewBrush

Объект WebViewBrush — это специальный тип кисти, которому доступно содержимое, обычно просматриваемое в элементе управления WebView. Вместо отрисовки содержимого в прямоугольной области элемента управления WebView объект WebViewBrush выводит это содержимое поверх другого элемента со свойством типа Brush для поверхности отрисовки. Объект WebViewBrush подходит не для каждого сценария использования кисти, но его удобно использовать при переходах WebView. Дополнительные сведения см. в статье о WebViewBrush.

XamlCompositionBrushBase

XamlCompositionBrushBase – это базовый класс, который используется для создания настраиваемых кистей, использующих CompositionBrush для рисования элементов пользовательского интерфейса XAML.

Это включает "нисходящее" взаимодействие между слоями Windows.UI.Xaml и Windows.UI.Composition, как описано в статье о визуальном уровне.

Чтобы создать настраиваемую кисть, создайте новый класс, производный от XamlCompositionBrushBase и реализующий необходимые методы.

Например, она может использоваться для применения эффектов к элементам пользовательского интерфейса XAML с помощью CompositionEffectBrush, например GaussianBlurEffect или SceneLightingEffect, который контролирует отражающие свойства UIElement XAML при его освещении с помощью XamlLight.

Примеры кода см. в статье о XamlCompositionBrushBase.

Кисти как ресурсы XAML

Любую кисть можно объявить ресурсом XAML с ключом в словаре ресурсов XAML. Это облегчает репликацию одинаковых значений кистей при применении ко многим элементам пользовательского интерфейса. Затем значения кистей предоставляются в общий доступ и применяются при обращении к ресурсу кисти в виде {StaticResource} в языке XAML. Сюда относится и использование шаблона элемента управления XAML, ссылающегося на общую кисть, когда сам этот шаблон элемента управления является ресурсом XAML с ключом.

Определение кистей в коде

Обычно кисти указываются с помощью XAML, а не определяются в коде. Это связано с тем, что кисти обычно определяются как ресурсы XAML, а значения кистей часто являются результатами работы инструментов проектирования или входят в определение пользовательского интерфейса XAML. Но иногда удобно определить кисть в кода, и все типы Brush будут доступными для создания экземпляра в коде.

Чтобы создать SolidColorBrush в коде, используйте конструктор, который принимает параметр Color. Передайте значение, которое является статическим свойством класса Colors, например:

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

Для WebViewBrush и ImageBrush используйте конструктор по умолчанию. Затем, прежде чем вы попытаетесь использовать эту кисть для свойства пользовательского интерфейса, вызовите другие API.

ImageSource требует BitmapImage (а не URI), когда вы определяете ImageBrush с помощью кода. Если источником является поток, для инициализации значения используйте метод SetSourceAsync. Если источником является универсальный код ресурса (URI), который включает в себя используемое в вашем приложении содержимое со схемами ms-appx или ms-resource, используйте конструктор BitmapImage, который применяет универсальный код ресурса (URI). Также можно обрабатывать события ImageOpened, если существуют проблемы со своевременным получением или декодированием источника изображения, когда вы решите отображать альтернативное содержимое, пока источник изображения не станет доступным.
Для WebViewBrush вам может понадобиться вызвать Redraw, если вы недавно сбросили свойство SourceName или если содержимое WebView также было изменено в коде.

Примеры кода см. в статьях о WebViewBrush, ImageBrush и XamlCompositionBrushBase.

Поделиться через