这次我们来看一个在 WPF 开发中非常基础但至关重要的绘图问题如何绘制矩形和椭圆以及如何通过Stretch属性来控制它们的填充行为。这不仅是界面美化的基础更是理解 WPF 布局和渲染机制的关键一步。对于 C# 和 WPF 开发者来说Rectangle和Ellipse是Shape类下最常用的两个元素。它们的绘制本身很简单但如何让它们在不同尺寸的容器中“正确”地显示才是真正的挑战。Stretch枚举属性就是解决这个问题的核心。它决定了图形如何拉伸以填充为其分配的空间直接影响最终 UI 的视觉效果和布局一致性。本文将直接切入主题先讲清楚Stretch的四种枚举值None,Fill,Uniform,UniformToFill各自代表什么效果以及它们对矩形和椭圆绘制的影响。然后我们会通过实际的 XAML 和 C# 代码示例演示如何创建、配置这些图形并观察它们在不同容器如Grid,Canvas,Viewbox中的行为差异。最后我们会探讨一些实际开发中的最佳实践和常见陷阱。无论你是正在学习 WPF 入门还是在开发中遇到了图形显示不匹配容器的问题这篇文章都能提供清晰的解决方案和可运行的代码参考。1. 核心能力速览在深入代码之前我们先快速了解Rectangle、Ellipse和Stretch属性的核心要点。能力项说明图形元素System.Windows.Shapes.Rectangle(矩形) 和System.Windows.Shapes.Ellipse(椭圆)。它们是FrameworkElement可以直接参与 WPF 布局系统。核心控制属性Width/Height: 定义图形的内部尺寸逻辑尺寸。Stretch: 定义图形如何拉伸以填充其最终渲染区域ActualWidth/ActualHeight。Stretch 枚举值None: 不拉伸按Width/Height精确渲染。Fill: 非等比拉伸完全填充区域可能变形。Uniform: 等比拉伸完整显示图形区域可能有留白。UniformToFill: 等比拉伸完全填充区域图形可能被裁剪。依赖的容器图形的最终大小由容器的布局逻辑如Grid的行列、Canvas的Left/Top、Viewbox的缩放和Stretch属性共同决定。适用场景UI 装饰、数据可视化图表、自定义按钮/图标背景、进度指示器、以及任何需要基础矢量图形的场合。性能与门槛纯 CPU 渲染无显存要求。作为 WPF 内置Shape无需额外安装开发环境Visual Studio支持即可。启动即用适合所有 Windows 桌面开发。2. 适用场景与使用边界Rectangle和Ellipse是 WPF 中构建自定义 UI 的基础砖块。理解它们的适用场景和限制能帮助你更高效地使用它们。适合谁用WPF 初学者学习矢量图形和布局系统的绝佳起点。UI/UX 开发者需要快速创建简单的几何形状作为界面元素如圆角按钮、背景框、分割线、状态指示灯等。数据可视化开发者用于绘制柱状图、饼图、散点图等图表的基本图形单元。工具类应用开发者在开发上位机、管理系统、绘图工具时用于标注区域、绘制示意图。能解决什么问题快速实现几何图形UI无需导入图片或复杂 Path 数据用几行 XAML 即可创建。动态调整图形外观通过数据绑定动态改变Width、Height、Fill、Stroke等属性实现交互效果如进度条。响应式布局结合Stretch属性和 WPF 强大的布局面板让图形能自适应容器大小的变化。不适合什么场景复杂矢量图形对于星形、多边形、不规则曲线应使用Path元素配合Geometry。高性能、大量图形绘制当需要绘制成千上万个动态图形时如实时曲线图Shape对象开销较大应考虑使用DrawingVisual或WriteableBitmap进行更底层的渲染。需要复杂变换和动画虽然支持但Path的Geometry在复杂变换上通常更灵活。使用边界与合规性版权与设计使用这些基础图形构建的 UI 元素其设计版权归属于你的应用程序。但应注意独特的 UI 设计风格本身可能构成知识产权。技术边界它们是纯客户端的 UI 元素不涉及网络通信、文件操作等因此没有额外的安全或隐私风险。主要风险在于不正确的使用可能导致界面布局混乱或性能下降。3. 环境准备与前置条件开始绘制前确保你的开发环境已就绪。这是一个纯 WPF 项目需求门槛极低。操作系统Windows 7 SP1 及以上版本推荐 Windows 10/11。WPF 是 .NET Framework/WPF 和 .NET Core/.NET 5 的一部分。开发环境IDEVisual Studio 2019 或更高版本社区版即可。或者使用 JetBrains Rider。.NET 版本传统 WPF 项目选择 .NET Framework 4.6.1 或更高版本。现代 WPF 项目强烈推荐使用 .NET 6、.NET 8 或更高版本的 SDK。它们性能更好支持跨平台UI 部分仍需 Windows。项目类型在 Visual Studio 中创建新项目时选择“WPF 应用程序”模板.NET Framework 或 .NET Core。无需额外 NuGet 包Rectangle和Ellipse位于PresentationFramework程序集中创建 WPF 项目后默认引用。验证环境 创建一个新的 WPF 项目后打开MainWindow.xaml在Grid标签内尝试输入以下代码如果智能提示能出现Rectangle和Ellipse则说明环境正常。Rectangle Width50 Height50 FillBlue/ Ellipse Width50 Height50 FillRed/4. 理解 Stretch 枚举值这是本文的核心。Stretch属性定义了一个Shape如Rectangle,Ellipse,Path的内容如何拉伸以填充其布局槽Layout Slot。它有四个枚举值其行为差异至关重要。假设我们有一个图形其逻辑尺寸为Width100,Height50一个扁平的矩形或椭圆。而它被放置在一个200x100的容器单元格中。下面通过表格和概念图示来理解Stretch 值行为描述是否保持宽高比是否可能被裁剪在 200x100 容器中的效果图形逻辑尺寸 100x50None不进行任何拉伸。图形按照其Width和Height精确渲染。不适用原样否在容器左上角显示一个 100x50 的图形周围有空白。Fill图形被拉伸以完全填充容器的整个区域。不保持宽高比。否否图形被水平拉伸2倍垂直拉伸2倍变成一个 200x100 的图形。椭圆会变形成“矮胖”的椭圆。Uniform图形被等比缩放直到能完全放入容器内。图形会完整显示但容器可能留有空白。是否图形按比例缩放。缩放因子取min(200/100, 100/50)min(2,2)2。图形变为 200x100恰好填满此时与Fill结果相同因为容器宽高比恰好与图形相同。如果容器是 200x150则缩放因子为min(2,3)2图形变为 200x100上下各有25单位的空白。UniformToFill图形被等比缩放直到能完全覆盖容器区域。图形会完整填充容器但超出容器的部分会被裁剪。是是图形按比例缩放。缩放因子取max(200/100, 100/50)max(2,2)2。图形变为 200x100恰好填满且不被裁剪。如果容器是 200x150则缩放因子为max(2,3)3图形需要变为 300x150但容器只有200宽因此左右各50单位的内容会被裁剪掉。关键理解点Stretch生效的前提是图形所在的容器为它分配了空间即ActualWidth和ActualHeight大于0。在Canvas中如果你用Canvas.Left/Top定位但未参与布局Stretch可能不生效。Stretch的默认值是Fill。这意味着如果你不设置矩形和椭圆会非等比拉伸填满其区域这常常导致意外的变形。对于EllipseUniform是最常用的值因为它能保证永远是一个正圆或标准的椭圆不会变形。5. 绘制矩形与椭圆基础示例让我们从最简单的代码开始创建并设置基本的矩形和椭圆。5.1 在 XAML 中绘制这是最直接的方式。打开MainWindow.xaml在Grid中添加以下代码StackPanel OrientationVertical Margin10 !-- 一个简单的蓝色矩形默认 StretchFill -- Rectangle Width100 Height60 FillLightBlue StrokeBlack StrokeThickness2 Margin5/ !-- 一个简单的红色椭圆设置 StretchUniform 保证不变形 -- Ellipse Width100 Height60 FillLightCoral StrokeDarkRed StrokeThickness2 StretchUniform Margin5/ !-- 一个带圆角的矩形 -- Rectangle Width120 Height80 FillLightGreen StrokeDarkGreen StrokeThickness2 RadiusX15 RadiusY15 Margin5/ /StackPanelWidth/Height: 定义图形的逻辑尺寸。Fill: 内部填充的画笔颜色、渐变等。Stroke: 轮廓线的画笔。StrokeThickness: 轮廓线粗细。RadiusX/RadiusY: 仅Rectangle圆角的 x 和 y 轴半径用于创建圆角矩形。Stretch: 这里为椭圆显式设置为Uniform。5.2 在 C# 代码中动态创建有时我们需要根据数据或逻辑动态生成图形。在MainWindow.xaml.cs的构造函数或某个事件处理程序中添加using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; public MainWindow() { InitializeComponent(); // 假设我们有一个名为 myCanvas 的 Canvas 控件在 XAML 中 // Canvas x:NamemyCanvas BackgroundWhite/ // 1. 创建并配置一个矩形 Rectangle dynamicRect new Rectangle(); dynamicRect.Width 80; dynamicRect.Height 80; dynamicRect.Fill new SolidColorBrush(Colors.Orange); dynamicRect.Stroke new SolidColorBrush(Colors.Brown); dynamicRect.StrokeThickness 1; dynamicRect.RadiusX 10; dynamicRect.RadiusY 10; dynamicRect.Stretch Stretch.Uniform; // 设置拉伸模式 // 2. 创建并配置一个椭圆 Ellipse dynamicEllipse new Ellipse(); dynamicEllipse.Width 80; dynamicEllipse.Height 80; dynamicEllipse.Fill new LinearGradientBrush(Colors.Yellow, Colors.Red, 45); dynamicEllipse.Stroke new SolidColorBrush(Colors.DarkRed); dynamicEllipse.StrokeThickness 1.5; dynamicEllipse.Stretch Stretch.Uniform; // 3. 将图形添加到 Canvas 中并设置位置 Canvas.SetLeft(dynamicRect, 50); Canvas.SetTop(dynamicRect, 50); Canvas.SetLeft(dynamicEllipse, 150); Canvas.SetTop(dynamicEllipse, 50); myCanvas.Children.Add(dynamicRect); myCanvas.Children.Add(dynamicEllipse); }6. Stretch 属性效果实战演示现在我们创建一个直观的示例来对比Stretch四种模式的效果。我们将图形放入不同尺寸的容器中观察。6.1 测试环境搭建在MainWindow.xaml中创建如下界面使用Grid和Border作为固定尺寸的容器Window x:ClassWpfStretchDemo.MainWindow xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:xhttp://schemas.microsoft.com/winfx/2006/xaml TitleStretch 属性演示 Height600 Width800 ScrollViewer StackPanel Margin20 TextBlock FontSize16 FontWeightBold Margin0,0,0,10 图形逻辑尺寸Width100, Height50 (一个扁平的形状) /TextBlock TextBlock Margin0,0,0,20 容器尺寸每个 Border 为 200x100 (宽高比 2:1与图形逻辑宽高比一致) /TextBlock WrapPanel !-- Stretch None -- Border BorderBrushGray BorderThickness1 Margin10 Width200 Height100 StackPanel TextBlock TextStretchNone HorizontalAlignmentCenter/ Rectangle Width100 Height50 FillLightBlue StrokeBlue StretchNone/ /StackPanel /Border !-- Stretch Fill -- Border BorderBrushGray BorderThickness1 Margin10 Width200 Height100 StackPanel TextBlock TextStretchFill HorizontalAlignmentCenter/ Rectangle Width100 Height50 FillLightCoral StrokeRed StretchFill/ /StackPanel /Border !-- Stretch Uniform -- Border BorderBrushGray BorderThickness1 Margin10 Width200 Height100 StackPanel TextBlock TextStretchUniform HorizontalAlignmentCenter/ Rectangle Width100 Height50 FillLightGreen StrokeGreen StretchUniform/ /StackPanel /Border !-- Stretch UniformToFill -- Border BorderBrushGray BorderThickness1 Margin10 Width200 Height100 StackPanel TextBlock TextStretchUniformToFill HorizontalAlignmentCenter/ Rectangle Width100 Height50 FillKhaki StrokeOrange StretchUniformToFill/ /StackPanel /Border /WrapPanel TextBlock FontSize14 FontWeightBold Margin0,30,0,10 测试容器宽高比与图形不一致时 (容器 200x150宽高比 4:3) /TextBlock WrapPanel Border BorderBrushGray BorderThickness1 Margin10 Width200 Height150 StackPanel TextBlock TextUniform (有留白) HorizontalAlignmentCenter/ Ellipse Width100 Height50 FillLightGray StrokeBlack StretchUniform/ /StackPanel /Border Border BorderBrushGray BorderThickness1 Margin10 Width200 Height150 StackPanel TextBlock TextUniformToFill (被裁剪) HorizontalAlignmentCenter/ Ellipse Width100 Height50 FillLightGray StrokeBlack StretchUniformToFill/ /StackPanel /Border /WrapPanel /StackPanel /ScrollViewer /Window运行并观察在第一行四个容器中因为容器宽高比 (2:1) 与图形逻辑宽高比 (2:1) 一致所以Fill、Uniform、UniformToFill的效果看起来都是填满容器。None则保持原大小。在第二行测试中容器变为 200x150 (4:3)图形逻辑尺寸仍是 100x50 (2:1)。Uniform: 为了完整放入按最小缩放因子 (min(200/100, 150/50)min(2,3)2) 缩放图形变为 200x100上下各有25像素空白。UniformToFill: 为了完全覆盖按最大缩放因子 (max(2,3)3) 缩放图形需要变为 300x150但容器只有200宽因此左右各50像素的内容被裁剪。6.2 结合 Viewbox 使用Viewbox是一个特殊的装饰器它会对子元素进行统一的拉伸缩放。将图形放在Viewbox里并由Viewbox的Stretch属性控制是一种常见的布局技巧。Border BorderBrushBlack BorderThickness1 Width300 Height150 Margin10 Viewbox StretchUniform !-- Viewbox 控制整体的缩放方式 -- StackPanel !-- 图形自身的 Stretch 属性在 Viewbox 内可能表现不同 -- Rectangle Width200 Height100 FillLightBlue StretchNone/ TextBlock Text我在 Viewbox 里 HorizontalAlignmentCenter/ /StackPanel /Viewbox /Border在这个例子里Viewbox会将整个StackPanel包含矩形和文本等比缩放以适配Border的 300x150 区域。此时矩形自身的StretchNone意义不大因为缩放是由外层Viewbox控制的。7. 实际应用场景与最佳实践理解了基本原理后我们看看在实际项目中如何应用。7.1 场景一创建自适应按钮或图标背景我们希望一个圆形按钮无论按钮大小如何变化背景始终是正圆。Button Width100 Height100 Button.Template ControlTemplate TargetTypeButton Grid !-- Ellipse 的 Width/Height 绑定到容器的 ActualWidth/Height -- !-- StretchUniform 确保永远是正圆 -- Ellipse Fill{TemplateBinding Background} StretchUniform/ ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid /ControlTemplate /Button.Template Button.Background LinearGradientBrush StartPoint0,0 EndPoint1,1 GradientStop ColorBlue Offset0/ GradientStop ColorLightBlue Offset1/ /LinearGradientBrush /Button.Background TextBlock TextClick Me ForegroundWhite/ /Button关键点在ControlTemplate中Ellipse会占据整个Grid空间。设置StretchUniform后无论按钮是正方形还是长方形Ellipse都会保持宽高比以短边为直径绘制正圆。如果按钮是长方形圆形周围会有留白。7.2 场景二实现数据绑定的进度条用矩形模拟一个水平进度条。Grid Width300 Height20 BackgroundLightGray !-- 背景轨道 -- Rectangle Fill#E0E0E0 RadiusX3 RadiusY3 StretchFill/ !-- 进度填充Width 绑定到进度值 -- Rectangle x:NameProgressFill FillGreen RadiusX3 RadiusY3 StretchFill HorizontalAlignmentLeft Width{Binding ProgressValue, Converter{StaticResource PercentageToWidthConverter}}/ !-- 进度文本 -- TextBlock Text{Binding ProgressValue, StringFormat{}{0}%} HorizontalAlignmentCenter VerticalAlignmentCenter/ /Grid在 ViewModel 或代码后台public double ProgressValue { get; set; } // 范围 0-100关键点这里两个矩形的StretchFill让它们填充父Grid。进度填充矩形的Width通过绑定和转换器动态计算为其父容器宽度的一个百分比。HorizontalAlignmentLeft确保它从左侧开始增长。7.3 场景三在 Canvas 中精确定位图形在Canvas中Stretch属性通常与Width/Height以及Canvas.Left/Top结合使用。Canvas Width400 Height300 BackgroundWhite !-- 一个固定位置和大小的矩形 -- Rectangle Canvas.Left50 Canvas.Top30 Width120 Height80 FillBlue StretchFill/ !-- 一个位置固定但希望随某个逻辑点缩放的椭圆 -- Ellipse Canvas.Left200 Canvas.Top100 Width80 Height80 FillRed StretchUniform/ /Canvas关键点在Canvas中Stretch属性仍然有效但它拉伸的目标区域是Width和Height定义的矩形区域而不是整个 Canvas。Canvas.Left/Top定义了该矩形区域的左上角位置。8. 常见问题与排查方法在使用Rectangle、Ellipse和Stretch时你可能会遇到以下问题问题现象可能原因排查方式解决方案图形不显示1.Width或Height为 0 或未设置。2.Fill属性未设置默认为null透明。3. 图形被其他元素遮挡。4. 容器未分配有效空间如Grid行/列定义错误。1. 检查图形和所有父容器的尺寸属性。2. 设置Fill为一个可见颜色如Red。3. 使用 Live Visual Tree 或 Snoop 工具检查可视化树和渲染边界。1. 明确设置Width/Height或确保容器能正确测量子元素。2. 始终设置Fill或Stroke。3. 调整ZIndex或元素顺序。图形变形椭圆不圆Stretch属性默认为Fill且容器宽高比与图形逻辑宽高比不同。检查图形所在容器的ActualWidth和ActualHeight并与图形的Width/Height比较。将图形的Stretch属性设置为Uniform。这是解决椭圆变形最直接的方法。Stretch 属性似乎没效果1. 图形被放置在Canvas中且未参与布局Canvas不约束子元素大小。2. 图形的Width/Height未设置或设置为Auto而父容器也未约束其大小。1. 检查父容器类型。在Canvas中Stretch需要明确的Width/Height。2. 检查ActualWidth和ActualHeight是否大于0。1. 在Canvas中必须为图形设置明确的Width和HeightStretch才会基于这个矩形区域生效。2. 将图形放入Grid、StackPanel等能提供尺寸约束的容器中。圆角矩形RadiusX/Y在拉伸后圆角变形RadiusX和RadiusY是绝对像素值不会随图形拉伸而等比缩放。观察图形拉伸后圆角是否显得过大或过小。如果需要圆角随图形大小等比变化可以考虑使用Border控件代替Rectangle因为Border的CornerRadius是相对于自身尺寸的。或者使用Path绘制自定义形状。性能问题大量图形导致UI卡顿每个Rectangle和Ellipse都是独立的FrameworkElement具有完整的视觉树和事件处理开销。当数量极大如 1000时性能下降。使用性能分析工具如 Visual Studio Diagnostic Tools检查 UI 线程渲染时间。对于静态或少量变化的复杂图形考虑使用DrawingVisual或WriteableBitmap进行一次性绘制。对于数据可视化考虑使用专门的图表库如 LiveCharts, OxyPlot。9. 最佳实践与使用建议明确设置 Stretch不要依赖默认值Fill。根据你的意图显式设置StretchNone、Uniform或UniformToFill。这能使代码意图更清晰避免意外的变形。优先使用 Uniform 处理椭圆和需要保持比例的图形除非你明确需要变形效果否则对于Ellipse或任何需要保持原始宽高比的图形将Stretch设为Uniform。理解容器的作用图形的最终渲染大小是容器布局逻辑和Stretch属性共同作用的结果。花时间理解Grid、StackPanel、Canvas、Viewbox等容器的布局特性。善用 Viewbox 进行整体缩放如果你需要整个一组控件包括图形、文字等一起等比缩放将它们放在一个Viewbox中并设置Viewbox的Stretch属性比单独设置每个图形的Stretch更简单有效。考虑使用 Path 替代复杂组合如果你需要更复杂的、非矩形或椭圆的形状或者需要更精细地控制图形的几何定义直接使用Path和Geometry如RectangleGeometry,EllipseGeometry,PathGeometry可能更合适。Geometry本身也有Stretch属性。数据绑定与动态更新Rectangle和Ellipse的属性Width,Height,Fill,StrokeThickness都支持数据绑定。结合Stretch可以轻松创建动态更新的数据可视化组件。测试不同DPI和高分辨率在高DPI显示器上确保你的图形渲染清晰。WPF 默认是设备无关的但复杂的Stroke和Effect可能需要额外注意。10. 总结Rectangle和Ellipse是 WPF 绘图工具箱里最直接的工具而Stretch属性是掌控它们如何在界面中“自适应”的关键阀门。核心就是理解四种拉伸模式None我说多大就多大。Fill不管变成啥样必须填满。Uniform保持体形完整显示宁可留白。UniformToFill保持体形必须填满多出来的裁掉。在实际项目中最常见的错误就是椭圆被拉扁这几乎总是因为使用了默认的StretchFill。记住这个口诀“要正圆设 Uniform”。下一步你可以尝试将Stretch与动画结合创建平滑的形状变换效果。探索Path元素和更复杂的Geometry它们拥有更强大的绘图能力。学习使用RenderTransform如ScaleTransform,RotateTransform对图形进行额外的变换这与Stretch是不同层面的控制。掌握这些基础你就能 confidently 使用 WPF 来构建既美观又灵活的图形化界面了。建议将本文的示例代码运行一遍并手动修改参数观察变化这是理解它们行为最有效的方式。