System.Windows.Shapes
命名空间中包含了显示矢量图形的元素分别为ellipse和rectangle;
但是如果你在textblock标签中添加这两个属性
表示绘制一个椭圆,是派生自Shapes命名空间,比如下面的例子:
<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Ellipse Fill= " b " Stroke= " WhiteSmoke " StrokeThickness= " 70 "
></Ellipse>
</Grid>
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Ellipse Fill= " b " Stroke= " WhiteSmoke " StrokeThickness= " 70 "
></Ellipse>
</Grid>
上 面代码的Fill属性表明是填充的颜色,Stroke属性是表示描边的颜色,StrokeThickness是表示轮廓的宽度,单位是像素,其中Fill 和Stroke属性都是Brush类型的,所以我们自定义他们的颜色,比如实现渐变效果;他的显示效果比较像鸡蛋切片,有木有
VerticalAlignment=
"
Center
" HorizontalAlignment=
"
Center
"
整 个挥之区域都不见了,原因是当ellipse所在的容器允许的情况下,ellipse会填充满这个容器区域,但是如果被强制缩小,比如加上上面两个属性, 那么绘制区域就会无限制的缩小,直至看不到,所以对绘制区域限制大小就变为必须的,限制大小的属性就是宽(width)和高(height),当我们设置 宽和高的时候,整个绘制区域就会变为圆形,比如:
<!--ContentPanel - 在此处放置其他内容-->
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Ellipse Fill= " Fuchsia " Stroke= " WhiteSmoke " StrokeThickness= " 50 " Width= " 400 " Height= " 400 "
></Ellipse>
</Grid>
<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
<Ellipse Fill= " Fuchsia " Stroke= " WhiteSmoke " StrokeThickness= " 50 " Width= " 400 " Height= " 400 "
></Ellipse>
</Grid>
效果:
下面用ellipse做出的效果是类似于三维图形的一个圆,前提是设置宽和高相同:
<Grid x:Name=
"
ContentPanel
" Grid.Row=
"
1
" Margin=
"
12,0,12,0
">
<Ellipse Width= " 400 " Height= " 400 ">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin= " 0.4 0.4 " >
<GradientStop Offset= " 0 " Color= " White "></GradientStop>
<GradientStop Offset= " 1 " Color= " Red "></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<Ellipse Width= " 400 " Height= " 400 ">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin= " 0.4 0.4 " >
<GradientStop Offset= " 0 " Color= " White "></GradientStop>
<GradientStop Offset= " 1 " Color= " Red "></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
效果:
由于设置的白色中心点是坐标 0.4 0.4 ,偏移离与中心坐标0.5 .05 所以显示看起来有种立体感。
是绘制成一个矩形,也是继承自shape类,比如下面的例子
<Rectangle Height=
"
400
" Width=
"
400
" Fill=
"
Brown
" Stroke=
"
Beige
" StrokeThickness=
"
50
"></Rectangle>
上面代码中的属性和ellipse中的用法一样,效果:
rectang还有ellipse不具有的两个属性,RadiusX和RadiusY
<Rectangle Height=
"
500
" Width=
"
400
" Fill=
"
Brown
"
RadiusX= " 190 "
RadiusY= " 200 "
Stroke= " Beige " StrokeThickness= " 50 ">
</Rectangle>
RadiusX= " 190 "
RadiusY= " 200 "
Stroke= " Beige " StrokeThickness= " 50 ">
</Rectangle>
其中RadiusX表示在X轴方向使 矩形的角变圆的椭圆的 x 轴半径,RadiausY表示是矩形的角变圆的椭圆的Y轴半径,注意,如果要使矩形的角变圆,这两个值都不能为空,因为圆角的形成是通过X轴和Y轴根据定 义的长度进行画椭圆得到,然后通过交汇形成圆角,还有就是里的RadiausX设置的值一定是小于或等于设置的宽度值,如果设置的是负值,系统也会认为值 为正值;
效果图:
本文转自shenzhoulong 51CTO博客,原文链接:http://blog.51cto.com/shenzhoulong/838219,如需转载请自行联系原作者