如果你正在用 C# 和 WPF 开发桌面应用，并且需要在界面上绘制矩形、椭圆等基础形状，你可能会觉得这很简单——不就是拖个Rectangle或Ellipse控件，然后设置一下Width和Height吗？
但当你真正开始调整这些形状的填充、边框，特别是想让它们在不同尺寸的容器里“自适应”时，问题就来了。为什么我设置了Fill颜色，形状却没显示？为什么我把Rectangle放进一个Grid里，它没有撑满整个单元格？为什么图片填充到形状里会变形？这些问题背后，都绕不开一个看似简单、实则关键的属性：Stretch。
很多开发者对Stretch枚举（None,Fill,Uniform,UniformToFill）的理解停留在“拉伸图片”上，认为它只属于Image控件。这是一个典型的误区。实际上，Stretch属性深刻影响着Shape派生类（如Rectangle,Ellipse,Path）的渲染逻辑、布局行为以及视觉效果的最终呈现。用错了Stretch，你的界面可能看起来“差不多”，但永远达不到像素级的精确和流畅的自适应。
本文将彻底厘清在 C#/WPF 中绘制矩形和椭圆时，Stretch属性的核心作用。我们不止讲“怎么画”，更要讲清楚“为什么这么画”，以及在不同布局和渲染场景下，如何通过正确设置Stretch来避免常见的视觉 Bug，实现真正可控、自适应的图形绘制。无论你是正在入门 WPF，还是已经开发了一段时间但总被一些奇怪的布局问题困扰，这篇文章都将为你提供一个清晰、可落地的解决方案。
1. 这篇文章真正要解决的问题
在 WPF 中绘制一个矩形或椭圆，代码层面可能只需要几行。但很多开发者遇到的真实困境是：图形元素在界面上的表现总是不听使唤。
- 场景一：你希望一个圆角矩形作为按钮的背景，并完美填充按钮区域。你设置了
Width和Height为Auto，依赖父容器分配空间，但矩形却只显示在左上角的一个小点，或者根本不显示。 - 场景二：你使用
Viewbox或Grid的*尺寸来创建自适应布局，但里面的Ellipse却变形了，成了一个椭圆，失去了“正圆”的特性。 - 场景三：你为
Rectangle的Fill设置了一个ImageBrush，希望图片能完整显示在矩形内，但图片要么被裁剪，要么严重变形失真。 - 场景四：你从设计稿中拿到了精确的尺寸（比如 150x100 的矩形），但直接设置这些尺寸后，在部分高DPI屏幕上，图形边缘出现了模糊或锯齿。
这些问题，本质上都不是“画不出来”，而是“如何定义图形的几何边界”和“如何将图形内容填充到这个边界”的问题。Stretch属性正是连接这两个环节的核心枢纽。它决定了：
- 图形的逻辑尺寸（由
Width/Height或布局系统决定）如何映射到最终的渲染区域。 - 图形的内容（对于
Shape是其几何形状本身，对于ImageBrush是其图片）如何填充这个渲染区域。
不理解Stretch，你就无法精确控制 WPF 中任何基于Shape的图形元素。本文将带你穿透表象，从Shape类的渲染管道入手，结合Rectangle和Ellipse的实例，把Stretch的四种模式（None,Fill,Uniform,UniformToFill）掰开揉碎讲清楚，并提供可直接复用的代码和最佳实践。
2. 基础概念与核心原理
在深入Stretch之前，我们需要统一几个关键概念，否则后续讨论会非常混乱。
2.1 WPF 中的 Shape 类
System.Windows.Shapes.Shape是所有二维形状的基类。Rectangle和Ellipse都继承自它。Shape类提供了绘制形状所需的基本属性：
Fill(Brush): 填充形状内部的画刷。Stroke(Brush): 绘制形状轮廓的画刷。StrokeThickness(double): 轮廓的粗细。Stretch(Stretch):本文的核心，定义形状内容如何拉伸以填充其布局空间。Geometry：形状的几何定义（对于Rectangle和Ellipse，这是自动计算的）。
关键点：Shape是一个FrameworkElement，这意味着它参与 WPF 的布局系统。它的最终渲染大小由布局过程（测量和排列）决定，而不仅仅是Width和Height。
2.2 逻辑尺寸 vs 渲染区域 vs 几何定义
这是理解Stretch的基石。
- 逻辑尺寸 (Desired Size)：这是布局系统为
Shape分配的空间。它可能来自显式设置的Width/Height，也可能来自父容器（如Grid、StackPanel）根据HorizontalAlignment/VerticalAlignment计算出的最终ActualWidth和ActualHeight。 - 渲染区域 (Layout Slot)：可以简单理解为
Shape控件最终在屏幕上占据的矩形区域，其尺寸等于ActualWidth和ActualHeight。 - 几何定义 (Geometry)：这是形状的“本质”。对于
Rectangle，它是一个矩形几何；对于Ellipse，它是一个椭圆几何。这个几何本身有自己的“自然大小”。在Stretch为None时，形状就按这个自然大小绘制。
Stretch属性的作用，就是协调这三者之间的关系。它回答了：“当我有一个特定几何定义的形状（如一个圆），并且它被分配了一个特定大小的渲染区域（如一个 200x100 的矩形）时，这个形状应该如何绘制在这个区域内？”
2.3 Stretch 枚举的四种模式
Stretch枚举定义在System.Windows.Media命名空间下，共有四个值：
| 枚举值 | 核心行为 | 类比说明 |
|---|---|---|
None | 形状按其几何自然大小绘制，不进行任何拉伸。如果渲染区域大于自然大小，形状可能不会填满区域（取决于对齐方式）。 | 就像把一张固定大小的邮票贴在一个大信封上，邮票大小不变。 |
Fill | 形状的几何被独立地、非等比地拉伸，以完全填满整个渲染区域。这会导致形状比例失真（圆变椭圆，正方形变长方形）。 | 就像把一张图片强行拉满整个屏幕，不管图片原来是什么比例。 |
Uniform | 形状的几何被等比例缩放，直到它能在渲染区域内完全显示（即一边碰到边界为止）。缩放后，形状会居中显示，另一边可能会有留白。这是保持形状原始比例的最佳模式。 | 就像在电视上看电影时的“信箱模式”或“ pillar box 模式”，电影比例不变，上下或左右会有黑边。 |
UniformToFill | 形状的几何被等比例缩放，直到它完全覆盖整个渲染区域（即填满不留空隙）。这会导致形状的一部分被裁剪掉，但比例不变。 | 就像把照片设为电脑桌面时的“填充”模式，照片比例不变，但边缘可能被裁掉一些。 |
重要提示：Stretch属性不仅影响Shape的几何形状拉伸，当Shape的Fill或Stroke使用的是TileBrush（如ImageBrush,DrawingBrush,VisualBrush）时，Stretch同样会影响这些画刷内容的填充行为。这一点常常被忽略。
3. 环境准备与前置条件
为了实践本文的所有示例，你需要一个基础的 WPF 开发环境。
- 开发平台：Windows 10 或 Windows 11。
- 开发工具：
- Visual Studio 2022（推荐）或 Visual Studio 2019。社区版即可。
- 在安装时，确保勾选了“.NET 桌面开发”工作负载。
- .NET 版本：本文示例基于.NET 6.0、.NET 7.0、.NET 8.0或.NET Framework 4.7.2+的 WPF 项目均可运行。WPF 的
Shape和StretchAPI 在这些版本中保持稳定。 - 项目类型：创建一个新的WPF 应用项目即可。
如果你使用的是其他 IDE（如 Rider）或通过命令行创建项目，请确保项目文件（.csproj）的TargetFramework指向上述任一版本。
4. 核心流程拆解：理解 Shape 的渲染管道
要正确应用Stretch，我们需要在心里勾勒出 WPF 渲染一个Shape（如Rectangle）的简化流程：
- 布局阶段：父容器（如
Grid）通过Measure和Arrange过程，为Rectangle确定最终的ActualWidth和ActualHeight。这个矩形区域就是它的“渲染区域”。 - 定义自然几何：
Rectangle根据其RadiusX/RadiusY等属性，在内部生成一个描述其形状的RectangleGeometry。这个几何有一个“自然边界”。 - 应用 Stretch：这是关键一步。系统根据
Stretch属性的值，对步骤2中的“自然几何”进行变换（缩放、平移）。None: 不进行变换。Fill/Uniform/UniformToFill: 计算一个变换矩阵，将自然几何映射到渲染区域内。
- 应用对齐：如果
Stretch是Uniform或None（且渲染区域大于自然大小），形状在渲染区域内的位置由HorizontalAlignment和VerticalAlignment属性决定（默认是Center）。 - 渲染：将变换后的几何，用指定的
Fill和Stroke画刷绘制到屏幕上。
流程的核心：Stretch作用于“几何变换”这一步。它决定了形状的“骨架”如何适应其“画布”（渲染区域）。
5. 完整示例与代码实现：四种 Stretch 模式的视觉对比
让我们通过一个具体的 XAML 示例，直观地看到同一个Ellipse（正圆）在同一个大小的容器内，设置不同Stretch值时的表现差异。我们将使用Grid作为容器，并为其设置背景色以便观察边界。
5.1 创建示例项目与界面
首先，在MainWindow.xaml中，我们设计一个对比界面：
<Window x:Class="WpfStretchDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Stretch 枚举值详解" Height="600" Width="900"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- 标题和说明 --> <TextBlock Grid.Row="0" Text="C#/WPF - Stretch 属性对 Ellipse（正圆）的影响" FontSize="18" FontWeight="Bold" HorizontalAlignment="Center" Margin="10"/> <TextBlock Grid.Row="0" Text="所有椭圆（Ellipse）被放置于 200x150 的蓝色背景 Grid 中。观察其填充和变形情况。" FontSize="12" HorizontalAlignment="Center" Margin="10,35,10,10"/> <!-- 四种模式的对比区域 --> <UniformGrid Grid.Row="1" Columns="2" Rows="2"> <!-- Stretch=None --> <Border BorderBrush="Gray" BorderThickness="1" Margin="10" Padding="5"> <StackPanel> <TextBlock Text="Stretch = None" FontWeight="Bold" HorizontalAlignment="Center"/> <Grid Width="200" Height="150" Background="LightBlue" HorizontalAlignment="Center"> <!-- 关键在这里：Stretch=None --> <Ellipse Fill="OrangeRed" Stroke="Black" StrokeThickness="2" Width="100" Height="100" Stretch="None"/> </Grid> <TextBlock TextWrapping="Wrap" Margin="5"> <Run Text="几何按原始大小(100x100)绘制，不拉伸。由于小于容器，默认居中显示。"/> </TextBlock> </StackPanel> </Border> <!-- Stretch=Fill --> <Border BorderBrush="Gray" BorderThickness="1" Margin="10" Padding="5"> <StackPanel> <TextBlock Text="Stretch = Fill" FontWeight="Bold" HorizontalAlignment="Center"/> <Grid Width="200" Height="150" Background="LightBlue" HorizontalAlignment="Center"> <!-- 关键在这里：Stretch=Fill --> <Ellipse Fill="OrangeRed" Stroke="Black" StrokeThickness="2" Stretch="Fill"/> <!-- 注意：这里没有设置 Width/Height，形状将使用容器的全部空间 --> </Grid> <TextBlock TextWrapping="Wrap" Margin="5"> <Run Text="几何被非等比拉伸，填满整个容器(200x150)。正圆变成了椭圆。"/> </TextBlock> </StackPanel> </Border> <!-- Stretch=Uniform --> <Border BorderBrush="Gray" BorderThickness="1" Margin="10" Padding="5"> <StackPanel> <TextBlock Text="Stretch = Uniform" FontWeight="Bold" HorizontalAlignment="Center"/> <Grid Width="200" Height="150" Background="LightBlue" HorizontalAlignment="Center"> <!-- 关键在这里：Stretch=Uniform --> <Ellipse Fill="OrangeRed" Stroke="Black" StrokeThickness="2" Stretch="Uniform"/> </Grid> <TextBlock TextWrapping="Wrap" Margin="5"> <Run Text="几何等比例缩放，直到完全显示在容器内。由于容器是横向矩形，缩放以高度(150)为限，宽度方向留白。"/> </TextBlock> </StackPanel> </Border> <!-- Stretch=UniformToFill --> <Border BorderBrush="Gray" BorderThickness="1" Margin="10" Padding="5"> <StackPanel> <TextBlock Text="Stretch = UniformToFill" FontWeight="Bold" HorizontalAlignment="Center"/> <Grid Width="200" Height="150" Background="LightBlue" HorizontalAlignment="Center"> <!-- 关键在这里：Stretch=UniformToFill --> <Ellipse Fill="OrangeRed" Stroke="Black" StrokeThickness="2" Stretch="UniformToFill"/> </Grid> <TextBlock TextWrapping="Wrap" Margin="5"> <Run Text="几何等比例缩放，直到填满整个容器。缩放以宽度(200)为限，导致高度方向超出容器而被裁剪。"/> </TextBlock> </StackPanel> </Border> </UniformGrid> </Grid> </Window>5.2 关键代码解析
- 容器：我们使用一个固定尺寸（
Width="200" Height="150"）的Grid作为每个示例的容器，并设置Background="LightBlue"来清晰标定渲染区域的边界。 - 形状定义：
None示例：我们显式设置了Ellipse的Width="100" Height="100"。在Stretch="None"下，它严格按这个尺寸绘制，居中于蓝色区域。Fill/Uniform/UniformToFill示例：我们没有设置Ellipse的Width和Height。这意味着它的期望尺寸是(0,0)，布局系统会将父容器（蓝色Grid）分配的全部空间（200x150）作为它的渲染区域。然后，Stretch属性开始工作，决定这个“正圆几何”如何填充 200x150 的矩形区域。
Stretch设置：每个Ellipse的核心区别就在于Stretch属性的值。
5.3 运行与效果验证
运行项目（按F5），你将看到一个包含四个象限的窗口。每个象限展示一种Stretch模式的效果。
None：你会看到一个标准的、较小的橙色正圆位于蓝色区域的中心，周围有蓝色留白。Fill：你会看到一个被拉长的、填满整个蓝色区域的橙色椭圆。它的水平直径是200，垂直直径是150，不再是正圆。Uniform：你会看到一个较大的橙色正圆，其直径等于蓝色区域的高度（150），在蓝色区域内垂直方向填满，水平方向居中，左右两侧有蓝色留白。形状比例保持不变。UniformToFill：你会看到一个巨大的橙色正圆，其直径等于蓝色区域的宽度（200），这导致圆的上下部分被蓝色区域的边界裁剪掉了，你只能看到中间的一部分。形状比例保持不变，但内容被裁剪。
这个直观的对比是理解Stretch的第一步。请务必亲手运行这段代码，观察效果。
6. 进阶应用：Stretch 与 ImageBrush 的结合
Stretch的复杂性在结合ImageBrush时更上一层楼。此时存在两个层级的拉伸：
- Shape 层级：
Ellipse或Rectangle本身的Stretch属性，决定几何形状如何填充其渲染区域。 - Brush 层级：
ImageBrush也有自己的Stretch属性，决定图片如何填充它被应用到的区域（即形状的内部）。
这两个Stretch会共同作用。让我们看一个例子：用一个图片填充一个矩形，并尝试不同的组合。
<Window x:Class="WpfStretchDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Stretch with ImageBrush" Height="450" Width="800"> <StackPanel> <TextBlock Text="Shape.Stretch 与 ImageBrush.Stretch 的交互" FontSize="16" FontWeight="Bold" Margin="10"/> <UniformGrid Columns="2" Rows="2"> <!-- 案例1: Shape=Fill, Brush=Uniform --> <Border BorderBrush="Gray" BorderThickness="1" Margin="5" Padding="5"> <StackPanel> <TextBlock Text="Shape: Fill / Brush: Uniform" FontWeight="Bold"/> <Rectangle Width="300" Height="150" Stroke="Black" StrokeThickness="1" Stretch="Fill"> <Rectangle.Fill> <ImageBrush ImageSource="/assets/sample-image.jpg" Stretch="Uniform"/> </Rectangle.Fill> </Rectangle> <TextBlock TextWrapping="Wrap" FontSize="10"> 矩形被拉伸填满300x150区域。图片在矩形内部等比例缩放显示，可能留白。 </TextBlock> </StackPanel> </Border> <!-- 案例2: Shape=Uniform, Brush=Fill --> <Border BorderBrush="Gray" BorderThickness="1" Margin="5" Padding="5"> <StackPanel> <TextBlock Text="Shape: Uniform / Brush: Fill" FontWeight="Bold"/> <!-- 假设容器是400x200的Grid --> <Grid Width="300" Height="150" Background="LightGray"> <Rectangle Stroke="Black" StrokeThickness="1" Stretch="Uniform"> <Rectangle.Fill> <ImageBrush ImageSource="/assets/sample-image.jpg" Stretch="Fill"/> </Rectangle.Fill> </Rectangle> </Grid> <TextBlock TextWrapping="Wrap" FontSize="10"> 矩形在300x150区域内等比例缩放（变成一个正方形）。图片在这个正方形内部被非等比拉伸填满，会变形。 </TextBlock> </StackPanel> </Border> </UniformGrid> <TextBlock Text="最佳实践：通常将 Shape.Stretch 设为 Fill 或 None，然后通过 ImageBrush.Stretch 精确控制图片填充行为。" Margin="10" TextWrapping="Wrap" FontStyle="Italic"/> </StackPanel> </Window>关键点：
- 你需要准备一张名为
sample-image.jpg的图片，放在项目的/assets/文件夹下，并将其“生成操作”属性设置为“资源”或“内容”。 - 这个例子展示了组合的复杂性。通常，为了逻辑清晰，建议将
Shape的Stretch设置为Fill（让形状填满你为它设计的区域），然后专注于调整ImageBrush的Stretch来控制图片的显示方式。这样，Shape只负责定义“框”，Brush负责定义“框里的内容”。
7. 常见问题与排查思路
在使用Rectangle、Ellipse和Stretch时，你可能会遇到以下典型问题：
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 形状不显示 | 1.Width/Height为 0 或Auto，且父容器未分配空间。2. Fill和Stroke均为null或Transparent。3. 形状被其他元素遮挡。 | 1. 检查ActualWidth和ActualHeight是否大于0（在运行时查看或输出）。2. 临时设置一个明亮的 Stroke（如Stroke="Red"）看轮廓是否出现。3. 检查 Z 轴顺序或使用 Live Visual Tree 调试。 | 1. 为形状或父容器设置明确尺寸，或确保布局系统能正确分配空间。 2. 至少设置 Fill或Stroke之一。3. 调整 Panel.ZIndex或元素顺序。 |
| 形状显示为一条线或一个点 | StrokeThickness很大，但形状的逻辑尺寸很小。Stretch可能为None，且形状尺寸极小。 | 检查Width/Height是否设置得非常小（如 1）。检查Stretch模式。 | 增大形状的逻辑尺寸，或使用Stretch="Fill"让其填充可用空间。 |
| 圆角矩形（Rectangle）的圆角变形 | Stretch="Fill"会导致非等比拉伸，圆角的椭圆弧也会被拉伸，视觉上不再是“圆”角。 | 观察当容器宽高比变化时，圆角是否变得不均匀。 | 如果需要保持圆角为真正的圆弧，应使用Stretch="Uniform"，或固定Rectangle的尺寸，或使用Viewbox进行等比缩放。 |
| 使用 ImageBrush 填充时图片模糊 | 1. 图片本身分辨率低。 2. Stretch模式导致图片被放大超出原始尺寸。3. WPF 默认的位图缩放算法（Bilinear）导致。 | 检查图片原始尺寸和渲染尺寸。尝试不同的Stretch值。 | 1. 使用更高分辨率的图片。 2. 考虑使用 Stretch="None"或Uniform避免过度放大。3. 设置 RenderOptions.BitmapScalingMode="HighQuality"或"NearestNeighbor"（根据需求）以改善缩放质量。 |
| 在 Viewbox 中形状表现异常 | Viewbox本身会对子元素进行拉伸。子Shape的Stretch属性与Viewbox的Stretch属性可能产生冲突或叠加效果。 | 分析Viewbox.Stretch和内部Shape.Stretch的组合效果。 | 理解Viewbox是先缩放子元素的整个“逻辑树”，然后子元素再应用自己的Stretch。通常，让Viewbox负责整体缩放，将内部Shape的Stretch设为Fill或None来简化逻辑。 |
| 性能问题：大量复杂形状 | 复杂的Path数据或大量形状，结合动画或频繁重绘，可能导致性能下降。Stretch计算本身开销很小。 | 使用性能分析工具（如 Visual Studio Diagnostic Tools）检查 UI 线程耗时。 | 考虑使用DrawingVisual或WriteableBitmap进行更底层的渲染优化。对于静态或简单形状，Shape的性能通常足够。 |
8. 最佳实践与工程建议
明确设计意图：在动手写 XAML 之前，先想清楚你想要的最终效果。
- 保持比例：首选
Stretch="Uniform"。 - 填满区域，不惜变形：使用
Stretch="Fill"。 - 填满区域，保持比例，允许裁剪：使用
Stretch="UniformToFill"。 - 固定尺寸，精确定位：使用
Stretch="None"并设置明确的Width/Height和Alignment。
- 保持比例：首选
优先使用布局系统，而非硬编码尺寸：尽量让父容器（
Grid、DockPanel等）来决定形状的最终渲染区域，然后将形状的Stretch设为Fill。这能更好地适应窗口缩放和不同分辨率。处理 ImageBrush 时的策略：
- 策略分离：让
Shape负责“框”，ImageBrush负责“图”。通常设置Shape.Stretch="Fill"，然后根据图片显示需求选择ImageBrush.Stretch（常用Uniform或UniformToFill）。 - 注意 Viewport 和 TileMode：对于更复杂的平铺背景，
ImageBrush的Viewport、ViewportUnits和TileMode属性比Stretch更强大。
- 策略分离：让
在高DPI（缩放）场景下的考量：WPF 默认是设备无关单位（1/96英寸）。在高DPI显示器上，系统会进行缩放。确保你的形状和画刷使用矢量资源（如
Path数据、XAML 定义的Geometry）或高分辨率位图，以避免模糊。Stretch属性本身与DPI缩放兼容良好。动画与 Stretch：如果要对一个形状的尺寸进行动画处理，直接动画化
Width/Height或使用RenderTransform（如ScaleTransform）是更高效和可控的方式。在动画过程中改变Stretch属性可能会引发不必要的布局计算。代码动态设置：在 C# 代码中，你可以像设置其他属性一样设置
Stretch。// 假设 myRectangle 是你在 XAML 中定义的 Rectangle 控件 myRectangle.Stretch = Stretch.Uniform; // 或者动态创建一个带 Stretch 的椭圆 Ellipse dynamicEllipse = new Ellipse { Fill = Brushes.SteelBlue, Stroke = Brushes.Black, StrokeThickness = 1, Stretch = Stretch.UniformToFill, Width = 100, // 逻辑尺寸，会被 Stretch 影响 Height = 100 }; // 记得将它添加到某个容器的 Children 集合中 myCanvas.Children.Add(dynamicEllipse);
掌握Stretch属性，是你在 WPF 中实现精准、自适应 UI 绘制的关键一步。它不是一个高级特性，而是一个基础但必须理解透彻的核心概念。下次当你画的圆“不圆”了，或者矩形不肯填满它的容器时，不要再去盲目调整边距和对齐，先问问自己：Stretch设置对了吗？
