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

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

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

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

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

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

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

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

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color =
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.

myButton.Background = mySolidColorBrush;

Дополнительные способы указания цвета см 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 .

Параметры RadialGradientBrush Радиалградиентбрушес с различными параметрами GradientOrigin, Center, RadiusX и RADIUS.

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

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

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

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

# aa rrggbb

Здесь aa — двузначное шестнадцатеричное значение, используемое для указания непрозрачности цвета. rr, gg и bb — двузначные шестнадцатеричные значения, используемые для указания насыщенности красного, зеленого и синего цветов. Шестнадцатеричная цифра может принимать значения от 0 до F (сначала цифры от 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, указывает, что цвет полностью прозрачен, а значение 255 — что он полностью непрозрачен. В следующем примере FromArgb метод используется для создания двух цветов. Первый цвет — частично прозрачный (он имеет альфа-значение x32). Второй — полностью непрозрачный.

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 для создания цвета.

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

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

См. также раздел