这类图形绘制和布局拉伸的问题最让新手困惑的往往不是“怎么画”而是“画出来之后为什么和我想的不一样”。尤其是在WPF里你拖一个Rectangle或Ellipse到界面上设置了宽高但一运行图形可能被拉伸、压缩甚至看不见。核心症结通常出在对Stretch这个枚举值的理解上它直接决定了图形如何填充为其分配的空间。这篇文章不是简单地罗列API而是从“实际画出来是什么样”这个结果出发拆解Stretch的四种模式None,Fill,Uniform,UniformToFill在矩形和椭圆绘制上的具体表现。我会结合布局容器如Grid,Canvas,Viewbox的影响告诉你为什么有时候设置Stretch无效以及如何组合使用HorizontalAlignment和VerticalAlignment来达到精确控制。无论你是刚接触WPF界面开发还是在使用类似Halcon、OpenTK做图形混合渲染时遇到布局适配问题这里面的思路都能直接套用。1. 先搞清楚“画布”和“画笔”理解WPF的绘制与布局容器在动手写代码之前必须建立两个核心概念绘制形状的“画笔”和容纳形状的“画布”。在WPF中Rectangle和Ellipse这些Shape派生类本身既是“画笔”定义了要画什么也自带一块逻辑上的“画布”即它们自身的Width和Height。但最终这块“画布”会被放置到更大的“画框”——也就是父级布局容器如Grid、Canvas、StackPanel里。1.1 形状的“内在尺寸”与“外在约束”Rectangle和Ellipse有几个关键属性Width/Height定义形状逻辑上的“内在尺寸”。你可以理解为形状自己认为自己有多大。Stretch定义当形状的“可用空间”由父容器分配与其“内在尺寸”不一致时如何调整自身去填充那个空间。HorizontalAlignment/VerticalAlignment当形状的尺寸经过Stretch调整后小于其“可用空间”时决定形状在这个空间内的对齐方式。这里最大的误区是很多人以为Stretch是拉伸形状去填满整个窗口或父容器。不完全对。Stretch拉伸的目标是填满父容器分配给这个形状的那个“格子”。这个“格子”的大小由复杂的WPF布局系统决定。1.2 父容器如何影响“可用空间”我们来看几个常见场景在Canvas中Canvas是绝对定位容器。你通过Canvas.Left,Canvas.Top放置形状Canvas不会对形状施加任何尺寸约束除非你显式设置了Canvas的尺寸。此时形状的“可用空间”理论上可以无限大但通常由形状自身的Width/Height决定。Stretch在Canvas里基本不起作用除非你通过其他方式如绑定改变了形状的实际渲染尺寸。在Grid的单元格中这是Stretch最典型的用武之地。Grid的单元格会根据行/列的定义分配空间。如果你将形状放入一个Width”Auto”的列那么列的宽度会适应形状的宽度Stretch可能看不到效果。如果你将列宽设为*或固定值形状的“可用空间”就是这个固定值Stretch行为就会非常明显。在Viewbox中Viewbox是一个特殊的装饰器它的唯一目的就是对其唯一子元素进行缩放以填满自身。Viewbox的Stretch属性与形状的Stretch属性会共同作用有时会产生嵌套缩放的效果需要特别注意。理解了这个前提我们再来看Stretch的四种模式就不会只盯着那几个枚举名字而是能预判它在不同容器里的实际渲染结果。2. 拆解Stretch的四种模式从“不变形”到“填满”假设我们有一个RectangleWidth”100″,Height”60″Stroke”Black”,StrokeThickness”2″Fill”LightBlue”。我们把它放在一个Grid的单元格里并且把这个单元格的尺寸固定为200×150。这样形状的“可用空间”(200×150)就大于其“内在尺寸”(100×60)Stretch的效果可以清晰观察。2.1 Stretch.None保持自我绝不拉伸这是默认值。形状严格遵循其Width和Height。无论分配给它的空间有多大它都保持原样。Grid Width200 Height150 BackgroundLightGray Rectangle Width100 Height60 StrokeBlack StrokeThickness2 FillLightBlue StretchNone HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid效果与解读 你会看到一个100×60的矩形静止在200×150灰色区域的中央因为设置了Alignment为Center。如果Alignment是Stretch默认值矩形仍为100×60但会被放在左上角(0,0)位置因为Stretch对齐在尺寸小于空间时等价于Top和Left。何时使用 当你需要形状的尺寸精确可控不随容器变化时。例如绘制一个固定大小的图标、一个作为装饰的几何图形。2.2 Stretch.Fill完全填充不顾比例形状被拉伸以完全填满分配给它的空间。注意是完全这意味着宽高比Aspect Ratio不会被保持。Grid Width200 Height150 BackgroundLightGray Rectangle Width100 Height60 StrokeBlack StrokeThickness2 FillLightBlue StretchFill/ /Grid效果与解读 你会看到一个被拉长压扁的矩形它严丝合缝地填满了整个200×150的灰色区域。原来的100×60的宽高比丢失了。对于Ellipse你会看到一个被拉成“橄榄球”或“压扁的鸡蛋”形状的椭圆。何时使用 当填充区域的形状比例不重要重要的是占满整个区域时。比如作为某个按钮的背景色块且按钮本身不是正方形。2.3 Stretch.Uniform等比例缩放完整显示这是最常用、也最符合直觉的模式。形状会进行等比例缩放直到其宽度或高度与可用空间的宽度或高度一致同时确保整个形状都能完整显示在空间内。缩放后形状的某一边会贴紧空间边界另一边则会有留白。Grid Width200 Height150 BackgroundLightGray Rectangle Width100 Height60 StrokeBlack StrokeThickness2 FillLightBlue StretchUniform/ /Grid效果与解读计算缩放比例空间宽高比200/150≈1.33形状宽高比100/60≈1.67。形状更“瘦长”。以高度为基准缩放如果让形状高度填满150则宽度需要变为150*(100/60)250超过了200不行。以宽度为基准缩放让形状宽度填满200则高度需要变为200*(60/100)120小于150可行。最终矩形被等比例放大到200×120完整显示在200×150的空间内。上下各有15像素的留白。何时使用 绝大多数需要保持图形原始比例的场景。如图片查看器、图标缩放、地图显示避免变形。2.4 Stretch.UniformToFill等比例缩放完全填充这个模式有点“激进”。形状会进行等比例缩放直到其宽度和高度都至少与可用空间的宽度和高度一致并完全填满空间。这意味着形状的某一部分可能会被裁剪掉因为它必须填满整个区域。Grid Width200 Height150 BackgroundLightGray Rectangle Width100 Height60 StrokeBlack StrokeThickness2 FillLightBlue StretchUniformToFill/ /Grid效果与解读 继续上面的计算。形状宽高比1.67 空间宽高比1.33。以高度为基准缩放让形状高度填满150宽度变为250。此时宽度250 空间宽度200满足“至少”填满的条件。最终矩形被等比例放大到250×150其左右两侧各超出空间边界25像素这部分被裁剪掉了。你看到的是一个填满200×150区域的矩形中间部分。何时使用 当你需要一个背景图案或纹理等比例缩放并完全覆盖一个区域且不介意边缘被裁剪时。例如全屏背景图、某些艺术化设计元素。为了更直观这里有一个对比表格Stretch 模式是否保持宽高比是否填满空间是否可能被裁剪典型应用场景None保持否否固定尺寸图标、精确绘图Fill不保持是否非比例敏感的背景填充Uniform保持否可能有留白否图片查看、图标缩放、地图UniformToFill保持是是全屏背景、纹理覆盖3. 实战组合拳Alignment、容器与Stretch的协同单纯理解Stretch不够必须把它放到WPF的布局上下文里。HorizontalAlignment和VerticalAlignment以下简称Alignment与Stretch共同决定了形状的最终位置和尺寸。3.1 当Stretch为None时Alignment决定位置此时形状尺寸固定Alignment控制这个固定大小的形状在“可用空间”内的位置左、中、右、上、下、拉伸。注意Alignment的Stretch值在这里不会拉伸形状它仅仅意味着形状的对齐方式与父容器分配空间的方式一致对于固定尺寸的子元素Stretch对齐等效于Top和Left。3.2 当Stretch为Fill/Uniform/UniformToFill时过程分两步第一步计算尺寸。根据Stretch规则和“可用空间”计算出形状渲染后的实际尺寸。第二步对齐定位。用这个实际尺寸作为一个“块”再根据Alignment属性将其放置到“可用空间”内。这里有一个关键点对于Stretch.Fill计算出的实际尺寸永远等于可用空间尺寸所以无论Alignment设置为什么形状都已经填满对齐操作无效。对于Stretch.Uniform计算出的实际尺寸通常小于可用空间此时Alignment就起作用了可以控制形状在留白区域中的位置居中、靠左等。3.3 在Canvas中的特殊行为在Canvas中布局系统不约束子元素大小。形状的Width/Height直接作为其尺寸。Stretch属性通常无效因为“可用空间”没有被明确定义可以认为是无限大。形状的位置完全由Canvas.Left/Top等附加属性控制。Alignment属性在Canvas中也无效。注意如果你通过RenderTransform或LayoutTransform对形状进行缩放那是在Stretch计算之后应用的变换两者效果会叠加。3.4 在Viewbox中的嵌套缩放Viewbox也有一个Stretch属性它控制如何缩放其唯一子元素以适应自身。如果你把一个Stretch”Uniform”的Rectangle放在一个Stretch”Fill”的Viewbox里会发生什么Viewbox Width200 Height150 StretchFill Rectangle Width100 Height60 StrokeBlack FillLightBlue StretchUniform/ /ViewboxViewbox的Stretch”Fill”会试图扭曲其子元素整个Rectangle控件以填满200×150。在扭曲后的Rectangle控件内部它的Stretch”Uniform”开始生效试图在扭曲后的空间内保持矩形的宽高比。最终结果可能非常混乱通常不是你想要的效果。最佳实践是当使用Viewbox时将其内部元素的Stretch设置为None由Viewbox统一负责缩放逻辑。或者避免这种嵌套的拉伸设置。4. 从原理到排查为什么我的Stretch设置没效果理解了原理排查问题就有了清晰的路径。当你发现设置的Stretch没有按预期工作时可以按以下顺序检查4.1 检查第一步父容器是否提供了明确的“可用空间”这是最常见的原因。如果父容器如Grid的行或列的尺寸是Auto或者父容器本身也被更大的容器约束那么它分配给子形状的空间可能正好就是子形状的Width/Height。此时“可用空间”等于“内在尺寸”任何Stretch模式看起来都和None一样。如何排查给父容器设置一个明确的、大于子元素内在尺寸的宽度和高度。例如在Grid的单元格定义中使用Width”*”或固定值而不是Auto。使用开发工具如Visual Studio的Live Visual Tree或Snoop查看形状的ActualWidth和ActualHeight以及其父容器的RenderSize。4.2 检查第二步是否有其他属性覆盖了尺寸WPF中影响最终渲染尺寸的因素很多RenderTransform/LayoutTransform这些变换发生在布局之后或之中会改变最终视觉大小但不会改变布局系统计算的尺寸。Margin外边距会占用空间影响“可用空间”的计算。MinWidth/MaxWidth/MinHeight/MaxHeight这些约束优先级很高可能会限制Stretch的效果。4.3 检查第三步Alignment设置是否冲突回顾3.2节。如果你设置了Stretch”Fill”却又设置了HorizontalAlignment”Center”后者是无效的。如果你想要一个等比例缩放且居中的效果应该使用Stretch”Uniform”和HorizontalAlignment”Center”、VerticalAlignment”Center”。4.4 针对椭圆的特殊点RadiusX和RadiusYEllipse本质上是Rectangle的特例。在WPF中Ellipse由EllipseGeometry定义其Stretch行为与Rectangle完全一致。但有时人们会混淆Ellipse和绘制圆角矩形的Rectangle通过RadiusX和RadiusY属性。!-- 这是一个椭圆 -- Ellipse Width100 Height60 FillBlue/ !-- 这是一个圆角矩形当RadiusX和RadiusY足够大时看起来像椭圆 -- Rectangle Width100 Height60 RadiusX50 RadiusY30 FillBlue/对于圆角矩形RectangleStretch拉伸的是整个矩形的边界框包括圆角。圆角的曲率半径RadiusX/Y是绝对值不会随Stretch而等比例变化除非你将其绑定到Width/Height。这可能导致拉伸后圆角看起来不协调。4.5 在数据绑定和动态布局中的注意事项如果你的形状尺寸或容器尺寸是通过数据绑定、动画或复杂模板动态计算的Stretch的效果可能在布局周期的特定阶段才生效。确保绑定是TwoWay或模式正确并且没有在代码中错误地覆写了依赖项属性的值。5. 进阶应用与性能考量5.1 与路径(Path)和视图框(Viewbox)结合Rectangle和Ellipse是Shape而Path可以绘制更复杂的几何图形。Path的Data属性类型为Geometry同样受Stretch属性影响。你可以将一个复杂的PathGeometry放入Path中并通过Stretch让其适配容器这对于制作可伸缩的矢量图标非常有用。ViewboxPathStretch”None”是创建分辨率无关图标的经典组合。5.2 在自定义控件和模板中的应用在自定义控件模板ControlTemplate中经常使用Rectangle作为背景或装饰元素。此时将Rectangle的Stretch设置为Fill并将其Width和Height绑定到TemplateBinding ActualWidth和ActualHeight可以确保背景始终填满控件区域。ControlTemplate TargetType{x:Type Button} Grid !-- 背景始终填满 -- Rectangle x:NameBackgroundRect Fill{TemplateBinding Background} StretchFill/ !-- 内容 -- ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid /ControlTemplate5.3 性能与渲染提示对于大量、动态变化的形状Stretch计算和渲染会带来性能开销。缓存与复用如果形状不常变化考虑将Shape的CacheMode设置为BitmapCache。简化形状对于非常复杂的Path考虑使用StreamGeometry代替PathGeometry前者更轻量。避免不必要的拉伸如果尺寸固定明确使用Stretch”None”。布局系统不需要为它计算拉伸逻辑。DrawingVisual与渲染线程在需要绘制成千上万个简单形状如数据点、粒子的超高性能场景Shape可能不是最佳选择。考虑使用DrawingVisual在渲染线程进行绘制但这属于更底层的图形API。5.4 与Halcon、OpenTK等图形库混合渲染在WPF中集成Halcon或OpenTK通过WindowsFormsHost或D3DImage进行混合渲染时经常需要将WPF控件如覆盖层、测量矩形、ROI椭圆与底层图形对齐。这时对WPF中覆盖层Rectangle/Ellipse的Stretch和Alignment的精确控制就至关重要。你需要确保WPF层的坐标变换与底层图形库的视口变换同步。通常做法是将WPF覆盖层Canvas的RenderTransform与底层图形库的缩放平移矩阵绑定而覆盖层内具体形状的Stretch可以设为None尺寸和位置通过绑定到变换后的逻辑坐标来计算。回到最初的问题C#/WPF绘制矩形和椭圆以及Stretch枚举值的设置。它远不止是设置一个属性那么简单。核心在于理解WPF的布局系统——形状在由父容器划定的“格子”里根据Stretch规则决定如何调整自己以适应格子再根据Alignment规则决定在格子里的位置。我个人的调试习惯是当图形显示异常时第一反应不是去改Stretch而是先用工具查看形状的ActualWidth/Height和其父容器的最终尺寸确认“可用空间”是否如我所想。很多时候问题出在布局约束上而不是拉伸模式上。把Grid、StackPanel这些容器的尺寸分配规则搞明白Stretch用起来就得心应手了。