# 稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle

[索引页]
[源码下载]

Silverlight 2.0 图形：
Ellipse - 椭圆
Line - 线
Path - 一系列相互连接的直线和曲线
Polygon - 多边形，闭合图形，起点与终点自动相连
Polyline - 非闭合图形，一串连接起来的线，起点与终点不会自动相连
Rectangle - 矩形

http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

1、Ellipse.xaml
<UserControl x:Class="Silverlight20.Shape.Ellipse"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--椭圆-->

<!--
Width - 椭圆的宽
Height - 椭圆的高
Stroke - 边框
StrokeThickness - 边框尺寸
Fill - 填充

-->

<Ellipse Stroke="Red" Fill="Yellow" StrokeThickness="6" Width="100" Height="50"></Ellipse>

</StackPanel>
</UserControl>

2、Line.xaml
<UserControl x:Class="Silverlight20.Shape.Line"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--线-->

<!--
X1 - 起点的 X 坐标
Y1 - 起点的 Y 坐标
X2 - 终点的 X 坐标
Y2 - 终点的 Y 坐标
注：
Line无填充，也就是Line的Fill属性无效
坐标以左上角为原点，原点右侧/下侧为正方向

-->

<Line X1="0" Y1="100" X2="200" Y2="300" Stroke="Black" StrokeThickness="6" />

</StackPanel>
</UserControl>

3、Path.xaml
<UserControl x:Class="Silverlight20.Shape.Path"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--绘制一系列相互连接的直线和曲线-->

<!--
Path.Data - 要绘制的形状的 Geometry

-->

<Path Fill="Yellow" Stroke="Red" StrokeThickness="6">

<Path.Data>

<!--椭圆-->

<!--
Center - 原点坐标

-->

</Path.Data>

</Path>

<Path Fill="Yellow" Stroke="Red" StrokeThickness="6">

<Path.Data>

<!--矩形-->

<!--
Rect - 矩形的点坐标，分别为：左侧线的X轴坐标，上侧线的Y轴坐标，矩形宽，矩形高

-->

<RectangleGeometry Rect="100,0,100,50" />

</Path.Data>

</Path>

<Path Stroke="Red" StrokeThickness="6" >

<Path.Data>

<!--线-->

<!--
StartPoint - 起点坐标
EndPoint - 终点坐标

-->

<LineGeometry StartPoint="200,0" EndPoint="300,100" />

</Path.Data>

</Path>

<Path Stroke="Red" StrokeThickness="6">

<Path.Data>

<!--一个可能由弧、曲线、椭圆、直线和矩形组成的复杂图形-->

<PathGeometry>

<PathGeometry.Figures>

<!--
StartPoint - 图形起点坐标

-->

<PathFigure StartPoint="300,0">

<!--
PathFigure.Segments - 待画线的类型

-->

<PathFigure.Segments>

<PathSegmentCollection>

<!--
LineSegment - 单一线段
PolyLineSegment - 线段集合
ArcSegment - 弧（椭圆的一部分）
BezierSegment - 两点之间的一条三次贝塞尔曲线
PolyBezierSegment - 一条或多条三次贝塞尔曲线

-->

<!--
Size - 弧的X轴和Y轴半径
Point - 该Segment的终点坐标，下一个Segment的起点坐标

-->

<ArcSegment Size="100,50" Point="400,100" />

<!--
Point - 该Segment的终点坐标，下一个Segment的起点坐标

-->

<LineSegment Point="500,200" />

</PathSegmentCollection>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Path.Data>

</Path>

<Path Fill="Yellow" Stroke="Red" StrokeThickness="6">

<Path.Data>

<!--一个或多个Geometry-->

<!--
FillRule - 填充规则 [System.Windows.Media.FillRule枚举]
EvenOdd 和 Nonzero，详见MSDN

-->

<GeometryGroup FillRule="EvenOdd">

<LineGeometry StartPoint="200,0" EndPoint="300,100" />

<RectangleGeometry Rect="200, 0, 100, 100" />

</GeometryGroup>

</Path.Data>

</Path>

</StackPanel>
</UserControl>

4、Polygon.xaml
<UserControl x:Class="Silverlight20.Shape.Polygon"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--多边形，闭合图形，起点与终点自动相连-->

<!--
Points - 构造路径所使用的点
空格分隔点坐标，逗号分隔X轴和Y轴坐标

-->

<Polygon Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" />

</StackPanel>
</UserControl>

5、Polyline.xaml
<UserControl x:Class="Silverlight20.Shape.Polyline"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--非闭合图形，一串连接起来的线，起点与终点不会自动相连-->

<!--
Points - 构造路径所使用的点
空格分隔点坐标，逗号分隔X轴和Y轴坐标

-->

<Polyline Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" />

</StackPanel>
</UserControl>

6、Rectangle.xaml
<UserControl x:Class="Silverlight20.Shape.Rectangle"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Left">

<!--矩形-->

<!--