用來指定座標和頂點的資料屬性，以裝置獨立像素為單位。
因為它們衍生自
UIElement
，所以繪圖物件可以在面板和大部分控制項內使用。 面板
Canvas
是建立複雜繪圖的特別好選擇，因為它支援其子物件的絕對位置。
類別
Line
可讓您在兩點之間繪製線條。 下列範例示範用來指定線段座標和筆觸屬性的數種方法。
<Canvas Height="300" Width="300">
<!-- Draws a diagonal line from (10,10) to (50,50). -->
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. -->
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). -->
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 是用來繪製二次方 Bezier 曲線。
<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 縮寫語法
在可延伸的應用程式標記語言 (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 明確和設定，或是因為其 HorizontalAlignment 和 HeightVerticalAlignment 設定。 如需Windows Presentation Foundation版面配置的其他資訊，請參閱版面配置概觀。
Stretch 屬性可接受下列其中一個值：
None：物件 Shape 的內容不會延展。
Fill：物件的 Shape 內容會延展以填滿其版面配置空間。 不會維持外觀比例。
Uniform：物件 Shape 的內容會盡可能延展以填滿其版面配置空間，同時保留其原始外觀比例。
UniformToFill：物件 Shape 的內容會延展以完全填滿其版面配置空間，同時保留其原始外觀比例。
請注意，當物件的內容延展時 Shape ， Shape 物件的外框會在延展之後繪製。
在下列範例中， Polygon 會使用 繪製非常小型的三角形，從 (0，0) 繪製到 (0，1) 到 (1，1) 。 Width物件的 Polygon 和 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 提供在二維平面中轉換圖形的方法。 不同類型的轉換包括旋轉 (RotateTransform) 、縮放 () ScaleTransform 、扭曲 () SkewTransform ，以及轉譯 () TranslateTransform 。
套用至圖形的一種常用轉換就是旋轉。 若要旋轉圖形，請建立 RotateTransform 並指定其 Angle 。 45 的 會 Angle 順時針旋轉元素 45 度;90 度的角度會順時針旋轉元素 90 度，依此類傳。 CenterX如果您想要控制專案旋轉的點，請設定 和 CenterY 屬性。 這些屬性值會以轉換之元素的座標空間表示。 CenterX 和 CenterY 的預設值為零。 最後，將 套用 RotateTransform 至 專案。 如果您不想讓轉換影響版面配置，請設定圖形的 RenderTransform 屬性。
在下列範例中， RotateTransform 是用來旋轉圖形左上角的 45 度 (0，0) 。
<!-- 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 。
2D 圖形和影像處理
使用純色和漸層繪製的概觀
逐步解說：我的第一個 WPF 傳統型應用程式
