Share via

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

  • 项目

更新：2007 年 11 月

此主题介绍如何使用 SolidColorBrush、LinearGradientBrush 和 RadialGradientBrush 对象，以纯色、线性渐变和径向渐变进行绘制。

本主题包括下列各节。

  • 使用纯色绘制区域
  • 使用渐变绘制区域
  • 线性渐变
  • 径向渐变
  • 指定透明或部分透明的渐变停止点
  • 使用图像、绘图、视觉效果和模式进行绘制
  • 相关主题

使用纯色绘制区域

任何平台上的一个最常见操作是使用纯 Color 绘制区域。为了实现此任务，Windows Presentation Foundation (WPF) 提供了 SolidColorBrush 类。以下各节介绍使用 SolidColorBrush 进行绘制的不同方式。

在“XAML”中使用 SolidColorBrush

若要在 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 指定颜色的 alpha 值或透明度。通过此方法可以创建部分透明的颜色。在下面的示例中，使用十六进制表示法将 Button 的 Background 设置为完全不透明的红色。

    <!-- This button's background is painted with a red SolidColorBrush,
     described using hexadecimal notation. -->
<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 值、红色值、绿色值和蓝色值来描述画笔的颜色。

有关指定颜色的其他方式，请参见 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 是渐变画笔的基本构造块。渐变停止点指定渐变轴上 Offset 处的 Color。

  • 渐变停止点的 Color 属性指定渐变停止点的颜色。可以使用预定义的颜色（由 Colors 类提供）设置颜色，或通过指定 ScRGB 或 ARGB 值设置颜色。在 XAML 中，还可以使用十六进制表示法描述颜色。有关更多信息，请参见 Color 结构。

  • 渐变停止点的 Offset 属性指定渐变停止点的颜色在渐变轴上的位置。偏移量是一个范围从 0 至 1 的 Double 值。渐变停止点的偏移量值越接近 0，颜色越接近渐变起点。渐变偏移量值越接近 1，颜色越接近渐变终点。

渐变停止点之间每个点的颜色按两个边界渐变停止点指定的颜色组合执行线性内插。下图突出显示了上一示例中的渐变停止点。圆圈标记渐变停止点的位置，虚线显示渐变轴。

线性渐变中的渐变停止点

第一个渐变停止点指定偏移量 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 的线性渐变画笔的渐变轴。

对角线方向线性渐变的渐变轴

下面的示例演示如何通过指定画笔的 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 设置的多个径向渐变。

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

RadialGradientBrush 设置

指定透明或部分透明的渐变停止点

由于渐变停止点不提供 opacity 属性，因此必须使用标记中的 ARGB 十六进制表示法指定颜色的 alpha 通道，或使用 Color.FromScRgb 方法创建透明或部分透明的渐变停止点。下面各节介绍如何在 XAML 和代码中创建部分透明的渐变停止点。有关设置整支画笔的不透明度的信息，请参见指定画笔的不透明度一节。

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

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

#aarrggbb

上一行中的 aa 表示用于指定颜色的不透明度的两位十六进制值。rr、gg 和 bb 分别表示用于指定颜色中的红色分量、绿色分量和蓝色分量的两位十六进制值。每个十六进制数字都是 0-9 或 A-F 中的一个值。其中 0 是最小值，F 是最大值。Alpha 值 00 用于指定完全透明的颜色，而 alpha 值 FF 用于建完全不透明的颜色。在下面的示例中，使用十六进制 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 值创建颜色。

使用图像、绘图、视觉效果和模式进行绘制

ImageBrush、DrawingBrush 和 VisualBrush 类使您能够使用图像、绘图或视觉效果绘制区域。有关使用图像、绘图和模式进行绘制的信息，请参见使用图像、绘图和 Visual 进行绘制。

请参见

概念

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

Brush 变换概述

图形呈现层

参考

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush