Кисти в WPF

2021-10-20

Кисти в WPF

Автор: Махеш Чанд (Mahesh Chand)

В этой статье рассматриваются типы кистей, которые можно найти в WPF, и их использование в приложениях.

Введение

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

WPF и XAML работают вместе, и каждому элементу управления XAML соответствует класс WPF. Например, тег <SolidColorBrush> в XAML и класс SolidColorBrush в WPF представляют сплошную одноцветную кисть. Можно создавать и использовать кисти как одним из этих способов, так и смешивая их. Например, я могу создать кисть с помощью XAML, а затем устанавливать свойство этой же кисти динамически с помощью модели классов WPF.

В модели WPF и XAML предоставляются следующие объекты кистей.

SolidColorBrush (сплошная одноцветная кисть)
LinearGradientBrush (линейная градиентная кисть)
RadialGradientBrush (радиальная градиентная кисть)
DrawingBrush (кисть для рисования)
Visual Brush (визуальная кисть)
ImageBrush (кисть изображения)

1. Сплошная одноцветная кисть

Тег <SolidColorBrush> представляет сплошную одноцветную кисть в XAML. Атрибут Color тега представляет цвет, используемый в кисти. Например, следующий код создает сплошную синюю кисть.

Вместо названия цвета в атрибуте Color можно также указывать шестнадцатеричное значение. В следующем коде цвет задается шестнадцатеричным значением.

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

<Rectangle Width="200" Height="40" Stroke="Blue" StrokeThickness="1">
    <Rectangle.Fill>
        <SolidColorBrush Color="#000000" />
    </Rectangle.Fill>
</Rectangle>

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

Рисунок 1. Прямоугольник, закрашенный сплошной кистью

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

Объект <LinearGradientBrush> представляет линейную градиентную кисть в XAML.

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

<Rectangle Width="200" Height="40" Stroke="Blue" StrokeThickness="3">
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Green"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Результат показан на рисунке 2.

Рисунок 2. Прямоугольник, закрашенный линейной градиентной кистью

3. Радиальная градиентная кисть

Тег <RadialGradientBrush> представляет радиальную градиентную кисть в XAML. Радиальная градиентная кисть обеспечивает градиент, аналогичный линейной градиентной кисти, но линейная градиентная кисть имеет начальную и конечную точки, и смешивание выполняется от начала до конца, в то время как радиальная градиентная кисть имеет окружность.

В радиальной градиентной кисти задаются начало и центр градиента, значения X, Y радиуса окружности и атрибут GradientStop, указывающий цвет градиента.

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

<Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="2">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.1,0.4" Center="0.6,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="Black" Offset="0.20" />
            <GradientStop Color="Yellow" Offset="0.40" />
            <GradientStop Color="Pink" Offset="0.60" />
            <GradientStop Color="Blue" Offset="0.80" />
            <GradientStop Color="Green" Offset="1.0" />
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Результат показан на рисунке 3.

Рисунок 3. Прямоугольник, закрашенный радиальной градиентной кистью

4. Кисть для рисования

Кисть для рисования — это новое дополнение к типам кистей, появившееся в GDI+. Кисть для рисования можно использовать для заливки области фигурами, текстом, изображениями и даже видео. Тег <DrawingBrush> представляет кисть для рисования в XAML. Кисть для рисования использует объекты рисования GeomertyDrawing, ImageDrawing, VideoDrawing и GylphRunDrawing для рисования фигур, изображений, видео и текста соответственно.

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

<Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="2">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Green">
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                            <EllipseGeometry RadiusX="0.1" RadiusY="0.5" Center="0.5,0.5" />
                            <EllipseGeometry RadiusX="0.5" RadiusY="0.1" Center="0.5,0.5" />
                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

Результат показан на рисунке 4.

Рисунок 4. Прямоугольник, заполненный с помощью кисти для рисования

5. Визуальная кисть

VisualBrush (визуальная кисть) — это новое дополнение к типам кистей, появившееся в GDI+. Визуальная кисть используется для заполнения элементов пользовательского интерфейса. Следующий код использует визуальную кисть для заполнения прямоугольника. Объект VisualBrush, его методы и свойства более подробно будут рассматриваться в моей отдельной статье.

<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <VisualBrush TileMode="Tile">
            <VisualBrush.Visual>
                <StackPanel>
                    <StackPanel.Background>
                        <DrawingBrush>
                            <DrawingBrush.Drawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Brush>
                                        <RadialGradientBrush>
                                            <GradientStop Color="Green" Offset="0.0" />
                                            <GradientStop Color="White" Offset="1.0" />
                                        </RadialGradientBrush>
                                    </GeometryDrawing.Brush>
                                    <GeometryDrawing.Geometry>
                                        <GeometryGroup>
                                            <RectangleGeometry Rect="0,0,50,50" />
                                            <RectangleGeometry Rect="50,50,50,50" />
                                        </GeometryGroup>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </StackPanel.Background>
                    <TextBlock FontSize="14pt" FontWeight="Bold" Margin="10">Visual Brush</TextBlock>
                </StackPanel>
            </VisualBrush.Visual>
        </VisualBrush>
    </Rectangle.Fill>
</Rectangle>

Результат показан на рисунке 5.

Рисунок 5. Прямоугольник, заполненный с помощью визуальной кисти

Дополнительные сведения по визуальным кистям см. в статье "Visual Brush in WPF" ("Визуальная кисть в WPF") Раджа Кумара (Raj Kumar).

6. Кисть изображения

Кисть изображения использует изображение в качестве цвета заполнения для заполнения таких графических объектов, как прямоугольник, эллипс и полоса. Тег <ImageBrush> представляет кисть изображения в XAML. Свойство BitmapSource представляет изображение, используемое кистью для заполнения.

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

<Rectangle Width="100" Height="100" Stroke="Black" StrokeThickness="3">
    <Rectangle.Fill>
        <ImageBrush ImageSource="Milk.jpg"/>
    </Rectangle.Fill>
</Rectangle>

Результат показан на рисунке 6.

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

Выводы

В этой статье я рассматривал кисти, имеющиеся в модели WPF и XAML. Очевидно, начиная с GDI+, в кистях модели WPF и XAML появилось некоторое количество усовершенствований и дополнений.

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

Дополнительные ресурсы