Обзор кистей WPF
Все видимое на экране видно, потому что оно было окрашено кистью. Например, кисть используется для описания фона кнопки, переднего плана текста и заливки фигуры. В этом разделе приводятся основные понятия рисования с помощью кистей Windows Presentation Foundation (WPF) и приведены примеры. Кисти позволяют рисовать объекты пользовательского интерфейса с помощью простых, сплошных цветов до сложных наборов шаблонов и изображений.
Рисование с помощью кисти
Brush с помощью своих выходных данных "красит" область. Разные кисти имеют разные типы выходных данных. Некоторые кисти красят область сплошным цветом, другие — градиентом, узором, изображением или рисунком. На следующем рисунке показаны примеры каждого из различных типов Brush.
Примеры кисти
Большинство визуальных объектов позволяют указать, как они окрашены. В следующей таблице перечислены некоторые распространенные объекты и свойства, с помощью которых можно использовать Brush.
| Класс | Свойства кисти |
|---|---|
| Border | BorderBrush, Background |
| Control | Background, Foreground |
| Panel | Background |
| Pen | Brush |
| Shape | Fill, Stroke |
| TextBlock | Background |
В следующих разделах описаны различные типы Brush и пример каждого из них.
Окрашивание сплошным цветом
SolidColorBrush закрашивает область сплошным цветом Color. Существует множество способов указать ColorSolidColorBrush: например, можно указать альфа-, красный, синий и зеленый каналы или использовать один из предопределенных цветов, предоставляемых классом Colors.
В следующем примере используется SolidColorBrush для рисования Fill для Rectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, окрашенный с помощью SolidColorBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As New SolidColorBrush(Colors.Red)
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<SolidColorBrush Color="Red" />
</Rectangle.Fill>
</Rectangle>
Дополнительные сведения о классе SolidColorBrush см. в Обзор рисования сплошными цветами и градиентами.
Рисовать с линейным градиентом
LinearGradientBrush красит область с линейным градиентом. Линейный градиент объединяет два или более цветов по линии, градиентная ось. Объекты GradientStop используются для указания цветов в градиенте и их позициях.
В следующем примере используется LinearGradientBrush для рисования FillRectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, окрашенный с помощью LinearGradientBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a LinearGradientBrush and use it to
' paint the rectangle.
Dim myBrush As New LinearGradientBrush()
myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Дополнительные сведения о классе LinearGradientBrush см. в рисовании с помощью сплошных цветов и обзоров Градиентов.
Краска с радиальным градиентом
RadialGradientBrush красит область радиальным градиентом. Радиальный градиент объединяет два или более цветов по кругу. Как и в случае с классом LinearGradientBrush, используйте объекты GradientStop для указания цветов в градиенте и их позициях.
В следующем примере RadialGradientBrush используется для раскрашивания Fill на Rectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, закрашенный с использованием радиального градиентного кисти
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a RadialGradientBrush and use it to
' paint the rectangle.
Dim myBrush As New RadialGradientBrush()
myBrush.GradientOrigin = New Point(0.75, 0.25)
myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
Дополнительные сведения о классе RadialGradientBrush см. в обзоре Рисование с использованием сплошных цветов и градиентов.
Живопись с использованием изображения
ImageBrush красит область с ImageSource.
В следующем примере используется ImageBrush для рисования Fill у Rectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, окрашенный с помощью изображения
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource =
new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create an ImageBrush and use it to
' paint the rectangle.
Dim myBrush As New ImageBrush()
myBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<ImageBrush ImageSource="sampleImages\pinkcherries.jpg" />
</Rectangle.Fill>
</Rectangle>
Дополнительную информацию о классе ImageBrush см. в разделе «Рисование с помощью изображений, рисунков и визуальных элементов».
Рисование с помощью рисунка
DrawingBrush красит область с Drawing. Drawing может содержать фигуры, изображения, текст и мультимедиа.
В следующем примере используется DrawingBrush для рисования FillRectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, окрашенный с помощью DrawingBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();
GeometryDrawing backgroundSquare =
new GeometryDrawing(
Brushes.White,
null,
new RectangleGeometry(new Rect(0, 0, 100, 100)));
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a DrawingBrush and use it to
' paint the rectangle.
Dim myBrush As New DrawingBrush()
Dim backgroundSquare As New GeometryDrawing(Brushes.White, Nothing, New RectangleGeometry(New Rect(0, 0, 100, 100)))
Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As New LinearGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Black, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.Gray, 1.0))
Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
Dim checkersDrawingGroup As New DrawingGroup()
checkersDrawingGroup.Children.Add(backgroundSquare)
checkersDrawingGroup.Children.Add(checkers)
myBrush.Drawing = checkersDrawingGroup
myBrush.Viewport = New Rect(0, 0, 0.25, 0.25)
myBrush.TileMode = TileMode.Tile
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50" />
<RectangleGeometry Rect="50,50,50,50" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
Дополнительные сведения о классе DrawingBrush см. в разделе Работа с изображениями, рисунками и визуальными элементами.
Рисование с визуальной составляющей
VisualBrush рисует область с объектом Visual. Примеры визуальных объектов включают Button, Pageи MediaElement. Кроме того, VisualBrush позволяет проектировать содержимое из одной части приложения в другую область; Это очень полезно для создания эффектов отражения и увеличения частей экрана.
В следующем примере используется VisualBrush для рисования FillRectangle. На следующем рисунке показан окрашенный прямоугольник.
Прямоугольник, окрашенный с помощью VisualBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;
// Create a VisualBrush and use it
// to paint the rectangle.
VisualBrush myBrush = new VisualBrush();
//
// Create the brush's contents.
//
StackPanel aPanel = new StackPanel();
// Create a DrawingBrush and use it to
// paint the panel.
DrawingBrush myDrawingBrushBrush = new DrawingBrush();
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
RadialGradientBrush checkerBrush = new RadialGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
myDrawingBrushBrush.Drawing = checkers;
aPanel.Background = myDrawingBrushBrush;
// Create some text.
TextBlock someText = new TextBlock();
someText.Text = "Hello, World";
FontSizeConverter fSizeConverter = new FontSizeConverter();
someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
someText.Margin = new Thickness(10);
aPanel.Children.Add(someText);
myBrush.Visual = aPanel;
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75
' Create a VisualBrush and use it
' to paint the rectangle.
Dim myBrush As New VisualBrush()
'
' Create the brush's contents.
'
Dim aPanel As New StackPanel()
' Create a DrawingBrush and use it to
' paint the panel.
Dim myDrawingBrushBrush As New DrawingBrush()
Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As New RadialGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.MediumBlue, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.White, 1.0))
Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
myDrawingBrushBrush.Drawing = checkers
aPanel.Background = myDrawingBrushBrush
' Create some text.
Dim someText As New TextBlock()
someText.Text = "Hello, World"
Dim fSizeConverter As New FontSizeConverter()
someText.FontSize = CDbl(fSizeConverter.ConvertFromString("10pt"))
someText.Margin = New Thickness(10)
aPanel.Children.Add(someText)
myBrush.Visual = aPanel
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
<Rectangle.Fill>
<VisualBrush TileMode="Tile">
<VisualBrush.Visual>
<StackPanel>
<StackPanel.Background>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<RadialGradientBrush>
<GradientStop Color="MediumBlue" 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="10pt" Margin="10">Hello, World!</TextBlock>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
Для получения дополнительной информации о классе VisualBrush см. раздел "Рисование с помощью изображений, рисунков и визуальных элементов".
Рисуйте, используя предопределённые и системные кисти
Для удобства Windows Presentation Foundation (WPF) предоставляет набор предопределенных и системных кистей, которые можно использовать для рисования объектов.
Для получения списка доступных предопределенных кистей см. класс Brushes. Пример использования предопределенной кисти см. в разделе Рисование области с помощью сплошного цвета.
Для получения списка доступных системных кистей см. класс SystemColors. Для примера см. в разделе Закрасьте область с помощью системной кисти.
Общие функции кисти
Brush объекты имеют свойство Opacity, которое можно использовать, чтобы сделать кисть прозрачной или частично прозрачной. Значение Opacity 0 делает кисть полностью прозрачной, а значение Opacity 1 делает кисть полностью непрозрачной. В следующем примере свойство Opacity используется для того, чтобы сделать SolidColorBrush непрозрачным на 25 процентов.
<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Blue" Opacity="0.25" />
</Rectangle.Fill>
</Rectangle>
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
= new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;
Если кисть содержит цвета, которые частично прозрачны, значение непрозрачности цвета умножается на значение непрозрачности кисти. Например, если кисть имеет значение непрозрачности 0,5, а цвет, используемый в кисти, также имеет значение непрозрачности 0,5, выходной цвет имеет значение непрозрачности 0,25.
Заметка
Более эффективно изменить значение непрозрачности кисти, чем изменение непрозрачности всего элемента с помощью его свойства UIElement.Opacity.
Можно повернуть, масштабировать, наклонить и переместить содержимое кисти с помощью свойств Transform или RelativeTransform. Для получения дополнительной информации см. обзор преобразования кисти.
Поскольку они являются объектами Animatable, Brush объекты могут быть анимированы. Для получения дополнительной информации смотрите раздел Обзор анимации.
Замораживаемые функции
Поскольку он наследует от класса Freezable, класс Brush предоставляет несколько специальных возможностей: объекты Brush можно объявлять как ресурсы , использовать совместно несколькими объектами и клонировать. Кроме того, все типы Brush, кроме VisualBrush, можно сделать доступными только для чтения, чтобы повысить производительность и обеспечить безопасность потоков.
Для получения дополнительной информации о различных особенностях, предоставляемых объектами Freezable, см. обзор объектов Freezable .
Дополнительные сведения о том, почему объекты VisualBrush нельзя заморозить, смотрите на странице типа VisualBrush.
См. также
.NET Desktop feedback