使用画笔绘制背景、前景和轮廓

2025-06-10

使用 Brush 对象绘制 XAML 形状、文本和控件的内部和轮廓，使其在应用程序 UI 中可见。

重要 API：Brush 类

画笔简介

要在应用画布上对显示的形状、文本或控件的部分进行绘制，请将形状的填充属性以及背景和前景属性的控件设置为画笔值。

不同类型的画笔包括：

纯色画笔

SolidColorBrush 用单一颜色绘制一个区域，例如红色或蓝色。这是最基本的画笔。在 XAML 中，有三种方法可以定义 SolidColorBrush 及其指定的颜色：预定义的颜色名称、十六进制颜色值或属性元素语法。

预定义的颜色名称

可以使用预定义的颜色名称，如黄色或 Magenta。有 256 种可用的命名颜色。 XAML 分析器使用正确的颜色通道将颜色名称转换为颜色结构。 256 种命名颜色基于级联样式表、级别 3 （CSS3）规范中的 X11 颜色名称，因此，如果以前有 Web 开发或设计的经验，你可能已经熟悉此命名颜色列表。

以下示例将矩形的 Fill 属性设置为预定义的颜色红色。

<Rectangle Width="100" Height="100" Fill="Red" />

已呈现的 SolidColorBrush

应用于矩形的SolidColorBrush

如果使用代码而不是 XAML 定义 SolidColorBrush ，则每个命名颜色都可用作 Colors 类的静态属性值。例如，若要声明 SolidColorBrush 的 Color 值来表示命名颜色“兰花”，请将 Color 值设置为静态值 Colors.Orchid。

十六进制颜色值

可以使用十六进制格式字符串定义 SolidColorBrush 的精确 24 位颜色值和 8 位 alpha 通道，像这样。范围 0 到 F 中的两个字符定义每个组件值，十六进制字符串的组件值顺序为：alpha 通道（不透明度）、红色通道、绿色通道和蓝色通道（ARGB）。例如，十六进制值“#FFFF0000”定义完全不透明的红色（alpha=“FF”， red=“FF”， green=“00”，蓝色=“00”）。

此 XAML 示例将 Rectangle 的 Fill 属性设置为十六进制值“#FFFF0000”，并给出与使用命名颜色 Colors.Red相同的结果。

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

属性元素语法

可以使用属性元素语法来定义 SolidColorBrush。此语法比前面的方法更详细，但你可以在元素（如 Opacity）上指定其他属性值。有关 XAML 语法（包括属性元素语法）的详细信息，请参阅 XAML 概述和 XAML 语法指南。

在前面的示例中，创建的画笔是隐式自动生成的，这是 XAML 语言的一种有意简化语法，有助于在最常见情况下简化 UI 定义。下一个示例创建一个 Rectangle，且明确创建 SolidColorBrush 作为 Rectangle.Fill 属性的元素值。 SolidColorBrush的颜色设置为蓝色，不透明度设置为 0.5。

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

线性渐变画笔

LinearGradientBrush 绘制具有沿线条定义的渐变的区域。此线条称为 渐变轴。可以使用 GradientStop 对象指定渐变轴上颜色及其位置。在默认情况下，渐变轴从画笔绘制区域的左上角延伸到右下角，从而产生对角线的渐变效果。

GradientStop 是渐变画笔的基本组成部分。渐变停靠点指定了画笔在渐变轴上 偏移量 处的颜色，当画笔应用于要绘制的区域时。

渐变停止点的 Color 属性指定渐变停止点的颜色。可以使用预定义的颜色名称或指定十六进制 ARGB 值来设置颜色。

GradientStop 的 Offset 属性指定每个 GradientStop 在渐变轴上的位置。 偏移量 是一个双，范围为 0 到 1。 偏移量 0 将 GradientStop 放在渐变轴的开头，换句话说，位于其 StartPoint附近。 偏移量为 1 将 GradientStop 放置在 EndPoint。至少，一个有用的 LinearGradientBrush 应有两个 GradientStop 值，其中每个 GradientStop 应指定不同的颜色，并在 0 和 1 之间具有不同的 偏移量。

此示例创建一个具有四种颜色的线性渐变，并使用它绘制矩形。

<!-- 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" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

渐变停止点之间每个点的颜色通过线性插值形成，由两个边界渐变停止点指定的颜色组合而成。下图突出显示了上一示例中的渐变停止点。圆圈标记渐变停止点的位置，虚线显示渐变轴。

图中描绘渐变停止点 1 到 4 的图表，从图表左上角开始，向下倾斜，向右倾斜，直到它到达图表的右下角。

由两个边界渐变停止点指定的颜色组合

可以通过将 StartPoint 和 EndPoint 属性设置为不同于 (0,0) 和 (1,1) 起始默认值来更改渐变停止位置的线条。通过更改 StartPoint 和 EndPoint 坐标值，可以创建水平或垂直渐变、反向渐变方向或凝结渐变分布，以应用于比完整绘制区域更小的范围。若要压缩渐变，请将 StartPoint 和/或 EndPoint 的值设置为介于值 0 和 1 之间的值。例如，如果想要一个水平渐变，其中画笔的左半部分是完全渐变的，右半部分为最后的 GradientStop 颜色，那么您需要将 StartPoint 设置为 (0,0)，并将 EndPoint 设置为 (0.5,0)。

使用工具生成渐变

了解线性渐变的工作原理后，可以使用 Visual Studio 或 Blend 更轻松地创建这些渐变。若要创建渐变，请选择要在设计图面或 XAML 视图中应用渐变的对象。展开画笔并选择 “线性渐变 ”选项卡。

在 Visual Studio 中创建线性渐变

在 Visual Studio 中创建线性渐变

现在，可以使用底部的条形图更改渐变停止点的颜色并滑动其位置。还可以通过单击条形图来添加新的渐变停止点，并通过将停止点拖出条形图来删除它们（请参阅下一个屏幕截图）。

属性窗口底部的条控制渐变点

渐变设置滑块

径向渐变画笔

RadialGradientBrush 是在由 Center、RadiusX和 RadiusY 属性定义的椭圆内绘制的。渐变的颜色从椭圆中心开始，以半径结尾。

径向渐变的颜色由添加到 GradientStops 集合属性中的颜色断点定义。每个渐变色标都指定了颜色和在渐变中的偏移量。

渐变原点默认为居中，可以使用 GradientOrigin 属性 来偏移。

MappingMode 定义 Center、 RadiusX、 RadiusY 和 GradientOrigin 是否表示相对坐标或绝对坐标。

当 MappingMode 设置为 RelativeToBoundingBox 时，三个属性的 X 和 Y 值被视为相对于元素边界，其中 (0,0) 表示左上角 (1,1) ，并表示 Center、 RadiusX 和 RadiusY 属性的元素边界的右下角，并 (0,0) 表示 GradientOrigin 属性的中心。

当 MappingMode 设置为 Absolute时，三个属性的 X 和 Y 值被视为元素边界内的绝对坐标。

此示例创建一个具有四种颜色的线性渐变，并使用它绘制矩形。

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

在渐变停止点之间，每个点的颜色是由这两个边界渐变停止点指定的颜色径向插值而成的组合。下图突出显示了上一示例中的渐变停止点。

径向渐变的屏幕截图。

渐变停止点

图像画笔

ImageBrush 用图像绘制区域，图像要从图像文件源绘制。使用要加载的图像的路径设置 ImageSource 属性。通常，图像源来自应用资源中的 内容项。

默认情况下，的 ImageBrush 会拉伸图像以完全填充绘制区域，如果绘制区域与图像的纵横比不同，则可能导致图像失真。可以通过更改 Stretch 属性的默认值 Fill，并将其设置为 None、Uniform或 UniformToFill来更改此行为。

下一个示例创建 ImageBrush 并将 ImageSource 设置为名为 licorice.jpg的映像，该映像必须作为资源包含在应用中。然后 ImageBrush 填充由椭圆形状定义的区域。

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

渲染的 ImageBrush。

渲染后的图像画刷

ImageBrush 和 Image 都通过统一资源标识符（URI）引用图像源文件，其中图像源文件使用多种可能的图像格式。这些图像源文件被指定为 URI。有关指定图像源、可用图像格式并在应用中打包图像的详细信息，请参阅 Image 和 ImageBrush。

画笔和文本

还可以使用画笔将呈现特征应用于文本元素。例如，TextBlock 的前台属性采用 Brush。可以将此处所述的任何画笔应用于文本。但是，请谨慎使用应用于文本的画笔，因为任何背景都可能导致文本不可读（如果使用出血到背景中的画笔）。在大多数情况下，为了提高文本元素的可读性，请使用 SolidColorBrush，除非您希望文本元素主要用于装饰。

即使使用纯色，请确保所选的文本颜色与文本布局容器的背景色具有足够的对比度。文本前景和文本容器背景之间的对比度级别是辅助功能考虑因素。

WebViewBrush

WebViewBrush 是一种特殊类型的画笔，可以访问在 WebView 控件中正常查看的内容。 WebViewBrush 将内容绘制到具有呈现图面 Brush-type 属性的另一个元素上，而不是在矩形 WebView 控件区域中呈现内容。 WebViewBrush 不适用于每个画笔方案，但对于 WebView的转换非常有用。有关详细信息，请参阅 WebViewBrush。

XamlCompositionBrushBase

XamlCompositionBrushBase 是一个基类，用于创建自定义画笔，使用 CompositionBrush 绘制 XAML UI 元素。

这可实现 Windows.UI.Xaml 和 Windows.UI.Composition 层之间的“下放”互操作，如 视觉层概述中所述。

若要创建自定义画笔，请创建继承自 XamlCompositionBrushBase 并实现所需方法的新类。

例如，这可用于使用 CompositionEffectBrush（例如 GaussianBlurEffect 或 SceneLightingEffect）将效果应用于 XAML UIElement，以便在 XamlLight点亮时控制 XAML UIElement 的反射属性。

有关代码示例，请参阅 XamlCompositionBrushBase。

画笔作为 XAML 资源

可以将任何画笔定义为 XAML 资源字典中的带键 XAML 资源。这样可以轻松复制应用于 UI 中多个元素的同一画笔值。然后，将画笔值共享并应用于在 XAML 中将画笔资源引用为 {StaticResource} 用法的任何情况。这包括你具有引用共享画笔的 XAML 控件模板，而控件模板本身是键控 XAML 资源的情况。

代码中的画笔

使用 XAML 指定画笔比使用代码定义画笔更为典型。这是因为画笔通常定义为 XAML 资源，并且画笔值通常是设计工具的输出，或者作为 XAML UI 定义的一部分。不过，对于你可能希望使用代码定义画笔的偶尔情况，所有画笔类型都可用于代码实例化。

若要在代码中创建 SolidColorBrush ，请使用采用 Color 参数的构造函数。传递一个值，该值是 Colors 类的静态属性，如下所示：

SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);

Dim blueBrush as SolidColorBrush = New SolidColorBrush(Windows.UI.Colors.Blue)

Windows::UI::Xaml::Media::SolidColorBrush blueBrush{ Windows::UI::Colors::Blue() };

blueBrush = ref new SolidColorBrush(Windows::UI::Colors::Blue);

对于 WebViewBrush 和 ImageBrush，请使用默认构造函数，然后在尝试将该画笔用于 UI 属性之前调用其他 API。

ImageSource 在使用代码定义 ImageBrush 时，需要使用 BitmapImage，而不是 URI。如果源是流，请使用 SetSourceAsync 方法初始化值。如果源是一个 URI，并且它包含应用程序中使用 ms-appx 或 ms-resource 方案的内容，请使用带有 URI 的 BitmapImage 构造函数。如果在检索或解码图像源时遇到任何计时问题，您可能还需要处理 ImageOpened 事件，以便在图像源可用之前显示替代内容。
对于 WebViewBrush，如果最近重置了 SourceName 属性，或者 WebView 的内容也随着代码更改，可能需要调用 Redraw。

有关代码示例，请参阅 WebViewBrush、 ImageBrush 和 XamlCompositionBrushBase。

通过