C# WinUI3 畫布 Canvas 繪圖示範大全

在 WinUI 3 中比較特別的是大部分的形狀都沒有辦法直接指定座標，需要使用 Canvas.SetLeft 和 Canvas.SetTop 來設定。

畫布

建立並加入畫布:

    
// using Microsoft.UI.Xaml.Controls; // Canvas 使用
// using Microsoft.UI.Xaml.Media; // 設定背景色用

Canvas canvas = new Canvas
{
    Width = 500,
    Height = 500,
    Background = new SolidColorBrush(Colors.White), // 設定背景色
};
this.Content = canvas;
    

點、圓

點其實就是小一點的圓型，繪製方式很簡單:

    
// using Microsoft.UI.Xaml.Shapes;

Ellipse ellipse = new Ellipse
{
    Width = 10,
    Height = 10,
    Fill = new SolidColorBrush(Colors.Red), // 填色
};
Canvas.SetLeft(ellipse, 50); // 在畫布上的 x 座標
Canvas.SetTop(ellipse, 50); // 在畫布上的 y 座標
canvas.Children.Add(ellipse);
    

設定邊框顏色和粗細

    
ellipse.Stroke = new SolidColorBrush(Colors.Black); // 邊框顏色
ellipse.StrokeThickness = 2; // 邊框粗細
    

線段

    
Line line = new Line
{
    X1 = 100,
    Y1 = 50,
    X2 = 150,
    Y2 = 100,
};

line.Stroke = new SolidColorBrush(Colors.Black); // 邊框顏色
line.StrokeThickness = 1; // 邊框粗細
canvas.Children.Add(line);
    

連續線段

要繪製連續線段不需要慢慢繪製多個線段，只要指定節點即可。

    
Polyline polyline = new Polyline
{
    Points = new PointCollection
    {
        new(50, 50),
        new(100, 100),
        new(150, 50),
        new(200, 100),
    },
    Stroke = new SolidColorBrush(Colors.Blue),
    StrokeThickness = 2
};
Canvas.SetLeft(polyline, 400);
Canvas.SetTop(polyline, 50);
canvas.Children.Add(polyline);
    

方形、矩形

    
Rectangle rectangle = new Rectangle
{
    Width = 50,
    Height = 50,
    Fill = new SolidColorBrush(Colors.Orange), // 填色
};
Canvas.SetLeft(rectangle, 200);
Canvas.SetTop(rectangle, 50);
canvas.Children.Add(rectangle);
    

設定邊框顏色和粗細

    
rectangle.Stroke = new SolidColorBrush(Colors.Red); // 邊框顏色
rectangle.StrokeThickness = 1; // 邊框粗細
    

多邊形

在 WinUI 3 中要繪製三角形該怎麼辦？那就自己指定頂點，和連續線段(Polyline)很像，只是線段最後頭尾會相連。填色(Fill)或邊框(Stroke)需要擇一，不然不會出現。

    
Polygon polygon = new Polygon
{
    Points = new PointCollection
    {
        new(0, 0),
        new(50, 100),
        new(100, 0),
    },
    Fill = new SolidColorBrush(Colors.Green), // 填色
};
Canvas.SetLeft(polygon, 300);
Canvas.SetTop(polygon, 50);
canvas.Children.Add(polygon);
    

設定邊框顏色和粗細

    
rectangle.Stroke = new SolidColorBrush(Colors.Blue); // 邊框顏色
rectangle.StrokeThickness = 1; // 邊框粗細