WPF學習04：2D繪圖 使用Shape繪基本圖形

    我們將使用Shape進行基本圖形繪制。

例子

    一個可移動的矩形方框：

  

    XAML代碼：

<Window x:Class="Shape.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="#019aff"
        Title="Shape" Height="350" Width="525" KeyUp="Window_KeyUp" Loaded="Window_Loaded"
        >
    <Canvas Name="MainCanvas">
        <Rectangle Stroke="White" Width="80.6" Canvas.Top="50" Canvas.Left="50" Height="80.6" Name="DisplayRectangle"/>
    </Canvas>
</Window>

 

    后台代碼：

private void Window_KeyUp(object sender, KeyEventArgs e)
{
    switch (e.Key)
    {
        case Key.Up:
            RectangleCanvasTop += 10;
            break;
        case Key.Down:
            RectangleCanvasTop -= 10;
            break;
        case Key.Right:
            RectangleCanvasLeft += 10;
            break;
        case Key.Left:
            RectangleCanvasLeft -= 10;
            break;
        default:
            break;
    }
    Canvas.SetLeft(DisplayRectangle, RectangleCanvasLeft);
    Canvas.SetTop(DisplayRectangle, RectangleCanvasTop);
}

---

 

Shape簡介

   以下是各類Shape的繼承結構：

   

    各類Shape均繼承於Shape，而Shape與其它的WPF控件一樣，也繼承於FrameworkElement，即其它控件支持的功能（各種事件，屬性），Shape也是支持的，這是使用Shape繪圖的優點。

    例子中，Shape是放在Canvas中的，Shape亦可放在其它的Layout控件中。由於Canvas提供了絕對定位的支持，故而常常與Shape搭配出現。

---

 

Ellipse:

  

    XAML實現：

<Canvas Name="MainCanvas">
    <Ellipse Width="100" Height="100" Fill="White"></Ellipse>
    <Ellipse Canvas.Left="100" Width="50" Height="100" Fill="White"></Ellipse>
</Canvas>

    后台代碼實現：

var circle = new Ellipse()
{
    Width = 100,
    Height = 100,
    Fill = new SolidColorBrush(Colors.White)
};
var ellipse = new Ellipse()
{
    Width = 50,
    Height = 100,
    Fill = new SolidColorBrush(Colors.White)
};
Canvas.SetLeft(ellipse, 100);
MainCanvas.Children.Add(circle);
MainCanvas.Children.Add(ellipse);

---

 

Line

  

   XAML實現:

<Line X1="50" X2="100" Y1="50" Y2="100" Stroke="White"></Line>
<Line X1="100" X2="150" Y1="100" Y2="100" Stroke="White"></Line>

    后台代碼實現:

MainCanvas.Children.Add(new Line(){
    X1 = 0,
    X2 = 100,
    Y1 = 100,
    Y2 = 0,
    Stroke = new SolidColorBrush(Colors.White)
});

---

 

Polygon

   

    XAML實現:

<Polygon Points="0,0 50,50 50,100" Stroke="Black"></Polygon>
<Polygon Canvas.Left="100" Points="0,0 50,50 50,100 100,50" Fill="White" Stroke="Black"></Polygon>

    后台代碼:

var polygon1PointsCollection = new PointCollection();
polygon1PointsCollection.Add(new Point() { X = 0, Y = 0 });
polygon1PointsCollection.Add(new Point() { X = 50, Y = 50 });
polygon1PointsCollection.Add(new Point() { X = 50, Y = 100 });

var polygon1 = new Polygon()
{
    Stroke = new SolidColorBrush(Colors.Black),
    Points = polygon1PointsCollection
};
MainCanvas.Children.Add(polygon1);

var polygon2PointsCollection = new PointCollection();
polygon2PointsCollection.Add(new Point() { X = 0, Y = 0 });
polygon2PointsCollection.Add(new Point() { X = 50, Y = 50 });
polygon2PointsCollection.Add(new Point() { X = 50, Y = 100 });
polygon2PointsCollection.Add(new Point() { X = 100, Y = 50 });
var polygon2 = new Polygon()
{
    Stroke = new SolidColorBrush(Colors.Black),
    Points = polygon2PointsCollection,
    Fill = new SolidColorBrush(Colors.White)
};
Canvas.SetLeft(polygon2, 100);
MainCanvas.Children.Add(polygon2);

 

---

 

虛線邊框：

    XAML實現:

<Polygon Points="0,0 50,50 50,100" Stroke="Black" StrokeDashArray="2 2"></Polygon>
<Polygon Points="0,0 50,50 50,100" Stroke="Black" StrokeDashArray="4 4" Canvas.Left="100"></Polygon>