画笔

一、先搞懂：Pen（画笔） vs Brush（画刷）

这是 WPF 最容易混淆的两个概念，一句话分清：

✏️ Pen = 画笔（画线、轮廓、边框）

负责线条
负责形状的边
负责控件的边框

🎨 Brush = 画刷（填充颜色、背景）

负责填充内部
负责背景、前景色

最直观例子（Shape 形状）

1 <Ellipse 
2     Width="100" Height="100"
3     Fill="LightBlue"       <!-- 画刷：填充内部 -->
4     Stroke="Red"           <!-- 画笔：画轮廓线 -->
5     StrokeThickness="3"    <!-- 线条粗细 -->
6 />

Fill = 画刷
Stroke = 画笔

二、Pen 到底是什么？

Pen = 专门用来绘制线条、轮廓、边框的工具

它决定线条的：

颜色
粗细
线型（实线 / 虚线）
线帽（圆头 / 平头）
连接方式

三、Pen 类的 5 个核心属性

1 public sealed class Pen : Animatable
2 {
3     public Brush Brush { get; set; }       // 线条颜色（画刷）
4     public double Thickness { get; set; }  // 线条粗细
5     public PenLineCap StartLineCap { get; set; } // 起点线帽
6     public PenLineCap EndLineCap { get; set; }   // 终点线帽
7     public PenLineJoin LineJoin { get; set; }    // 拐角连接方式
8     public DoubleCollection DashStyle { get; set; } // 虚线样式
9 }

四、最常用用法（直接写在 Stroke 里）

WPF 里绝大多数情况不需要写完整 Pen 标签，直接赋值即可：

1. 简单线条（自动生成 Pen）

1 <Rectangle Stroke="Red" StrokeThickness="2"/>

等价于：

1 <Rectangle>
2     <Rectangle.Stroke>
3         <Pen Brush="Red" Thickness="2"/>
4     </Rectangle.Stroke>
5 </Rectangle>

五、完整 Pen 语法（高级样式必须用）

示例 1：圆角线条 + 虚线

 1 <Line X1="10" Y1="10" X2="200" Y2="10">
 2     <Line.Stroke>
 3         <!-- 完整画笔定义 -->
 4         <Pen Brush="Blue" Thickness="4">
 5             <Pen.StartLineCap>Round</Pen.StartLineCap>  <!-- 起点圆头 -->
 6             <Pen.EndLineCap>Round</Pen.EndLineCap>      <!-- 终点圆头 -->
 7             <Pen.DashStyle>DashDot</Pen.DashStyle>      <!-- 点划线 -->
 8         </Pen>
 9     </Line.Stroke>
10 </Line>

六、Pen 所有属性详细讲解 + 例子

1. Brush（线条颜色）

1 <Pen Brush="Red"/>
2 <Pen Brush="#FF0077D4"/>

必须是画刷（纯色、渐变、图片都可以）

2. Thickness（线条粗细）

1 <Pen Thickness="1"/>   <!-- 细线 -->
2 <Pen Thickness="5"/>   <!-- 粗线 -->

3. StartLineCap / EndLineCap（线帽：线条两端样式）

可选值：

Flat（默认，平头）
Square（方头）
Round（圆头，最常用）
Triangle（三角头）

例子：

1 <Pen StartLineCap="Round" EndLineCap="Round"/>

4. LineJoin（拐角连接样式）

形状拐角处的样式：

Miter（尖角，默认）
Bevel（斜角）
Round（圆角，最常用）

1 <Pen LineJoin="Round"/>

5. DashStyle（虚线样式）

内置样式：

Solid 实线
Dash 虚线
Dot 点线
DashDot 点划线
DashDotDot 双点划线

1 <Pen DashStyle="Dash"/>
2 <Pen DashStyle="Dot"/>

七、超级实用完整示例（直接复制运行）

示例 1：带圆角、圆头、虚线的线条

1 <Line X1="20" Y1="50" X2="280" Y2="50" StrokeThickness="6">
2     <Line.Stroke>
3         <Pen Brush="DarkCyan">
4             <Pen.StartLineCap>Round</Pen.StartLineCap>
5             <Pen.EndLineCap>Round</Pen.EndLineCap>
6             <Pen.DashStyle>DashDot</Pen.DashStyle>
7         </Pen>
8     </Line.Stroke>
9 </Line>

示例 2：带圆角拐角的矩形

1 <Rectangle Width="200" Height="100" Fill="LightBlue">
2     <Rectangle.Stroke>
3         <Pen Brush="Navy" Thickness="3">
4             <Pen.LineJoin>Round</Pen.LineJoin>  <!-- 圆角拐角 -->
5         </Pen>
6     </Rectangle.Stroke>
7 </Rectangle>

示例 3：控件边框使用 Pen（高级）

1 <Button Content="按钮" Width="150" Height="50">
2     <Button.BorderBrush>
3         <Pen Brush="Red" Thickness="2">
4             <Pen.LineJoin>Round</Pen.LineJoin>
5         </Pen>
6     </Button.BorderBrush>
7 </Button>

八、Pen 最核心总结（必背）

Pen = 画笔 → 画线条、轮廓、边框
Brush = 画刷 → 填充背景、内部
形状的：
- Stroke = 画笔
- Fill = 画刷
Pen 五大属性：
- Brush 颜色
- Thickness 粗细
- LineCap 线帽
- LineJoin 拐角
- DashStyle 虚线

九、一句话终极记忆

画笔管线条，画刷管填充！

posted on 2026-03-25 18:24 工业搬砖猿Lee 阅读(24) 评论(0) 收藏举报