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

  • Статья

Обновлен: Ноябрь 2007

Все отображаемые на экране объекты являются видимыми, так как они нарисованы кистью. Например, кисть используется для описания фона кнопки, основного цвета текста и заполнения фигуры. В этом разделе представлены механизмы рисования с помощью кистей 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
Прямоугольник, закрашенный с помощью 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;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Дополнительные сведения о классе SolidColorBrush см. в разделе Общие сведения о закраске сплошным цветом и градиентом.

Закрашивание линейным градиентом

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

В следующем примере LinearGradientBrush используется для закрашивания Fill фигуры Rectangle. Закрашенный прямоугольник показан на следующем рисунке.

Прямоугольник, закрашенный с помощью LinearGradientBrush
Прямоугольник, закрашенный с помощью 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;

<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. Закрашенный прямоугольник показан на следующем рисунке.

Прямоугольник, закрашенный с использованием RadialGradientBrush
Прямоугольник, закрашенный с использованием RadialGradientBrush

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;

<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. Закрашенный прямоугольник показан на следующем рисунке.

Прямоугольник, закрашенный с использованием изображения
Прямоугольник, созданный при помощи ImageBrush

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;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

Дополнительные сведения о классе ImageBrush см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Закрашивание рисованием

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

В следующем примере DrawingBrush используется для закрашивания Fill фигуры Rectangle. Закрашенный прямоугольник показан на следующем рисунке.

Прямоугольник, закрашенный с помощью DrawingBrush
Прямоугольник, закрашенный с помощью 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;

<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 см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Закрашивание с помощью Visual

VisualBrush закрашивает область с помощью объекта Visual. В число объектов Visual входят объекты Button, Page и MediaElement. VisualBrush также позволяет переносить содержимое из одной части приложения в другую область, что может быть полезным при создании эффекта отражения и увеличения части экрана.

В следующем примере VisualBrush используется для закрашивания Fill фигуры Rectangle. Закрашенный прямоугольник показан на следующем рисунке.

Прямоугольник, закрашенный с использованием VisualBrush
Прямоугольник, закрашенный с использованием 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;


<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 см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Рисование с помощью готовых и системных кистей

Для удобства WPF (Windows Presentation Foundation) предоставляет набор готовых и система кистей, которые можно использовать для закрашивания объектов.

Общие средства кисти

Объекты 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.

Aa970904.alert_note(ru-ru,VS.90).gifПримечание.

Эффективнее изменить значение непрозрачности кисти, чем прозрачность целого элемента через его свойство UIElement.Opacity.

Содержимое кисти можно поворачивать, масштабировать, наклонять и преобразовывать с помощью свойств Transform или RelativeTransform. Дополнительные сведения см. в разделе Общие сведения о преобразованиях объекта Brush.

Как объекты Animatable, объекты Brush могут быть анимированы. Дополнительные сведения см. в разделе Общие сведения об эффектах анимации.

Возможности объектов Freezable

Поскольку он наследуется от класса Freezable, класс Brush предоставляет несколько особенных возможностей: объекты класса Brush можно объявлять ресурсами, которые могут совместно использоваться несколькими объектами или клонироваться. Кроме того, все типы Brush, за исключением VisualBrush, могут быть объявлены типами только для чтения для повышения производительности и обеспечения безопасности для потоков.

Дополнительные сведения о различных возможностях, предоставляемых объектами Freezable, см. в разделе Общие сведения об объектах класса Freezable.

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

См. также

Задачи

Пример использования кистей

Пример использования ImageBrush

Пример использования DrawingBrush

Пример использования VisualBrush

Основные понятия

Общие сведения о закраске сплошным цветом и градиентом

Рисование с помощью объектов Image, Drawing и Visual

Общие сведения об объектах класса Freezable

Оптимизация производительности. Дополнительные рекомендации

Ссылки

Brush

Brushes

Другие ресурсы

Разделы практического руководства, посвященные кистям