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

2025-06-10

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

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

Общие сведения о кисти

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

Различные типы кистей:

Сплошные цветовые кисти

SolidColorBrush покрывает область одним цветом, например, красным или синим. Это самая простая кисть. В XAML существует три способа определения SolidColorBrush и цвета, который он задает: предопределенные имена цветов, шестнадцатеричные значения цвета или синтаксис элемента свойства.

Предопределенные имена цветов

Можно использовать предварительно определенное имя цвета, например желтый или magenta. Существует 256 доступных именованных цветов. Анализатор XAML преобразует имя цвета в структуру с правильными цветовыми каналами. 256 именованных цветов основаны на X11 цветов из спецификации Каскадных таблиц стилей, уровня 3 (CSS3), поэтому вы уже знакомы с этим списком именованных цветов, если у вас есть предыдущий опыт разработки веб-приложений или дизайна.

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

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

Отрисованный SolidColorBrush

SolidColorBrush применяется к прямоугольнику

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

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

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

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

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

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

Синтаксис свойства элемента можно использовать для определения SolidColorBrush. Этот синтаксис более подробный, чем предыдущие методы, но можно указать дополнительные значения свойств для элемента, например непрозрачности. Дополнительные сведения о синтаксисе XAML, включая синтаксис элементов свойств, см. в обзоре XAML и руководстве по синтаксису XAML.

В предыдущих примерах создаваемая кисть создается неявно и автоматически, как часть осознанного сокращения на языке XAML, что помогает держать определения пользовательского интерфейса простыми для наиболее распространенных случаев. В следующем примере создается прямоугольник и явным образом создается SolidColorBrush как значение элемента для свойства Rectangle.Fill. Для цвета SolidColorBrush установлено значение Blue, а непрозрачность задана на уровне 0.5.

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

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

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

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

Свойство цвета градиентной точки Color указывает цвет этой точки. Можно задать цвет с помощью предопределенного имени цвета или указав шестнадцатеричные значения ARGB.

Свойство OffsetGradientStop указывает положение каждого GradientStop вдоль оси градиента. смещения — это двойной, который составляет от 0 до 1. Смещение 0 помещает GradientStop в начале оси градиента, другими словами, рядом с StartPoint. смещение из 1 помещает GradientStop в EndPoint. Как минимум, полезный LinearGradientBrush должен иметь два значения GradientStop, где каждое GradientStop должно указывать разный цвет и иметь различное смещение от 0 до 1.

В этом примере создается линейный градиент с четырьмя цветами, и он используется для рисования прямоугольника .

<!-- 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 значения, отличные от значений и запуска по умолчанию. Изменив значения координат StartPoint и EndPoint, можно создать горизонтальные или вертикальные градиенты, изменить направление градиента или сжать разброс градиента, чтобы он применялся к меньшему диапазону, чем полная окрашенная область. Чтобы сжать градиент, следует задать значения StartPoint и/или EndPoint так, чтобы они находились в диапазоне значений от 0 до 1. Например, если требуется горизонтальный градиент, где затухание полностью происходит на левой половине кисти, а правая сторона остается сплошной до последнего цвета, заданного в GradientStop, укажите начальную точку на (0,0) и конечную точку на (0.5,0).

Использование средств для создания градиентов

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

Создание линейного градиента в Visual Studio

создание линейного градиента в Visual Studio

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

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

Ползунок настройки градиента

Радиальные градиентные кисти

RadialGradientBrush рисуется в многоточии, определяемой свойствамиЦентра , 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 трех свойств обрабатываются как абсолютные координаты в пределах элемента.

<!-- 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 и и задает источник изображения на изображение, названное licorice.jpg, которое необходимо включить в качестве ресурса в приложение. ImageBrush затем рисует область, определенную фигурой эллипса.

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

отрисованная кисть изображения.

Отрисованная кисть изображения

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

Кисти и текст

Вы также можете использовать кисти для применения характеристик отрисовки к текстовым элементам. Например, свойство Foreground элемента TextBlock принимает Кисть. К тексту можно применить любую из кистей, описанных здесь. Однако будьте осторожны с кистями, примененными к тексту, так как любой фон может сделать текст нечитаемым, если вы используете кисти, которые сливаются с фоном. Используйте SolidColorBrush для удобочитаемости текстовых элементов в большинстве случаев, если не требуется, чтобы текстовый элемент был в основном декоративным.

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

WebViewBrush

WebViewBrush — это специальный тип кисти, который может получить доступ к содержимому, обычно просматриваемого в элементе управления WebView. Вместо отрисовки содержимого в прямоугольной области управления WebViewWebViewBrush красит содержимое на другой элемент, имеющий свойство Кисти-type для поверхности отрисовки. WebViewBrush не подходит для всех случаев использования кисти, но полезен при переходах в WebView. Дополнительные сведения см. в WebViewBrush.

XamlCompositionBrushBase

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

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

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

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

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

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

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

Кисти в коде

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

Чтобы создать 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 SourceName или если содержимое WebView также изменяется с помощью кода.

Примеры кода см. в разделе WebViewBrush, ImageBrushи XamlCompositionBrushBase.