WPF 中圖案和基本繪圖概觀

發行項
08/21/2008

更新：2007 年 11 月

本主題概述說明如何使用 Shape 物件進行繪製。Shape 的型別是 UIElement，可讓您將圖案繪製至螢幕。因為它們是 UI 項目，所以 Shape 物件可以用於 Panel 項目和大部分控制項內。

Windows Presentation Foundation (WPF) 提供數個圖形和呈現服務的存取層級。在最上層，Shape 物件十分容易使用，而且提供許多可用功能 (如配置和參與 Windows Presentation Foundation (WPF) 事件系統)。

這個主題包含下列章節。

圖案物件
使用路徑和幾何
繪製圖案
可自動縮放的圖案
轉換圖案
相關主題

圖案物件

WPF 提供一些立即可用的 Shape 物件。所有圖案物件都是繼承自 Shape 類別。可用的圖案物件包括 Ellipse、Line、Path、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
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)

// 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);

下列影像顯示呈現的 Line。

線條圖例

雖然 Line 類別提供 Fill 屬性，但是因為 Line 沒有任何區域，所以設定它並不會有任何效果。

另一個通用圖案是 Ellipse。而定義圖案的 Width 和 Height 屬性，就可以建立 Ellipse。若要繪製圓形，請指定 Width 值等於 Height 值的 Ellipse。

<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, 0, 0);
            myEllipse.Fill = mySolidColorBrush; 

            // Set the width and height of the Ellipse.
            myEllipse.Width = 100;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

下列影像顯示已呈現 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>

下列影像顯示呈現的圖案。

路徑圖例

如需 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 屬性字串是以 "moveto" 命令 (以 M 表示) 開始，可建立 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 參考和 HOW TO：使用 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>

下圖顯示呈現的圖案。

SolidColorBrush 圖例

您也可以使用漸層、影像、圖樣和其他項目，來繪製圖案的筆劃或填滿。如需詳細資訊，請參閱使用純色和漸層繪製的概觀。

可自動縮放的圖案

Line、Path、Polygon、Polyline 和 Rectangle 類別都有 Stretch 屬性。這個屬性決定如何自動縮放 Shape 物件的內容 (要繪製的圖案) 以填滿 Shape 物件的配置空間。因為明確 Width 和 Height 設定，或因為它的 HorizontalAlignment 和 VerticalAlignment 設定，所以 Shape 物件的配置空間就是配置系統所配置的 Shape 空間量。如需 Windows Presentation Foundation 配置的額外資訊，請參閱配置系統概觀。

Stretch 屬性會取用下列其中一個值：

None：Shape 物件的內容不會自動縮放。
Fill：Shape 物件的內容會自動縮放以填滿它的配置空間。不會保留外觀比例 (Aspect Ratio)。
Uniform：Shape 物件的內容會盡可能自動縮放到最大，以填滿它的配置空間，並保留它的原始外觀比例。
UniformToFill：Shape 物件的內容會自動縮放，以完全填滿它的配置空間，並保留它的原始外觀比例。

請注意，自動縮放 Shape 物件的內容時，會在自動縮放之後繪製 Shape 物件的外框。

在下列範例中，Polygon 是用來繪製從 (0,0) 到 (0,1) 再到 (1,1) 的一個非常小的三角形。Polygon 物件的 Width 和 Height 是設定為 100，而它的自動縮放屬性是設定為 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。Angle 45 會將項目順時針旋轉 45 度，而 Angle 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>

下圖顯示套用兩個轉換的結果。

採用不同中心點的 45 度旋轉