[索引页]
[源码下载]
作者: 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
2、Line.xaml
3、Path.xaml
4、Polygon.xaml
5、Polyline.xaml
6、Rectangle.xaml
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 >
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 >
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,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,100" />
< EllipseGeometry Center ="250,50" RadiusX ="50" RadiusY ="50" />
< RectangleGeometry Rect ="200, 0, 100, 100" />
</ GeometryGroup >
</ Path.Data >
</ Path >
</ StackPanel >
</ UserControl >
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,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,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 >
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,200" Stroke ="Red" StrokeThickness ="6" Fill ="Yellow" />
</ StackPanel >
</ UserControl >
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,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 >
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
[源码下载]