使用纯色和渐变进行绘制概述

项目
05/04/2023

本主题描述了如何使用 SolidColorBrush、LinearGradientBrush 和 RadialGradientBrush 对象用纯色、线性渐变和径向渐变进行绘制。

使用纯色绘制区域

在任何平台中最常见的操作之一是使用纯色 Color 绘制区域。为了完成此任务，Windows Presentation Foundation (WPF) 提供了 SolidColorBrush 类。下面几节描述了使用 SolidColorBrush 进行绘制的不同方法。

在“XAML”中使用 SolidColorBrush

若要在 XAML 中使用纯色绘制某个区域，请使用以下选项之一。

按照名称选择预定义的纯色画笔。例如，可以将按钮的 Background 设置为“红色”或“中度蓝色”。有关其他预定义的纯色画笔列表，请参阅 Brushes 类的静态属性。下面是一个示例。
```

<Button Background="Red">A Button</Button>
```
通过指定红色、绿色和蓝色的分量从 32 位调色板中选择一种颜色，以合并为单个纯色。从 32 位调色板指定一种颜色的格式为“#rrggbb”，其中 rr 为两位十六进制数，用于指定红色的相对量，gg 指定绿色的相对量，bb 指定蓝色的相对量。此外，该颜色可指定为“#aarrggbb”，其中，aa 指定该颜色的 alpha 值或透明度。使用此方法能够创建部分透明的颜色。在下面的示例中，Button 的 Background 使用十六进制表示法设置为完全不透明红色。
```

<Button Background="#FFFF0000">A Button</Button>
```

使用属性标记语法描述 SolidColorBrush。此语法更详细，并且能够指定其他设置，例如画笔的不透明度。在下面的示例中，两个 Button 元素的 Background 属性设置为完全不透明红色。第一个画笔的颜色使用预定义的颜色名称描述。第二个画笔的颜色使用十六进制表示法描述。

<!-- 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 类提供的预定义画笔之一。在下面的示例中，Button 的 Background 设置为 Red。
```
Button myButton = new Button();
myButton.Content = "A Button";
myButton.Background = Brushes.Red;
```
创建 SolidColorBrush 并使用 Color 结构设置其 Color 属性。可以使用 Colors 类中的预定义颜色，或使用静态 FromArgb 方法创建 Color。

下面的示例演示如何使用预定义颜色设置 SolidColorBrush 的 Color 属性。
```
Button myButton = new Button();
myButton.Content = "A Button";

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

静态的 FromArgb 能够指定该颜色的 alpha、红色、绿色和蓝色值。每个值的常规范围介于 0 与 255 之间。例如：alpha 值为 0 表示某种颜色完全透明，而值为 255 则表示该颜色完全不透明。同样地，红色值为 0 表示某种颜色里没有红色，而值为 255 则表示某种颜色里红色最多。在下面的示例中，画笔的颜色通过指定 alpha、红色、绿色和蓝色值描述。

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;

此代码生成以下渐变：

A diagonal linear gradient

注意

此主题中的渐变示例使用默认坐标系来设置起点和终点。默认坐标系与范围框相关：0 表示范围框为 0%，1 表示范围框为 100%。可以通过将 MappingMode 属性设置为 Absolute 值来改变此默认坐标系。绝对坐标系与范围框无关。值直接在本地空间中解释。

GradientStop 是渐变画笔的基本构造块。梯度停止点指定沿渐变轴 Offset 处的 Color。

梯度停止点的 Color 属性指定梯度停止点的颜色。可以使用预定义的颜色（由 Colors 类提供）或通过指定 ScRGB 或 ARGB 值来设置该颜色。在 XAML 中，还可以使用十六进制表示法描述一种颜色。有关详细信息，请参阅 Color 结构。
梯度停止点的 Offset 属性指定梯度停止点的颜色在渐变轴上的位置。偏移量是一个介于 0 到 1 之间的 Double 值。梯度停止点的偏移值越接近 0，颜色就越接近渐变的起点。梯度停止点的偏移值越接近 1，颜色就越接近渐变的终点。

渐变停点之间每个点的颜色均以两个边界渐变停点指定的颜色组合呈线性相互融合。下图突出显示了上一示例中的梯度停止点。圆圈标记梯度停止点的位置，虚线显示渐变轴。

Gradient stops in a linear gradient

第一个梯度停止点指定偏移量 0.0 处的颜色为黄色。第二个梯度停止点指定偏移量 0.25 处的颜色为红色。这两个点之间的点在沿渐变轴由左向右移动时，颜色渐渐由黄色变为红色。第三个梯度停止点指定偏移量 0.75 处的颜色为蓝色。第二个和第三个梯度停止点之间的点渐渐由红色变为蓝色。第四个梯度停止点指定偏移量 1.0 处的颜色为浅绿色。第三个和第四个梯度停止点之间的点渐渐由蓝色变为浅绿色。

渐变轴

如前文中提到，线性渐变画笔的梯度停止点位于一条线上，即渐变轴上。可以使用画笔的 StartPoint 和 EndPoint 属性更改这条线的方向和大小。通过操作画笔的 StartPoint 和 EndPoint，可以创建水平和垂直渐变、反转渐变方向、压缩渐变范围等。

默认情况下，线性渐变画笔的 StartPoint 和 EndPoint 与绘制区域相关。点 (0,0) 表示正在绘制的区域的左上角，点 (1,1) 表示绘制区域的右下角。 LinearGradientBrush 的默认 StartPoint 为 (0,0)，并且它的默认 EndPoint 为 (1,1)，这就创建了一个从绘制区域的左上角开始延伸到右下角的对角线渐变。下图显示了使用默认 StartPoint 和 EndPoint 的线性渐变画笔的渐变轴。

Gradient axis for a diagonal linear gradient

下面的示例演示如何通过指定画笔的 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;

下图显示了创建的渐变。渐变轴用虚线标记，梯度停止点用圆圈标记。

Gradient axis for a horizontal linear gradient

下一个示例演示如何创建垂直渐变。

<!-- 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;

下图显示了创建的渐变。渐变轴用虚线标记，梯度停止点用圆圈标记。

Gradient axis for a vertical gradient

径向渐变

与 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;

下图显示了上一示例中创建的渐变。画笔的梯度停止点得到突出显示。请注意，虽然结果不同，但该示例中梯度停止点与前面几个线性渐变画笔示例中的梯度停止点相同。

Gradient stops in a radial gradient

GradientOrigin 指定径向渐变画笔的渐变轴起点。渐变轴从渐变原点向渐变圆辐射开来。画笔的渐变圆圈由其 Center、RadiusX 和 RadiusY 属性定义。

下图显示了具有不同 GradientOrigin、Center、RadiusX 和 RadiusY 设置的多个径向渐变。

RadialGradientBrush settings 具有不同 GradientOrigin、Center、RadiusX 和 RadiusY 设置的 RadialGradientBrush。

指定透明或部分透明的梯度停止点

由于梯度停止点不提供不透明度属性，因此必须使用标记中的 ARGB 十六进制表示法指定颜色的 alpha 通道，或使用 Color.FromScRgb 方法创建透明或部分透明的梯度停止点。下面的几节介绍如何在 XAML 和代码中创建部分透明的梯度停止点。

在“XAML”中指定颜色不透明度

在 XAML 中，使用 ARGB 十六进制表示法指定个别颜色的不透明度。 ARGB 十六进制表示法使用下面的语法：

#aarrggbb

上一行中的 aa 表示用于指定颜色不透明度的两位十六进制值。 rr、gg 和 bb 分别表示用于指定颜色中的红色、绿色和蓝色量的两位十六进制值。每个十六进制数字介于 0-9 或 A-F 之间。 0 是最小值，F 是最大值。 00 的 alpha 值指定完全透明的颜色，而 FF 的 alpha 值创建完全不透明的颜色。在下面的示例中，十六进制 ARGB 表示法用于指定两种颜色。第一种为部分透明（alpha 值为 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 方法在创建颜色时指定 alpha 值。该方法接受类型为 Byte 的四个参数。第一个参数指定颜色的 alpha 通道；其他三个参数指定颜色的红色值、绿色值和蓝色值。每个值应介于 0 与 255 之间（含 0 和 255）。 alpha 值为 0 表示颜色完全透明，alpha 值为 255 表示颜色完全不透明。在下面的示例中，使用 FromArgb 方法产生两种颜色。第一种颜色为部分透明（alpha 值为 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 值创建颜色。

使用图像、绘图、Visual 和模式进行绘制

ImageBrush、DrawingBrush 和 VisualBrush 类能够使用图像、绘图或 Visual 绘制区域。有关使用图像、绘图和模式进行绘制的详细信息，请参阅使用图像、绘图和 Visual 进行绘制。