WPF 中圖案和基本繪圖概觀
本主題提供如何使用 物件繪製 Shape 的概觀。 Shape是 的型 UIElement 別，可讓您將圖形繪製到螢幕。 因為它們是 UI 元素， Shape 所以物件可以在元素和大部分控制項內 Panel 使用。
Windows Presentation Foundation （WPF） 提供數層圖形和轉譯服務的存取權。 在最上層， Shape 物件很容易使用並提供許多有用的功能，例如配置和參與 Windows Presentation Foundation （WPF） 事件系統。
Shape 物件
WPF 提供一些現成可用的 Shape 物件。 所有繪圖物件都會繼承自 Shape 類別。 可用的繪圖物件包括 Ellipse 、、 PathLine 、 Polygon 、 Polyline 、 和 Rectangle 。 Shape 物件會共用下列通用屬性。
Stroke：描述如何繪製圖形的外框。
StrokeThickness：描述圖形外框的粗細。
Fill：描述圖形內部的繪製方式。
用來指定座標和頂點的資料屬性，以裝置獨立像素為單位。
因為它們衍生自 UIElement ，所以繪圖物件可以在面板和大部分控制項內使用。 面板 Canvas 是建立複雜繪圖的特別好選擇，因為它支援其子物件的絕對位置。
類別 Line 可讓您在兩點之間繪製線條。 下列範例示範用來指定線段座標和筆觸屬性的數種方法。
<Canvas Height="300" Width="300">
<!-- Draws a diagonal line from (10,10) to (50,50). -->
<Line
X1="10" Y1="10"
X2="50" Y2="50"
Stroke="Black"
StrokeThickness="4" />
<!-- Draws a diagonal line from (10,10) to (50,50)
and moves it 100 pixels to the right. -->
<Line
X1="10" Y1="10"
X2="50" Y2="50"
StrokeThickness="4"
Canvas.Left="100">
<Line.Stroke>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Blue" Offset="0.25" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Line.Stroke>
</Line>
<!-- Draws a horizontal line from (10,60) to (150,60). -->
<Line
X1="10" Y1="60"
X2="150" Y2="60"
Stroke="Black"
StrokeThickness="4"/>
</Canvas>
// Add a Line Element
myLine = gcnew Line();
myLine->Stroke = Brushes::LightSteelBlue;
myLine->X1 = 1;
myLine->X2 = 50;
myLine->Y1 = 1;
myLine->Y2 = 50;
myLine->HorizontalAlignment = HorizontalAlignment::Left;
myLine->VerticalAlignment = VerticalAlignment::Center;
myLine->StrokeThickness = 2;
myGrid->Children->Add(myLine);
// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);
' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)
下圖顯示已轉譯的 Line 。
雖然 類別 Line 確實提供 Fill 屬性，但設定它沒有任何作用，因為 Line 沒有區域。
另一個常見的圖形是 Ellipse 。 Ellipse藉由定義圖形的 Width 和 Height 屬性來建立 。 若要繪製圓形，請指定 Ellipse 其 Width 和 Height 值相等的 。
<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
namespace SDKSample
{
public partial class SetBackgroundColorOfShapeExample : Page
{
public SetBackgroundColorOfShapeExample()
{
// Create a StackPanel to contain the shape.
StackPanel myStackPanel = new StackPanel();
// Create a red Ellipse.
Ellipse myEllipse = new Ellipse();
// Create a SolidColorBrush with a red color to fill the
// Ellipse with.
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
// Describes the brush's color using RGB values.
// Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
myEllipse.Fill = mySolidColorBrush;
myEllipse.StrokeThickness = 2;
myEllipse.Stroke = Brushes.Black;
// Set the width and height of the Ellipse.
myEllipse.Width = 200;
myEllipse.Height = 100;
// Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse);
this.Content = myStackPanel;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Namespace SDKSample
Partial Public Class SetBackgroundColorOfShapeExample
Inherits Page
Public Sub New()
' Create a StackPanel to contain the shape.
Dim myStackPanel As New StackPanel()
' Create a red Ellipse.
Dim myEllipse As New Ellipse()
' Create a SolidColorBrush with a red color to fill the
' Ellipse with.
Dim mySolidColorBrush As New SolidColorBrush()
' Describes the brush's color using RGB values.
' Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0)
myEllipse.Fill = mySolidColorBrush
myEllipse.StrokeThickness = 2
myEllipse.Stroke = Brushes.Black
' Set the width and height of the Ellipse.
myEllipse.Width = 200
myEllipse.Height = 100
' Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse)
Me.Content = myStackPanel
End Sub
End Class
End Namespace
下圖顯示已轉譯 Ellipse 的範例。
使用路徑和幾何
類別 Path 可讓您繪製曲線和複雜的圖形。 這些曲線和圖形會使用 Geometry 物件來描述。 若要使用 Path ，您可以建立 Geometry ，並使用它來設定 Path 物件的 Data 屬性。
有各種不同的 Geometry 物件可供選擇。 LineGeometry、 RectangleGeometry 和 EllipseGeometry 類別描述相對簡單的圖形。 若要建立更複雜的圖形或建立曲線，請使用 PathGeometry 。
PathGeometry 和 PathSegments
PathGeometry 物件是由一或多個 PathFigure 物件所組成;每個 PathFigure 物件都代表不同的「圖形」或圖形。 每個 PathFigure 本身是由一或多個 PathSegment 物件所組成，每個物件都代表圖形或圖形的連接部分。 區段類型包括： LineSegment 、 BezierSegment 和 ArcSegment 。
在下列範例中， Path 是用來繪製二次方貝茲曲線。
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200" Point2="300,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
下列影像顯示轉譯的圖形。
如需和其他 Geometry 類別的詳細資訊 PathGeometry ，請參閱 Geometry 概觀 。
XAML 縮寫語法
在 Extensible Application Markup Language （XAML）中，您也可以使用特殊的縮寫語法來描述 Path 。 在下列範例中，縮寫語法是用來繪製複雜的圖形。
<Path Stroke="DarkGoldenRod" StrokeThickness="3"
Data="M 100,200 C 100,25 400,350 400,175 H 280" />
下圖顯示已轉譯的 Path 。
Data屬性字串會以 M 表示的 「moveto」 命令開頭，這會為 座標系統中 Canvas 的路徑建立起點。 Path 資料參數會區分大小寫。 大寫 M 表示新的目前點的絕對位置。 小寫 m 則表示相對座標。 第一個線段是三次方貝茲曲線，開始於 (100,200) 並結束於 (400,175)，使用 (100,25) 和 (400,350) 這兩個控制點繪製。 這個區段是由屬性字串中的 Data C 命令表示。 同樣地，大寫 C 表示絕對路徑；小寫 c 表示相對路徑。
第二個線段的開頭為絕對水平 "lineto" 命令 H，它會指定從前面的子路徑的端點 (400,175) 到新端點 (280,175) 繪製的線段。 因為它是水平 "lineto" 命令，指定的值是 x 座標。
如需完整的路徑語法，請參閱 Data 參考和使用 PathGeometry 建立圖形。
繪製圖形
Brush 物件是用來繪製圖形的 Stroke 和 Fill 。 在下列範例中，會指定 的 Ellipse 筆劃和填滿。 請注意，筆刷屬性的有效輸入可以是關鍵字或十六進位色彩值。 如需可用色彩關鍵字的詳細資訊，請參閱 命名空間中 System.Windows.Media 類別的屬性 Colors 。
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
下圖顯示已轉譯的 Ellipse 。
或者，您可以使用屬性元素語法來明確建立 SolidColorBrush 物件，以純色繪製圖形。
<!-- This polygon shape uses pre-defined color values for its Stroke and
Fill properties.
The SolidColorBrush's Opacity property affects the fill color in
this case by making it slightly transparent (opacity of 0.4) so
that it blends with any underlying color. -->
<Polygon
Points="300,200 400,125 400,275 300,200"
Stroke="Purple"
StrokeThickness="2">
<Polygon.Fill>
<SolidColorBrush Color="Blue" Opacity="0.4"/>
</Polygon.Fill>
</Polygon>
下圖顯示轉譯的圖形。
您也可以使用漸層、影像、圖樣等等繪製圖形的筆觸或填滿。 如需詳細資訊，請參閱使用純色和漸層繪製的概觀。
可縮放的圖形
Line、 Path 、 Polygon 、 Polyline 和 Rectangle 類別都有 Stretch 屬性。 這個屬性會決定物件的內容（要繪製的圖形）如何 Shape 伸展以填滿 Shape 物件的版面配置空間。 Shape物件的版面配置空間是配置系統所配置的空間 Shape 量，因為明確 Width 和 Height 設定，或是因為其 HorizontalAlignment 和 VerticalAlignment 設定。 如需 Windows Presentation Foundation 中版面配置的詳細資訊，請參閱版面配置概觀。
Stretch 屬性可接受下列其中一個值：
UniformToFill：物件 Shape 的內容會伸展以完全填滿其版面配置空間，同時保留其原始外觀比例。
請注意，當物件的內容延展時 Shape ， Shape 物件的外框會在延展之後繪製。
在下列範例中， Polygon 用來繪製一個非常小的三角形，從 （0,0） 到 （0,1） 到 （1,1）。 物件的 PolygonWidth 和 Height 會設定為 100，而其 stretch 屬性會設定為 Fill。 因此， Polygon 物件的內容（三角形）會伸展以填滿較大的空間。
<Polygon
Points="0,0 0,1 1,1"
Fill="Blue"
Width="100"
Height="100"
Stretch="Fill"
Stroke="Black"
StrokeThickness="2" />
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));
Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
轉換圖形
類別 Transform 提供在二維平面中轉換圖形的方法。 不同類型的轉換包括旋轉（）、縮放比例（ RotateTransformScaleTransform ）、扭曲（ SkewTransform ）和翻譯（ TranslateTransform ）。
套用至圖形的一種常用轉換就是旋轉。 若要旋轉圖形，請建立 RotateTransform 並指定其 Angle 。 45 的 會 Angle 順時針旋轉元素 45 度;角度為 90 會順時針旋轉元素 90 度，依此順時針旋轉。 CenterX如果您想要控制專案旋轉的點，請設定 和 CenterY 屬性。 這些屬性值會以轉換之元素的座標空間表示。 CenterX 和 CenterY 的預設值為零。 最後，將 套用 RotateTransform 至 專案。 如果您不想讓轉換影響版面配置，請設定圖形的 RenderTransform 屬性。
在下列範例中， RotateTransform 是用來旋轉圖形左上角 （0,0） 的圖形 45 度。
<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50">
<Polyline.RenderTransform>
<RotateTransform CenterX="0" CenterY="0" Angle="45" />
</Polyline.RenderTransform>
</Polyline>
在下一個範例中，另一個圖形也旋轉 45 度，但這次是從點 (25,50) 旋轉。
<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline
Points="25,25 0,50 25,75 50,50 25,25 25,0"
Stroke="Blue" StrokeThickness="10"
Canvas.Left="75" Canvas.Top="50"
RenderTransformOrigin="0.5,0.5">
<Polyline.RenderTransform>
<RotateTransform Angle="45" />
</Polyline.RenderTransform>
</Polyline>
下圖顯示套用兩種轉換的結果。
在上一個範例中，已將單一轉換套用至每個圖形物件。 若要將多個轉換套用至圖形（或任何其他 UI 元素），請使用 TransformGroup 。
另請參閱
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應