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

  • Статья

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

В этом разделе описано использование объектов SolidColorBrush, LinearGradientBrush и RadialGradientBrush для закраски сплошным цветом, линейным градиентом и радиальным градиентом.

В этом разделе содержатся следующие подразделы.

  • Закраска области сплошным цветом
  • Закраска области градиентом
  • Линейный градиент
  • Радиальные градиенты
  • Задание прозрачных или частично прозрачных позиций градиента
  • Закраска с использованием изображений, рисунков, визуализаций и шаблонов
  • Связанные разделы

Закраска области сплошным цветом

Одной из наиболее общих операций в любой платформе является закраска области сплошным Color. Для выполнения этой задачи Windows Presentation Foundation (WPF) предоставляет класс SolidColorBrush. В следующих разделах описаны различные способы закраски с помощью SolidColorBrush.

Использование SolidColorBrush в «XAML»

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

  • Выберите стандартную сплошную цветную кисть по имени. Например, можно установить для Background кнопки значение «Red» или «MediumBlue». Список других стандартных сплошных цветных кистей содержатся в разделе статических свойств класса Brushes. Пример.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using a named color. -->
<Button Background="Red">A Button</Button>

  • Выберите цвет из 32-разрядной цветовой палитры, указав количество красного, зеленого и синего компонентов для объединения в один сплошной цвет. Формат для указания цвета из 32-разрядной палитры имеет вид «*#RRGGBB*», где RR — две цифры шестнадцатеричного числа, задающего относительный объем красного цвета, GG задает объем зеленого, а BB задает объем синего цвета. Кроме того, цвет может быть указан в виде «#AARRGGBB»,где AA указывает значение альфа, или прозрачность, цвета. Этот подход позволяет создавать частично прозрачные цвета. В следующем примере для Background элемента управленияButton устанавливается значение полностью непрозрачного красного цвета с помощью шестнадцатеричного формата.

    <!-- This button's background is painted with a red SolidColorBrush,
     described using hexadecimal notation. -->
<Button Background="#FFFF0000">A Button</Button>

  • Используйте синтаксис тега свойства для описания SolidColorBrush. Этот синтаксис является более подробным, но он позволяет указать дополнительные параметры, такие как непрозрачность кисти. В следующем примере для свойств Background двух элементов Button устанавливается значение полностью непрозрачного красного. Цвет первой кисти описан с использованием имени стандартного цвета. Цвет второй кисти описаны с помощью шестнадцатеричного формата.

    <!-- Both of these buttons' backgrounds are painted with red 
     SolidColorBrush objects, described using object element
     syntax. -->
<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="Red" />
  </Button.Background>
</Button>

<Button>A Button

  <Button.Background>
    <SolidColorBrush Color="#FFFF0000" />
  </Button.Background>
</Button>

Закраска с помощью SolidColorBrush в коде

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

  • Воспользуйтесь одной из стандартных кистей, предоставленных классом Brushes. В следующем примере свойство Background элемента управления Button установлено в значение Red.

    Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;

  • Создайте SolidColorBrush и задайте его свойство Color с помощью структуры Color. Можно использовать стандартный цвет из класса Colors или можно создать Color с помощью статического метода FromArgb.

    В следующем примере показано, как установить свойство Color класса SolidColorBrush с использованием стандартного цвета.

    Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;

Статический FromArgb позволяет указать значения альфа, красной, зеленой и синей составляющих цвета. Обычно диапазон для каждого из этих значений — от 0 до 255. Например, значение альфа, равное 0, указывает, что цвет является полностью прозрачным, в то время как значение 255 указывает на полностью непрозрачный цвет. Аналогично, значение красного, равное 0, указывает, что цвет не имеет красной составляющей, в то время как значение 255 указывает на то, что цвет имеет максимальный объем красной составляющей. В следующем примере цвет кисти цвета описан путем указания значений альфа, красной, зеленой и синей составляющих.

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

Закраска области градиентом

Кисть градиента закрашивает область несколькими цветами, сливающимися друг с другом вдоль оси. Можно использовать их для создания впечатления света и тени, что представляет элемент управления в трехмерном виде. Их также можно использовать для имитации стекла, хрома, воды и других гладких поверхностей. WPF предоставляет два типа градиентных кистей: LinearGradientBrush и RadialGradientBrush.

Линейный градиент

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

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

<!-- 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" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

В результате получается следующий градиент.

Диагональный линейный градиент

**Примечание:**В примерах градиента в этом разделе используется система координат по умолчанию для установки начальной и конечной точки. Система координат по умолчанию связана с ограничивающим прямоугольником: 0 указывает 0 процентов ограничивающего прямоугольника и 1 — 100 процентов. Можно изменить эту систему координат, задав свойству MappingMode значение Absolute. Абсолютная система координат определяется не относительно ограничивающего прямоугольника. Значения интерпретируются непосредственно в локальной области.

GradientStop представляет основные блоки построения кисти градиента. Позиция градиента указывает Color на Offset вдоль оси градиента.

  • Свойство Color позиции градиент определяет цвет позиции градиента. Можно установить цвет с помощью стандартного цвета (предоставленного классом Colors) или путем указания значений ScRGB или ARGB. В XAML можно также использовать шестнадцатиричный формат для описания цвета. Дополнительные сведения содержатся в разделе Color.

  • Свойство Offset позиции градиента указывает положение цвета позиции градиента на оси градиента. Смещение представлено типом Double в диапазоне от 0 до 1. Чем ближе значение смещения позиции градиента к 0, тем ближе цвет к началу градиента. Чем ближе значение смещения градиента к 1, тем ближе цвет к концу градиента.

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

Остановки градиента в линейном градиенте

Первая позиция градиента определяет желтый цвет на некотором смещении от 0.0. Вторая позиция градиента определяет красный цвет на некотором смещении от 0.25. Точки между этими двумя позициями постепенно изменяются с желтого на красный при перемещении слева направо вдоль оси градиента. Третья позиция градиента определяет синий цвет на некотором смещении от 0.75. Точки между второй и третьей позициями градиента постепенно изменяются от красного к голубому. Четвертая позиция градиента определяет цвет зеленого лайма на некотором смещении от 1.0. Точки между третьей и четвертой позициями градиента постепенно изменяются от синего к цвету зеленого лайма.

Ось градиента

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

По умолчанию свойства StartPoint и EndPoint кисти линейного градиента кисти относятся к области закраски. Точка (0,0) представляет верхний левый угол закрашиваемой области, а (1,1) — правый нижний угол закрашиваемой области. StartPoint элемента LinearGradientBrush по умолчанию равна (0,0), а его EndPoint по умолчанию равна (1,1), что создает градиент по диагонали, начиная из верхнего левого угла и распространяясь в правый нижний угол области закрашивания. На следующем рисунке показана ось градиента кисти линейного градиента со свойствами StartPoint и EndPoint по умолчанию.

Ось градиента для диагонального линейного градиента

В следующем примере показано, как создать горизонтальный градиент, указав свойства StartPoint и EndPoint кисти. Обратите внимание, что позиции градиента такте же, как и в предыдущих примерах; просто изменяя StartPoint и EndPoint, градиент был изменен с диагонального на горизонтальный.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

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

Ось градиента для горизонтального линейного градиента

В следующем примере показано создание вертикального градиента.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

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

Ось градиента для вертикального градиента

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

Как и LinearGradientBrush, RadialGradientBrush закрашивает область цветами, которые переходят друг в друга вдоль оси. В предыдущих примерах показано, что ось кисти линейного градиента является прямой линией. Ось кисти радиального градиента определяется кругом; цвета расходятся по кругу от начала координат.

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

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>


RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

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

Остановки градиента в радиусном градиенте

GradientOrigin задает начальную точку оси градиента кисти линейного градиента. Ось градиента расходится по кругу от начала градиента к кругу градиента. Круг градиента кисти определяется свойствами Center, RadiusX и RadiusY.

На следующем рисунке показано несколько радиальных градиентов с разными параметрами GradientOrigin, Center, RadiusX и RadiusY.

RadialGradientBrushes с различными параметрами GradientOrigin, Center, RadiusX и RadiusY.
Параметры RadialGradientBrush

Задание прозрачных или частично прозрачных позиций градиента

Поскольку позиции градиента не предоставляют свойство непрозрачности, необходимо указать альфа-канал цветов с помощью шестнадцатеричного формата ARGB в разметке или использовать метод Color.FromScRgb для создания позиций градиента, которые являются частично прозрачными или прозрачными. В следующих разделах даны более подробные инструкции по созданию частично прозрачных позиций градиента в XAML и коде. Сведения о настройке прозрачности кисти содержатся в разделе Задание прозрачности кисти.

Указание непрозрачности цвета в «XAML»

В XAML, вы используете шестнадцатеричный формат ARGB для указания непрозрачности отдельных цветов. Шестнадцатеричный формат ARGB использует следующий синтаксис:

#aarrggbb

aa в предыдущей строке представляет двузначное шестнадцатеричное значение, используемое для указания непрозрачности цвета. rr, gg, и bb представляют собой двузначные шестнадцатеричные значения, используемые для указания красной, зеленой и синей компоненты цвета. Каждая шестнадцатеричная цифра может иметь значение от 0 до 9 либо от A до F. 0 соответствует наименьшему значению, а F — наибольшему. Альфа-значение 00 указывает на то, что цвет является полностью прозрачным, в то время как альфа-значение FF создает цвет, который является полностью непрозрачным. В следующем примере шестнадцатеричная форма записи ARGB используется для задания двух цветов. Первый — частично прозрачный (он имеет альфа-значение x20), в то время как второй — полностью непрозрачный.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Задание непрозрачности цвета в коде

При использовании кода статический метод FromArgb позволяет задать значение альфа при создании цвета. Метод принимает четыре параметра типа Byte. Первый параметр задает альфа-канал цвета; другие три параметра определяют значения красной, зеленой и синей компоненты цвета. Каждое значение должно быть в диапазоне от 0 до 255, включительно. Альфа-значение, равное 0, указывает на то, что цвет является полностью прозрачным, в то время как альфа-значение FF создает цвет, который является полностью непрозрачным. В следующем примере метод FromArgb используется для создания двух цветов. Первый цвет является частично прозрачным (он имеет значение альфа-32), в то время как второй — полностью непрозрачный.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

Кроме того, можно использовать метод FromScRgb, который позволяет использовать значения ScRGB для создания цвета.

Закраска с использованием изображений, рисунков, визуализаций и шаблонов

Классы ImageBrush, DrawingBrush и VisualBrush позволяют закрашивать область, используя изображения, рисунки или визуализации. Сведения о закрашивании с использованием изображений, рисунков и шаблонов содержатся в разделе Рисование с помощью объектов Image, Drawing и Visual.

См. также

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

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

Общие сведения о преобразованиях объекта Brush

Уровни графической отрисовки

Ссылки

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush