WPF画刷介绍

画刷种类 数据来源 适合场景
SolidColorBrush 纯色 简单背景、文字颜色
LinearGradientBrush 线性渐变 渐变背景、立体感
ImageBrush 图片文件(Bitmap) 用图片作为背景或填充
VisualBrush 任何 UI 元素(Visual) 镜像、放大镜、重复复杂图案、内容快照

1.SolidColorBrush

**介绍:**最基础的画刷,用单一、固定的颜色填充区域。它只有颜色一个核心参数。

关键属性:

  • Color:颜色值(直接写颜色名如 Red,或十六进制 #FF8800)
  • Opacity(继承自Brush):整体透明度
xaml 复制代码
<!-- 直接使用颜色字符串 -->
<Rectangle Width="100" Height="100" Fill="Blue" />

<!-- 完整标签写法,可额外设置透明度 -->
<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.7"/>
    </Rectangle.Fill>
</Rectangle>

2.LinearGradientBrush

**介绍:**沿一条直线(从起点到终点)平滑过渡多种颜色。你需要定义至少两个 GradientStop(渐变停止点),每个点指定颜色和位置(Offset,0~1)。

关键属性:

  • StartPoint / EndPoint:渐变的起点和终点(默认是 (0,0) 到 (1,1),即左上到右下,相对坐标)
  • GradientStops:渐变停止点集合,包含 Color 和 Offset
xaml 复制代码
<!-- 从左到右(0,0 → 1,0)的蓝-绿渐变 -->
<Rectangle Width="200" Height="50">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="LightBlue" Offset="0"/>
            <GradientStop Color="LightGreen" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

<!-- 带三个停止点的垂直渐变(上→下) -->
<Rectangle Width="200" Height="50">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="0.5"/>
            <GradientStop Color="Red" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

3.ImageBrush(图像画刷)

**介绍:**用一张图片(位图)来填充区域。图片来源可以是项目资源、文件路径或网络URL。它继承自 TileBrush,所以具备拉伸、平铺、裁剪等能力。

关键属性:

  • ImageSource:图片源(例如 "pack://application:,,,/Images/photo.jpg" 或相对路径)
  • Stretch:图片如何拉伸(None/Fill/Uniform/UniformToFill)
  • TileMode、Viewport 等(同VisualBrush,用于平铺)
xaml 复制代码
<!-- 简单背景图(等比填充) -->
<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="C:\Pictures\background.jpg" 
                    Stretch="UniformToFill"/>
    </Grid.Background>
</Grid>

<!-- 平铺小图标作为纹理 -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <ImageBrush ImageSource="icon.png" 
                    TileMode="Tile" 
                    Viewport="0,0,32,32" 
                    ViewportUnits="Absolute" 
                    Stretch="None"/>
    </Rectangle.Fill>
</Rectangle>

4.VisualBrush(可视对象画刷)

介绍 :它把任何 Visual(UI元素,如按钮、面板、文本块)渲染成一张"快照"位图,然后用这张位图去填充目标区域。它不是画颜色或图片,而是"画另一个UI的样子"。

关键属性:

  • Visual:要拍摄的源元素(任何继承自 Visual 的对象)
  • Stretch:快照如何拉伸(同ImageBrush)
  • TileMode / Viewport:控制平铺和裁剪区域
  • AlignmentX / AlignmentY:快照在目标区域的对齐方式
xaml 复制代码
    <Grid>
        <Grid.Background>
            <VisualBrush
                TileMode="Tile"
                Viewport="0,0,200,200"
                ViewportUnits="Absolute">
                <VisualBrush.Visual>
                    <TextBlock
                        FontStyle="Normal"
                        Foreground="#bbb"
                        Text="123">
                        <TextBlock.RenderTransform>
                            <RotateTransform Angle="30" />
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>
    </Grid>
相关推荐
光泽雨3 天前
动画生命周期
c#·wpf
nap1174 天前
WPF 中常用的 LINQ 语句
wpf
做个文艺程序员7 天前
MQ第12篇:AI原生消息架构演进:从MQ到事件驱动的全链路设计
架构·消息队列·wpf·事件驱动架构·ai-native·cqrs
donk13149 天前
React Native for OpenHarmony 实战:三方库 react-native-circular-action-menu 的鸿蒙化适配指南
javascript·分布式·react native·react.js·wpf·harmonyos
donk131410 天前
React Native for OpenHarmony 实战:三方库 react-native-step-indicator 的鸿蒙化适配指南
分布式·react native·react.js·wpf·harmonyos
He BianGu10 天前
【笔记】WPF中RenderOptions类的详细功能
笔记·wpf
VidDown10 天前
上线三个月后的第一次事故:一个 Django 服务的日志、监控与故障复盘
数据库·python·django·wpf·音视频·视频编解码
He BianGu10 天前
【笔记】WPF中CachingHint的功能
笔记·wpf
He BianGu10 天前
【笔记】在WPF中BitmapScalingMode的作用
笔记·wpf