稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle
[索引页]
[源码下载]
作者：webabcd
介绍
Silverlight 2.0 图形：
Ellipse - 椭圆
Line - 线
Path - 一系列相互连接的直线和曲线
Polygon - 多边形，闭合图形，起点与终点自动相连
Polyline - 非闭合图形，一串连接起来的线，起点与终点不会自动相连
Rectangle - 矩形
在线DEMO
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 - 原点坐标
RadiusX - X轴半径
RadiusY - Y轴半径
-->
<EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" />
</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 - 两点之间的一条三次贝塞尔曲线
QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线
PolyBezierSegment - 一条或多条三次贝塞尔曲线
PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线
-->
<!--
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" />
<EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />
<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">
<!--矩形-->
<!--
RadiusX - 边角圆弧的X轴半径
RadiusY - 边角圆弧的Y轴半径
-->
<Rectangle Width="200" Height="120" Stroke="Black" StrokeThickness="6" RadiusX="10" RadiusY="30" />
</StackPanel>
</UserControl>
OK
[源码下载]
[源码下载]
稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle
作者：webabcd
介绍
Silverlight 2.0 图形：
Ellipse - 椭圆
Line - 线
Path - 一系列相互连接的直线和曲线
Polygon - 多边形，闭合图形，起点与终点自动相连
Polyline - 非闭合图形，一串连接起来的线，起点与终点不会自动相连
Rectangle - 矩形
在线DEMO
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 - 原点坐标 RadiusX - X轴半径 RadiusY - Y轴半径 --> <EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" /> </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 - 两点之间的一条三次贝塞尔曲线 QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线 PolyBezierSegment - 一条或多条三次贝塞尔曲线 PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线 --> <!-- 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" /> <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" /> <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"> <!--矩形--> <!-- RadiusX - 边角圆弧的X轴半径 RadiusY - 边角圆弧的Y轴半径 --> <Rectangle Width="200" Height="120" Stroke="Black" StrokeThickness="6" RadiusX="10" RadiusY="30" /> </StackPanel></UserControl>OK
[源码下载]
