杰人编程网

摘要

　　在WPF用户界面中，绘制2D图形内容的最简单方法是使用形状（shape）——专门用于表示简单的直线、椭圆、矩形以及多变形的一些类。从技术角度看，形状就是所谓的绘图图元(primitive)。可组合这些基本元素来创建更复杂的图形。 　　

关于WPF中形状的重要细节是，它们都继承自FrameworkElement类。因此，形状是元素。这样会带来许多重要的结果： 　　

形状绘制自身。不需要管理无效的情况和绘图过程。例如，当移动内容、改变窗口尺寸或改变形状属性时，不需要手动重新绘制形状。 　　

使用与其他元素相同的方式组织形状。换句话说，可在前面学过的任何布局容器中放置形状（尽管Canvas明显是最有用的容器，因为它允许在特定的坐标位置放置形状，当构建复杂的具有多个部分的图画时，这很重要）。 　　

形状支持与其他元素相同的事件。这意味着为了处理焦点、按下键盘、移动鼠标以及单击鼠标等，不必执行任何额外工作。可使用用于其他元素的相同事件集，并同样支持工具提示、上下文菜单和拖放操作。

正文

在WPF用户界面中，可以通过形状（Shape）来绘制直线、椭圆、矩形及一些多边形的类。通过这些基本的图像，组合成为复杂的图形。

Shape类中，主要的形状有Rectangle(),Ellipse(),Line,Polyline(),Polygon(),Path()，都继承自抽象类
System.Windows.Shapes.Shape。

<Grid>
    <StackPanel>
        <Rectangle Width="100" Height="60" Stroke="Blue" RadiusX="10" RadiusY="10" Fill="AntiqueWhite"/>
        <Ellipse Fill="Yellow" Stroke="Red" Height="100" Width="180" Margin="10"></Ellipse>
    </StackPanel>
</Grid>

Fill属性决定填充的颜色，Stroke边框颜色，在Rectangle类中多了RadiusX、RadiusY，决定了矩形圆角的大小。

使用Viewbox控件缩放形状

使用Canvas面板唯一的限制是不能改变图元自身的尺寸适应窗口大小。有些情况下，我们希望图元随着窗口大小改变尺寸，这样可以更好的利用可用空间。而使用Viewbox这个类只接受一个子元素，不过子元素可以是布局容器，在容器中可以包含其他元素。通常我们在Viewbox中放置Canvas，然后再Canvas面板中放置图形。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0">第一行</TextBlock>
    <Viewbox Grid.Row="1" HorizontalAlignment="Left">
        <Canvas Height="150" Width="200">
            <Ellipse Fill="Red" Stroke="Black" 
                     Canvas.Left="10" Canvas.Top="10" Width="100" Height="50" HorizontalAlignment="Left"></Ellipse>
            <Rectangle Fill="Beige" Stroke="Blue" Canvas.Left="62" Canvas.Top="75" Width="76" Height="50" HorizontalAlignment="Left"></Rectangle>
        </Canvas>
    </Viewbox>
</Grid>

在Viewbox中放置Canvas，Canvas中放置矩形和椭圆，随窗口大小改变进行缩放。

Line直线

由2个点来控制，X1点和X2点决定线段的起始位置，Line类中没有Fill属性，只能用Stroke属性填充线段的颜色，坐标原点在布局容器的左上角。

 <Line Stroke="Blue" X1="0" Y1="0" X2="100" Y2="0" Margin="10"></Line>

Polyline折线

用多个连续的点控制，依次连接。

<Polyline Stroke="Blue" Points="0,0 20,60 40,0 60,60 80,0 100,100"></Polyline>

Polygon多边形

Polygon类和Polyline类相似，是一系列点的集合，不过最好加上了一条线，将第一个点和最后一根点连了起来。

<Polygon Stroke="DarkBlue" Points="200,200 5,200 400,90" Fill="Aqua"></Polygon>