企业官网建设流程全解析

在 WPF 界面开发中，自定义绘制图形是提升应用视觉效果和交互体验的核心技能。无论是制作数据可视化图表、设计自定义控件，还是实现简单的绘图工具，掌握矩形和椭圆的绘制方法都是基础中的基础。然而，仅仅画出图形往往不够，如何让图形按照我们的意图去填充和适应其容器空间，才是让界面布局精准、美观的关键。这其中，Stretch属性的设置扮演了至关重要的角色，它直接决定了图形在有限空间内的“姿态”。

本文将系统性地讲解在 C#/WPF 中绘制矩形和椭圆的核心技术，并深入剖析Stretch枚举的四种模式（None,Fill,Uniform,UniformToFill）对图形渲染产生的具体影响。无论你是刚接触 WPF 图形系统的新手，还是希望深化对布局和渲染理解的中级开发者，都能通过本文获得一套从基础绘制到高级控制的完整解决方案。我们将从概念入手，通过大量可运行的代码示例，一步步带你掌握如何创建、定制并精确控制这些基本形状。

1. 核心概念：WPF 中的形状（Shape）与 Stretch 属性

在深入代码之前，我们需要理解两个核心概念：WPF 的Shape类族和Stretch属性。

1.1 WPF 的 Shape 类WPF 提供了一套用于绘制矢量图形的Shape派生类，位于System.Windows.Shapes命名空间。这些类都是FrameworkElement，意味着它们可以像按钮、文本框一样参与 WPF 的布局系统，拥有尺寸、边距、对齐等属性。我们最常使用的两个基本形状就是Rectangle（矩形）和Ellipse（椭圆）。Ellipse的一个特例是正圆，当它的Width和Height相等时即为圆形。

1.2 Stretch 属性的意义Stretch属性定义了一个内容（对于Shape来说，就是其内部的几何图形）如何拉伸以填充其分配到的空间。这个“分配到的空间”通常由形状的Width、Height属性，或其父容器（如Grid、Canvas）的布局逻辑决定。

Stretch是Shape类的一个关键属性，它接受一个System.Windows.Media.Stretch枚举值。理解这个属性是控制图形最终呈现效果的核心。很多初学者发现图形没有按预期显示，或者尺寸怪异，问题往往就出在对Stretch的理解上。

2. 环境准备与项目创建

在开始绘制之前，我们首先搭建一个简单的 WPF 项目环境。本文示例基于 .NET 6/8 的 WPF 项目，但核心概念适用于 .NET Framework 4.x 及更高版本。

2.1 创建项目

1. 打开 Visual Studio 2022。
2. 选择“创建新项目” -> 搜索“WPF” -> 选择“WPF 应用程序(.NET)”模板。
3. 为项目命名，例如 “WpfShapeDrawingDemo”，选择合适的位置和解决方案名称。
4. 确保目标框架选择 .NET 6.0 或 .NET 8.0（长期支持版本更稳定）。

2.2 理解默认项目结构创建完成后，你会看到几个主要文件：

• MainWindow.xaml: 主窗口的界面定义文件。
• MainWindow.xaml.cs: 主窗口的后台代码文件。
• App.xaml: 应用程序级别的资源和启动设置。

我们将主要在MainWindow.xaml中进行界面布局和形状定义，并在MainWindow.xaml.cs中演示动态创建的代码。

3. Stretch 枚举值深度解析

Stretch枚举包含四个值，它们的行为是本文的重点。为了直观理解，我们假设有一个形状（矩形或椭圆），它有一个“自然大小”（由其StrokeThickness和内部几何逻辑隐含决定），同时它被放置在一个尺寸为WidthxHeight的“容器框”内（这个框就是形状元素本身占用的布局空间）。Stretch决定了形状的“内容”如何适配这个“框”。

3.1 Stretch.None

• 行为：内容保持其自然大小，不进行任何拉伸。它会在容器框内按照HorizontalAlignment和VerticalAlignment属性进行对齐（默认是Center）。
• 视觉表现：图形尺寸固定，不受容器框大小变化的影响。如果容器框小于图形，图形会被裁剪。
• 适用场景：需要固定尺寸的图标、标志，或明确不希望被拉伸的图形。

3.2 Stretch.Fill

• 行为：内容被拉伸以完全填满容器框。不保持宽高比。宽度和高度独立缩放以适应容器。
• 视觉表现：图形会变形以充满整个可用区域。一个圆会变成一个椭圆，一个正方形会变成一个长方形。
• 适用场景：需要图形充满某个区域，且不关心原始比例，例如作为可拉伸的背景色块。

3.3 Stretch.Uniform

• 行为：内容被等比例缩放，以尽可能大地适应容器框，同时完全显示在框内。缩放因子取(容器宽度/自然宽度)和(容器高度/自然高度)中的较小值。图形会居中显示，两侧或上下可能出现空白区域。
• 视觉表现：图形保持原有比例，完整显示，但可能不会填满整个容器框。这是最常用的模式，用于“适应”视图。
• 适用场景：显示图片、图标、图表等需要保持原始比例的视觉元素。

3.4 Stretch.UniformToFill

• 行为：内容被等比例缩放，以完全填满容器框。缩放因子取(容器宽度/自然宽度)和(容器高度/自然高度)中的较大值。由于容器框的宽高比可能与图形不同，图形的一部分会被裁剪掉，但填满的区域看不到空白。
• 视觉表现：图形保持比例，但会放大直到没有空白，代价是边缘内容可能被裁切。
• 适用场景：作为全屏背景或横幅，要求无空白填充且可以接受边缘裁剪的情况。

4. 实战：在 XAML 中绘制矩形与椭圆并设置 Stretch

XAML 是声明式 UI 的首选方式，清晰直观。我们在MainWindow.xaml中创建一个Grid，并放置多个形状来对比Stretch的效果。

4.1 基础绘制：一个简单的矩形和椭圆首先，我们绘制最基本的形状，不显式设置Width/Height和Stretch，观察默认行为。

<Window x:Class="WpfShapeDrawingDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Shape & Stretch 演示" Height="450" Width="800"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- 默认状态的矩形 --> <Rectangle Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="3" Margin="10" Width="100" Height="60"/> <!-- 默认状态的椭圆 --> <Ellipse Fill="LightCoral" Stroke="DarkRed" StrokeThickness="3" Margin="10" Width="100" Height="60"/> </StackPanel> </Grid> </Window>

• Fill: 设置形状内部的填充画刷（颜色、渐变等）。
• Stroke: 设置形状轮廓线的画刷。
• StrokeThickness: 设置轮廓线的粗细。
• 我们为它们设置了固定的Width和Height。此时，由于没有显式设置Stretch，其默认值为Stretch.Fill。但因为尺寸固定且与“自然大小”一致，所以视觉上就是100x60的矩形和椭圆。

4.2 对比四种 Stretch 模式接下来，我们创建四个尺寸相同的Border作为容器，在每个里面放置一个相同“自然大小”的椭圆，但应用不同的Stretch值，以直观对比差异。

<Window x:Class="WpfShapeDrawingDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Shape & Stretch 演示" Height="600" Width="900"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="Stretch 枚举值效果对比 (容器: 200x100，椭圆初始: 80x40)" FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" Margin="10"/> <UniformGrid Grid.Row="1" Columns="2" Rows="2"> <!-- Stretch.None --> <Border BorderBrush="Gray" BorderThickness="1" Margin="20" Background="#FFF0F0F0"> <StackPanel> <TextBlock Text="Stretch.None" HorizontalAlignment="Center" FontWeight="Bold"/> <Ellipse Fill="LightGreen" Stroke="DarkGreen" StrokeThickness="2" Width="80" Height="40" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel> </Border> <!-- Stretch.Fill --> <Border BorderBrush="Gray" BorderThickness="1" Margin="20" Background="#FFF0F0F0"> <StackPanel> <TextBlock Text="Stretch.Fill" HorizontalAlignment="Center" FontWeight="Bold"/> <Ellipse Fill="LightCoral" Stroke="DarkRed" StrokeThickness="2" Width="80" Height="40" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel> </Border> <!-- Stretch.Uniform --> <Border BorderBrush="Gray" BorderThickness="1" Margin="20" Background="#FFF0F0F0"> <StackPanel> <TextBlock Text="Stretch.Uniform" HorizontalAlignment="Center" FontWeight="Bold"/> <Ellipse Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2" Width="80" Height="40" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel> </Border> <!-- Stretch.UniformToFill --> <Border BorderBrush="Gray" BorderThickness="1" Margin="20" Background="#FFF0F0F0"> <StackPanel> <TextBlock Text="Stretch.UniformToFill" HorizontalAlignment="Center" FontWeight="Bold"/> <Ellipse Fill="Gold" Stroke="Orange" StrokeThickness="2" Width="80" Height="40" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center"/> </StackPanel> </Border> </UniformGrid> </Grid> </Window>

关键点分析：

1. 每个Ellipse的Width=”80” Height=”40”定义了其“自然大小”或“内容尺寸”。
2. 每个Ellipse被放在一个大约200x100的Border容器中（由Margin和UniformGrid布局计算得出）。
3. Stretch=”None”: 椭圆保持80x40大小，在Border中居中显示，周围留有大量空白。
4. Stretch=”Fill”: 椭圆被拉伸到填满整个Border分配给它的空间，宽高比改变，变成了一个更扁的椭圆。
5. Stretch=”Uniform”: 椭圆等比例放大，直到宽度或高度触碰到Border的边界。由于容器宽高比 (~2:1) 与椭圆 (2:1) 相同，它恰好填满，没有空白也没有裁剪。如果比例不同，则会有空白。
6. Stretch=”UniformToFill”: 椭圆等比例放大，直到完全覆盖Border区域。由于本例中比例相同，效果与Uniform一致。如果比例不同，椭圆会被放大到超出边界，边缘部分被裁剪。

4.3 结合 Canvas 进行精确定位Canvas面板允许通过Canvas.Left和Canvas.Top进行绝对定位，是绘制自由图形的理想容器。这里演示如何在Canvas中绘制叠加的图形，并控制其Stretch。

<Window ... (同上)> <Grid> <Canvas Width="400" Height="300" Background="WhiteSmoke" HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- 一个被拉伸的矩形作为背景框 --> <Rectangle Canvas.Left="50" Canvas.Top="50" Width="300" Height="200" Fill="#20FF6347" Stroke="Tomato" StrokeThickness="1" Stretch="Fill"/> <!-- 一个保持比例的椭圆 --> <Ellipse Canvas.Left="100" Canvas.Top="80" Width="150" Height="150" Fill="#406495ED" Stroke="RoyalBlue" StrokeThickness="3" Stretch="Uniform"/> <!-- 一个不被拉伸的矩形（边框） --> <Rectangle Canvas.Left="120" Canvas.Top="100" Width="80" Height="80" Fill="Transparent" Stroke="Green" StrokeThickness="2" Stretch="None"/> <!-- 一段说明文字 --> <TextBlock Canvas.Left="60" Canvas.Top="20" Text="Canvas 中的图形与 Stretch" FontWeight="Bold"/> </Canvas> </Grid> </Window>

在Canvas中，Width和Height结合Stretch决定了图形最终的视觉大小。Stretch=”Uniform”的椭圆会在150x150的框内保持圆形（因为宽高相等）。Stretch=”None”的矩形则严格按80x80绘制。

5. 实战：在 C# 代码中动态创建与操控形状

有时我们需要根据数据或用户交互动态生成图形。这在后台代码（C#）中实现非常灵活。

5.1 动态创建矩形和椭圆我们在MainWindow.xaml.cs的构造函数或某个事件处理程序中添加代码。

首先，在 XAML 中为动态创建的图形预留一个容器，比如一个StackPanel，并为其命名。

<!-- 在 MainWindow.xaml 的 Grid 中添加 --> <StackPanel x:Name="DynamicShapesPanel" Orientation="Vertical" Margin="10"> <Button x:Name="AddShapeButton" Content="动态添加形状" Click="AddShapeButton_Click" Margin="5" Padding="10"/> <Border x:Name="ShapeContainer" BorderBrush="LightGray" BorderThickness="1" Height="300" Margin="5"> <Canvas x:Name="DrawingCanvas"/> </Border> </StackPanel>

然后，在后台代码文件中实现按钮点击事件。

// MainWindow.xaml.cs using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; namespace WpfShapeDrawingDemo { public partial class MainWindow : Window { private Random _random = new Random(); public MainWindow() { InitializeComponent(); } private void AddShapeButton_Click(object sender, RoutedEventArgs e) { // 清空画布（可选） // DrawingCanvas.Children.Clear(); // 1. 动态创建一个矩形 Rectangle dynamicRect = new Rectangle(); dynamicRect.Width = 80; dynamicRect.Height = 60; // 设置位置 (在Canvas中) Canvas.SetLeft(dynamicRect, _random.Next(10, 250)); Canvas.SetTop(dynamicRect, _random.Next(10, 150)); // 设置外观 dynamicRect.Fill = new SolidColorBrush(Color.FromRgb((byte)_random.Next(256), (byte)_random.Next(256), (byte)_random.Next(256))); dynamicRect.Stroke = Brushes.Black; dynamicRect.StrokeThickness = 2; // 关键：设置 Stretch 属性 dynamicRect.Stretch = Stretch.Fill; // 可以尝试改为其他枚举值 // 2. 动态创建一个椭圆 Ellipse dynamicEllipse = new Ellipse(); dynamicEllipse.Width = 70; dynamicEllipse.Height = 70; // 宽高相等，为正圆 Canvas.SetLeft(dynamicEllipse, _random.Next(10, 250)); Canvas.SetTop(dynamicEllipse, _random.Next(10, 150)); dynamicEllipse.Fill = new SolidColorBrush(Color.FromArgb(180, (byte)_random.Next(256), (byte)_random.Next(256), (byte)_random.Next(256))); // 带透明度 dynamicEllipse.Stroke = Brushes.DarkSlateGray; dynamicEllipse.StrokeThickness = 1.5; dynamicEllipse.Stretch = Stretch.Uniform; // 保持圆形 // 3. 将形状添加到 Canvas 的子元素集合中 DrawingCanvas.Children.Add(dynamicRect); DrawingCanvas.Children.Add(dynamicEllipse); // 4. （可选）为形状添加交互，例如鼠标点击事件 dynamicRect.MouseDown += Shape_MouseDown; dynamicEllipse.MouseDown += Shape_MouseDown; } private void Shape_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { if (sender is Shape shape) { // 点击时改变边框颜色 shape.Stroke = Brushes.Red; shape.StrokeThickness = 4; } } } }

5.2 运行时修改 Stretch 属性我们可以通过其他控件（如ComboBox）来动态改变已有图形的Stretch属性，观察实时变化。

在 XAML 中添加一个ComboBox和作为“目标”的形状。

<StackPanel Margin="10"> <TextBlock Text="动态切换 Stretch 属性" FontWeight="Bold"/> <ComboBox x:Name="StretchSelector" SelectedIndex="0" SelectionChanged="StretchSelector_SelectionChanged"> <ComboBoxItem Content="None"/> <ComboBoxItem Content="Fill"/> <ComboBoxItem Content="Uniform"/> <ComboBoxItem Content="UniformToFill"/> </ComboBox> <Border BorderBrush="Gray" BorderThickness="1" Margin="0,10" Padding="20" Background="WhiteSmoke"> <Ellipse x:Name="TargetEllipse" Width="120" Height="80" Fill="SkyBlue" Stroke="Blue" StrokeThickness="3"/> </Border> </StackPanel>

在后台代码中处理SelectionChanged事件。

private void StretchSelector_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (StretchSelector.SelectedItem is ComboBoxItem selectedItem) { string stretchMode = selectedItem.Content.ToString(); Stretch newStretch; // 将字符串转换为 Stretch 枚举值 switch (stretchMode) { case "None": newStretch = Stretch.None; break; case "Fill": newStretch = Stretch.Fill; break; case "Uniform": newStretch = Stretch.Uniform; break; case "UniformToFill": newStretch = Stretch.UniformToFill; break; default: newStretch = Stretch.Fill; break; } // 应用新的 Stretch 值到目标椭圆 TargetEllipse.Stretch = newStretch; } }

运行程序，通过下拉框切换Stretch模式，可以立即看到椭圆在固定容器内的适配方式变化，这是理解Stretch行为最直观的方式。

6. 常见问题与排查思路

在使用 WPF 绘制形状和设置Stretch时，你可能会遇到一些典型问题。

7. 最佳实践与工程建议

将形状绘制集成到实际项目中时，遵循一些最佳实践可以提高代码的可维护性、性能和用户体验。

7.1 资源与样式复用避免对每个形状进行重复的属性设置。使用Style和Resource进行统一管理。

<Window.Resources> <!-- 定义一个通用的形状样式 --> <Style x:Key="CommonShapeStyle" TargetType="Shape"> <Setter Property="StrokeThickness" Value="2"/> <Setter Property="Opacity" Value="0.9"/> <Setter Property="RenderOptions.BitmapScalingMode" Value="HighQuality"/> </Style> <!-- 定义一个特定于数据图表的矩形样式 --> <Style x:Key="ChartBarStyle" TargetType="Rectangle" BasedOn="{StaticResource CommonShapeStyle}"> <Setter Property="Fill" Value="#FF4A90E2"/> <Setter Property="RadiusX" Value="2"/> <Setter Property="RadiusY" Value="2"/> <Setter Property="Stretch" Value="Fill"/> <!-- 图表柱状通常填充 --> </Style> </Window.Resources> <Grid> <Rectangle Style="{StaticResource ChartBarStyle}" Width="50" Height="120"/> </Grid>

7.2 性能考量

• 少用Canvas进行复杂静态布局：对于大量静态图形，如果布局简单，使用Grid或UniformGrid可能比绝对定位的Canvas性能更好，因为 WPF 布局系统能更好地优化。
• 虚拟化：当需要绘制成百上千个形状（如大型图表）时，考虑使用VirtualizingCanvas（如果自定义控件）或第三方库，只渲染可视区域内的元素。
• 简化视觉树：过度复杂的嵌套面板会影响渲染性能。确保可视化树简洁。

7.3 数据绑定与 MVVM在 MVVM 模式中，避免在后台代码中直接操作 UI 元素。可以通过数据绑定将形状的属性与 ViewModel 中的属性关联。对于复杂图形集合，可以使用ItemsControl配合DataTemplate。

<!-- 假设 ViewModel 有一个 ObservableCollection<DataPoint> Points 属性 --> <ItemsControl ItemsSource="{Binding Points}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Ellipse Width="{Binding Size}" Height="{Binding Size}" Fill="{Binding Color}" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"> <Ellipse.Style> <Style TargetType="Ellipse"> <Setter Property="Stretch" Value="Uniform"/> </Style> </Ellipse.Style> </Ellipse> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

7.4 交互与动画WPF 形状完美支持 WPF 的动画和触发器系统。你可以为Fill、StrokeThickness、RenderTransform等属性添加动画，以响应用户交互（如鼠标悬停、点击）。

<Rectangle Width="100" Height="60" Fill="LightGray" Stroke="Black"> <Rectangle.Style> <Style TargetType="Rectangle"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <ColorAnimation To="Orange" Duration="0:0:0.2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/> <DoubleAnimation To="5" Duration="0:0:0.2" Storyboard.TargetProperty="StrokeThickness"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <ColorAnimation To="LightGray" Duration="0:0:0.5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"/> <DoubleAnimation To="1" Duration="0:0:0.5" Storyboard.TargetProperty="StrokeThickness"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style> </Rectangle.Style> </Rectangle>

掌握Rectangle、Ellipse等基本形状的绘制和Stretch属性的控制，是构建丰富 WPF 界面的基石。从静态声明到动态创建，从基础属性到高级交互，理解每个环节背后的原理（特别是布局与渲染的协同）至关重要。Stretch的四种模式提供了从“严格保持原样”到“完全适应空间”的完整策略谱系，正确选择可以解决大部分图形尺寸适配问题。建议读者在理解本文示例的基础上，动手修改参数，观察变化，并尝试将其应用到自己的项目场景中，例如自定义进度条、状态指示灯、简单的图表绘制等，从而真正内化这些知识。