在 Silverlight 中，Shape 是一种允许您在屏幕中绘制形状的 UIElement 类型。由于它们是用户界面 (UI) 元素，因此 Shape 对象可以在各种容器对象（如 Grid 和 Canvas）中使用。

 

　　Shape 对象

 

　　Silverlight 提供很多随时可用的 Shape 对象，包括 Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。Shape 对象共享以下通用属性：

　　

　　Stroke：说明如何绘制形状的轮廓。

　　

　　StrokeThickness：说明形状轮廓的粗细。

　　

　　Fill：说明如何绘制形状的内部。

　　

　　用于指定坐标和顶点的数据属性，以与设备无关的像素来度量。

　　

　　Shape 对象可以在 Canvas 对象中使用。Canvas 通过使用 Canvas..::..Left 和 Canvas..::..Top 附加属性支持其子对象的绝对定位。

　　

　　使用 Line 类可以在两个点之间绘制一条直线。下面的示例演示了几种指定线条坐标和描边属性的方法。

 

　　<Canvas Height="300" Width="300"> 　　<!-- Draws a diagonal line from (10,10) to (50,50). --> 　　<Line X1="10" Y1="10" X2="50" Y2="50" 　　Stroke="Black" 　　StrokeThickness="4" /> 　　 　　<!-- Draws a diagonal line from (10,10) to (50,50) 　　and moves it 100 pixels to the right. --> 　　<Line X1="10" Y1="10" X2="50" Y2="50" 　　StrokeThickness="10" 　　Canvas.Left="100"> 　　<Line.Stroke> 　　<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" 　　RadiusX="0.5" RadiusY="0.5"> 　　<RadialGradientBrush.GradientStops> 　　<GradientStop Color="Red" Offset="0" /> 　　<GradientStop Color="Blue" Offset="0.5" /> 　　</RadialGradientBrush.GradientStops> 　　</RadialGradientBrush> 　　</Line.Stroke> 　　</Line> 　　 　　<!-- Draws a horizontal line from (10,60) to (150,60). --> 　　<Line X1="10" Y1="60" X2="150" Y2="60" 　　Stroke="Black" 　　StrokeThickness="4"/> 　　 　　</Canvas>

　　

　　

　　虽然 Line 类提供了 Fill 属性，但设置该属性无效，因为 Line 没有区域。

　　

　　另一个常用形状是 Ellipse。通过定义形状的 Width 和 Height 属性来创建 Ellipse，如以下示例中所示。若要绘制一个圆，请指定一个其 Width 和 Height 值相等的 Ellipse。

　　

　　<Canvas> 　　<Ellipse 　　Fill="Yellow" 　　Height="100" 　　Width="200" 　　StrokeThickness="2" 　　Stroke="Black"/> 　　</Canvas>

　　

　　

　　使用 Path 和 Geometry

 

　　使用 Path 类可以绘制曲线和复杂形状。使用 Geometry 对象来绘制这些曲线和形状。若要使用 Path，请创建一个 Geometry 并使用它来设置 Path 对象的 Data 属性。可以从各种 Geometry 对象中进行选择。LineGeometry、RectangleGeometry 和 EllipseGeometry 类说明了相对简单的形状。若要创建更复杂的形状或创建曲线，请使用 PathGeometry。

　　

 

　　XAML 缩写语法

 

　　在 XAML 中，可以使用一种特殊的缩写语法来描述 Path。在下面的示例中，使用缩写语法来绘制一个复杂形状。

　　

　　<Canvas> 　　 　　<Path Stroke="DarkGoldenRod" StrokeThickness="3" 　　Data="M 100,200 C 100,25 400,350 400,175 H 280" /> 　　 　　</Canvas>

　　

　  下图显示呈现的 Path。

　　

　　

　　Data 属性字符串使用 mini-language。它以 move 命令开头（由 M 指示），它为 Canvas 的坐标系统中的路径建立一个起点。Path 数据参数区分大小写。大写的 M 指示新的当前点的绝对位置。小写 m 则指示相对坐标。第一个线段是一个三次方贝塞尔曲线，该曲线从 (100,200) 开始，在 (400,175) 结束，使用 (100,25) 和 (400,350) 这两个控制点绘制。此线段由 Data 属性字符串中的 C 命令指示。同样，大写的 C 指示绝对路径；小写的 c 则指示相对路径。

　　

　　第二个线段以绝对水平 line 命令 H 开头，它指定绘制一条从前面的子路径的终结点 (400,175) 到新终结点 (280,175) 的直线。由于它是一个水平 line 命令，因此指定的值是 x 坐标。

 

　　

　　绘制形状

 

　　使用 Brush 对象绘制形状的 Stroke 和 Fill。在下面的示例中，指定了 Ellipse 的描边和填充。请注意，画笔属性的有效输入可以是关键字或十六进制颜色值。

 

　　<Canvas Width="300" Height="300" Background="LightGray"> 　　<Ellipse 　　Canvas.Top="50" 　　Canvas.Left="50" 　　Fill="#FFFFFF00" 　　Height="75" 　　Width="75" 　　StrokeThickness="5" 　　Stroke="#FF0000FF"/> 　　</Canvas>

　　

　　

　　下图显示了呈现的 Ellipse。

　　

　　 

　　

　　您也可以使用属性元素语法显式创建一个 SolidColorBrush 对象，以使用纯色绘制形状。

 

　　<Canvas> 　　 　　<!-- This polygon shape uses predefined color values for its Stroke and 　　Fill properties. 　　The SolidColorBrush Opacity property affects the fill color in 　　this case by making it slightly transparent (opacity of 0.4) so 　　that it blends with any underlying color. --> 　　 　　<Polygon 　　Points="300,200 400,125 400,275 300,200" 　　Stroke="Purple" 　　StrokeThickness="2"> 　　<Polygon.Fill> 　　<SolidColorBrush Color="Blue" Opacity="0.4"/> 　　</Polygon.Fill> 　　</Polygon> 　　 　　</Canvas>

　　

　　

　　下图显示呈现的多边形。

　　

　　

　　

　　还可以绘制形状的带有渐变、图像、图案等效果的描边或填充。

 

 

　　变换形状

 

　　Transform 对象可以用于在二维平面中变换形状（或任何其他 UIElement）。不同类型的变换包括旋转 (RotateTransform)、缩放 (ScaleTransform)、斜切 (SkewTransform) 和转换 (TranslateTransform)。

　　

　　经常应用于形状的变换操作是旋转。若要旋转形状，请创建一个 RotateTransform 并指定其 Angle。45 度的 Angle 将元素沿顺时针方向旋转 45 度；90 度将元素沿顺时针方向旋转 90 度；依此类推。如果您要控制元素的旋转点，请设置 CenterX 和 CenterY 属性。这些属性值以要变换的元素的坐标空间表示。CenterX 和 CenterY 具有默认值 0。最后，通过设置形状的 RenderTransform 属性将 RotateTransform 应用到元素。

　　

　  下面的示例演示一个 RotateTransform，它将 Rectangle 元素围绕点 (0,0) 旋转 45 度。

　　

　  <Grid x:Name="LayoutRoot" Background="White"> 　　<Rectangle Width="50" Height="50" 　　Fill="RoyalBlue"> 　　<Rectangle.RenderTransform> 　　<RotateTransform Angle="45" /> 　　</Rectangle.RenderTransform> 　　</Rectangle> 　　</Grid> 　　

　　

　　下图显示此代码的呈现效果。

　　

　　 

　　若要向一个形状（或任何其他 UI 元素）应用多次变换，请使用 TransformGroup。

 

 

 

 

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。