不可不知的WPF形狀（Shape）

老码识途呀發表於2024-09-04

在WPF開發中經常需要進行繪製圖形，可以利用Shape型別繪製基本的形狀，而且Shape派生自FrameworkElement，屬於UI元素範疇，可以直接利用XAML進行繪製。本文透過一些簡單的小例子，簡述如何透過Shape類繪製形狀，僅供學習分享使用，如有不足之處，還請指正。

Shape類位於System.Windows.Shapes名稱空間，而上篇文章介紹的Brush位於System.Windows.Media命令空間，由此可見兩者所屬的分類不同。Shape屬於abstract修飾的抽象類，不能直接例項化，需要使用其派生類才可以。

形狀物件

WPF提供了許多可以直接使用的Shape物件，而這些形狀物件都是Shape的派生類，常見的主要包括直線（Line），橢圓（Ellipse），路徑（Path），矩形（Rectangle），閉合多邊形（Polygon），非閉合多邊形（Ployline）等，具體如下所示：

不可不知的WPF形狀（Shape）

所有的形狀物件都派送自Shape基類，所以具有相同的屬性，主要有以下幾個：

  • Stroke，主要用於描述邊框的繪製方式，為Brush型別。
  • Fill，主要用於描述形狀物件的填充繪製方式，為Brush型別。
  • StrokeThickness，主要用於設定形狀外邊框的寬度，為double型別。

形狀物件由於繼承自FrameworkElement，可以像其他UI元素一樣用在頁面佈局容器中。而由於Canvas支援子控制元件的絕對定位，所以非方便Shape物件的繪製。

直線（Line）

Line可用於在兩點之間繪製直線。除了繼承自Shape的屬性外，屬於Line的常見屬性如下：

X1,Y1，主要用於設定直線的起始座標。

X2,Y2，主要用於設定直線的結束座標

繪製一條直線，程式碼如下所示：

// 增加一個直線形狀
var line = new Line();
//設定起始座標
line.X1 = 1;
line.Y1 = 1;
//設定結束座標
line.X2 = 50;
line.Y2 = 50;
line.HorizontalAlignment = HorizontalAlignment.Left;
line.VerticalAlignment = VerticalAlignment.Center;
//設定邊框線繪製方式和寬度
line.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
line.StrokeThickness = 2;
myGrid.Children.Add(line);

上述程式碼在XAML中實現，如下所示：

<Line 
      X1="1" Y1="1" 
      X2="50" Y2="50" 
      Stroke="LightSteelBlue" 
      StrokeThickness="2" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Center">
</Line>

儘管Line也有Fill屬性，但是一般不會使用，因為Line沒有閉合空間，設定了也不會有效果。

下圖顯示了呈現的 Line。

直線圖示

橢圓（Ellipse）

Ellipse透過Width和Height屬性來繪製橢圓，而圓（Circle）就是Width和Height相等的橢圓。

繪製橢圓程式碼如下所示：

// 建立一個橢圓
Ellipse ellipse = new Ellipse();
// 建立一個畫筆
SolidColorBrush brush = new SolidColorBrush();
brush.Color = Color.FromArgb(255, 255, 255, 0);
ellipse.Fill = brush;//用畫筆作為橢圓的填充方式
ellipse.StrokeThickness = 2;
ellipse.Stroke = Brushes.Black;

//設定橢圓的大小
ellipse.Width = 200;
ellipse.Height = 100;

上述程式碼在XAML中實現，如下所示：

<Ellipse
    Fill="#FFFFFF00"
    Height="100"
    Width="200"
    StrokeThickness="2"
    Stroke="Black"/>

下圖顯示了一個呈現的 Ellipse 示例。

橢圓圖示

矩形（Rectangle）

Rectangle透過Width和Height來繪製矩形，透過Fill屬性設定矩形的填充方式，透過Stroke和StrokThickness設定外邊框的畫筆和粗細。Rectangle常見屬性如下所示：

  • Width，Height 設定矩形的寬度和高度。
  • Fill設定矩形的填充方式，為Brush型別。
  • Stroke設定外邊框的繪製方式，為Brush型別。
  • StrokeThickness，設定外邊框的粗細，為double型別。
  • RadiusX，RadiusY，可用於為矩形設定圓角，分別對應矩形圓角的x軸和y軸半徑。

繪製矩形，如下所示：

<Canvas Width="120" Height="200" >
    <!-- 寬100高50，藍色填充的矩形 -->
    <Rectangle
               Width="100" Height="50"
               Fill="Blue"
               Canvas.Left="10"
               Canvas.Top="25" />
    <!-- 寬100高50，藍色填充，黑邊框，半徑為20的圓角的矩形 -->
    <Rectangle
               Width="100" Height="50"
               Fill="Blue"
               Stroke="Black" StrokeThickness="4"
               RadiusX="20" RadiusY="20"
               Canvas.Left="10"
               Canvas.Top="100"/>
</Canvas>

非閉合多邊形（Polyline）

Ployline是一系列的非閉合的連線線，透過Points屬性設定折線的頂點，Stroke設定線條的繪製方式，StrokeThickness設定線條的粗細。由於Polyline是非閉合的，所以Fill屬性不起作用。

繪製非閉合多變形，如下所示：

<Canvas Height="400" Width="400">
    <Polyline
              Points="10,110 60,10 110,110"
              Stroke="Black"
              StrokeThickness="4" />
    <Polyline
              Points="10,110 110,110 110,10"
              Stroke="Black"
              StrokeThickness="4"
              Canvas.Left="150" /> 
</Canvas>

下圖顯示了一個Ployline的示例：

不可不知的WPF形狀（Shape）

閉合多邊形（Polygon）

Polygon用於繪製閉合多邊形，依次將多邊形的頂點進行連線，並自動繪製一條連線第一個點和最後一個點的線，形成閉合多邊形。常見屬性如下所示：

  • Points設定多邊形的頂點，表示一組座標，不同頂點用空格隔開，同一個頂點的x,y座標用逗號隔開。格式：x1,y1 x2,y2 x3,y3 ... xn,yn。
  • Fill設定多邊形的填充方式，為Brush型別。
  • Stroke設定外邊框的繪製方式，為Brush型別。
  • StrokeThickness，設定外邊框的粗細，為double型別。

Polygon繪製多邊形程式碼如下所示：

<Canvas Height="300" Width="300">
    <!-- 藍色三角形 -->
    <Polygon Points="10,110 60,10 110,110" 
             Fill="Blue" />
    <!-- 黑邊框的藍色三角形 -->
    <Polygon Points="10,110 60,10 110,110"
             Fill="Blue"
             Stroke="Black" StrokeThickness="4"
             Canvas.Top="150" />
    <!-- 藍色填充的三角形 -->
    <Polygon Points="10,110 110,110 110,10"
             Fill="Blue"
             Canvas.Left="150" />
    <!-- 黑邊框無填充的三角形-->
    <Polygon Points="10,110 110,110 110,10"
             Stroke="Black" StrokeThickness="4"
             Canvas.Left="150" Canvas.Top="150" />
</Canvas>

下圖顯示了一個Ploygon示例：

不可不知的WPF形狀（Shape）

路徑形狀（Path）

Path用於繪製曲線和複雜的圖形，主要透過Data屬性進行設定路徑，為Geometry型別。常見的Geometry型別有LineGeometry，RectangleGeometry，EllipseGeometry等簡單的圖形，還可以用PathGeometry建立複雜的圖形。

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>

上述程式碼中，Figures作為PathGeometry的預設屬性，Segments作為PathFigure的預設屬性，可以省略，簡化後的程式碼如下所示：

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathFigureCollection>
                <PathFigure StartPoint="10,100">
                    <PathSegmentCollection>
                        <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
                    </PathSegmentCollection>
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry>
    </Path.Data>
</Path>

下圖顯示了呈現的形狀。

路徑圖示

上述程式碼相對比較複雜，如果要設計一個複雜的圖形，則可能要幾十上百行程式碼，所以在XAML中，還有一種簡化寫法，如下所示：

<Path Stroke="DarkGoldenRod" StrokeThickness="3"
    Data="M 100,200 C 100,25 400,350 400,175 H 280" />

生成的形狀如下所示：

不可不知的WPF形狀（Shape）

關於Path中Data的語法知識，可以不必死記硬背，只需要瞭解即可。

可拉伸的形狀（Stretch）

Shape及其派生類，都有Stretch屬性，可用於填充佈局空間，常見屬性如下：

  • None：不會拉伸 Shape 物件的內容。

  • Fill：將拉伸 Shape 物件的內容以填充其佈局空間。 不保留縱橫比。

  • Uniform：最大程度地拉伸 Shape 物件的內容以填充佈局空間，同時保留原始縱橫比。

  • UniformToFill：拉伸 Shape 物件的內容以填滿布局空間，同時保留原始縱橫比。

Stretch設定示例如下所示：

<Polygon  
         Points="0,0 0,1 1,1"  
         Fill="Blue"  
         Width="100"  
         Height="100"  
         Stretch="Fill"  
         Stroke="Black"  
         StrokeThickness="2" />

在上述示例中，使用了 Polygon 來繪製從 (0,0) 到 (0,1) 再到 (1,1) 的一個很小的三角形。 Polygon 物件的 Width 和 Height 設定為 100，其拉伸屬性設定為 Fill。 因此，Polygon 物件的內容（三角形）被拉伸以填充更大的空間。

不可不知的WPF形狀（Shape）

以上就是《不可不知的WPF形狀（Shape）》的全部內容，具體內容可參考官網：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/graphics-multimedia/shapes?view=netframeworkdesktop-4.8

相關文章